Critical CSS 생성기.

Critical Path CSS를 생성하고 웹사이트 속도를 높이세요

⚙

3단계로 간단하게 적용하는 Critical CSS

Critical CSS를 생성하려는 페이지의 URL을 입력하세요
결과를 페이지의 <title> 바로 아래에 있는 <style> 태그에 붙여넣으세요
원본 스타일시트의 로딩 지연
<link rel = "preload" href = "orig.css" type = "text / css" as = "style" onload = "this.onload = null; this.rel = 'stylesheet' ; "/>

Critical CSS란 무엇인가요?

Critical CSS는 보이는 뷰포트를 렌더링하는 데 사용되는 CSS 선언의 모음입니다. 보이는 뷰포트는 종종 '스크롤 없이 볼 수 있는 콘텐츠'라고 불립니다. 스크롤하지 않고도 브라우저에서 볼 수 있는 웹페이지의 일부입니다. 보이는 뷰포트는 방문자가 가장 먼저 보는 것이므로 보이는 뷰포트의 렌더링을 우선시해야 합니다. Critical CSS가 이를 도와줄 수 있습니다!

왜 Critical CSS를 사용해야 하나요?

한마디로 말해서, 훨씬 더 빠르기 때문입니다! Critical path(스크롤 없이 볼 수 있는) CSS는 CSS 전달을 최적화하는 데 사용할 수 있는 가장 중요하고 영향력 있는 기술 중 하나입니다. 모든 최신 브라우저가 작동하는 방식 때문에 외부 파일의 모든 스타일은 렌더링 차단으로 간주됩니다. 이는 브라우저가 페이지의 head에 있는 모든 외부 CSS 파일을 다운로드할 때까지 렌더링(구체적으로 말하면 렌더 트리 생성)을 시작하지 않는다는 것을 의미합니다. 브라우저가 1개 이상의 CSS 파일을 다운로드해야 하는 경우 페이지가 100ms 이상 쉽게 차단될 수 있습니다. Google PageSpeed Insights에서는 페이지 로딩 속도를 높이기 위해 렌더링 차단 리소스를 제거할 것을 제안합니다.
이를 방지하는 한 가지 방법은 Critical CSS를 사용하는 것입니다. Critical CSS는 페이지의 보이는 부분만 표시하는 데 필요한 CSS 모음입니다. 이 Critical CSS는 종종 페이지의 head에 인라인으로 표시됩니다. 결과적으로 브라우저는 렌더링을 시작하기 전에 1개 이상의 CSS 파일을 다운로드할 필요가 없습니다. 그동안 페이지가 표시되는 동안 브라우저는 백그라운드에서 최종 CSS 파일을 다운로드합니다.

Critical CSS 생성기를 어떻게 사용하나요?

먼저 웹페이지의 Critical Path CSS를 생성해야 합니다. 페이지의 URL을 제공하고 'Critical CSS 생성'을 누르기만 하면 됩니다. 몇 초 후에 추출된 CSS가 표시됩니다.
해당 CSS를 복사하여 페이지의 <title> 바로 아래에 있는 <style> 태그의 <head>에 배치하세요.
다음 단계는 원본 CSS를 지연시키는 것입니다. CSS를 지연시키는 방법에는 3가지가 있습니다.

CSS를 미리 로드하고 로드 시 rel을 교체합니다
media=print로 CSS를 로드하고 로드 시 미디어 요소를 교체합니다
원본 CSS 링크를 페이지의 푸터에 배치합니다

비-Critical CSS 캐싱

Critical CSS는 브라우저 캐시에 아직 CSS 파일이 저장되지 않은 최초 방문자에게는 엄청나게 빠릅니다. 재방문자의 경우 CSS 파일이 브라우저 캐시에서 로드될 수 있으므로 일반적으로 Critical CSS가 거의 필요하지 않습니다.

스타일시트를 결합해야 하나요?

Critical CSS를 구현한 후 스타일시트를 결합하는 것이 더 빠를까요? 이 질문에 대한 쉬운 대답은 없습니다. 스타일시트를 결합하는 것이 더 빠를 때도 있고 그렇지 않을 때도 있습니다. 이는 크리티컬 렌더링 패스와 관련이 있습니다. 우선순위가 높은 리소스가 5개 이상인 경우 일반적으로 몇 개의 스타일시트를 결합하는 것이 좋습니다.

Critical CSS 생성기는 어떻게 작동하나요?

Critical CSS 생성기는 맞춤형 NodeJS 플랫폼에서 작동합니다. 기본적으로 실제 Chrome 기반 웹 브라우저를 사용하여 웹페이지를 방문합니다. 다양한 뷰포트에서 웹사이트를 평가하고 보이는 뷰포트(페이지의 보이는 부분) 렌더링에 사용되는 스타일시트의 부분을 결정합니다. 그런 다음 렌더링에 필요한 CSS를 정리하고 축소합니다.

Critical CSS 생성기를 위한 WordPress 플러그인이 있나요?

네, 있습니다. 이는 Core Web Vitals 플러그인이라고 하며, 당사의 Critical Path 추출기와 함께 작동하도록 특별히 설계되었습니다.

피드백 / 베타 상태

현재 Critical CSS 생성기는 베타 상태입니다. 이는 제가 아직 항상 실험을 진행하고 있다는 의미입니다. Critical CSS 생성기가 작동하지 않나요? 걱정하지 마세요... 5분 후에 다시 시도해 보세요!

피드백이 있거나 기능이 누락되었나요? 저에게 알려주세요