Critical CSS 생성기.

Critical Path CSS를 생성하여 웹사이트 속도를 높이십시오

⚙

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

  1. Critical CSS를 생성할 페이지 URL을 입력하십시오
  2. 결과를 페이지 <title> 바로 아래 <style> 태그에 붙여넣으십시오
  3. 기존 스타일시트 로딩을 지연시키십시오
    <link rel = "preload" href = "orig.css" type = "text / css" as = "style" onload = "this.onload = null; this.rel = 'stylesheet' ; "/>

Critical CSS란 무엇입니까

Critical CSS는 화면에 보이는 viewport를 렌더링하는 데 필요한 CSS 선언 모음입니다. 화면에 보이는 viewport는 흔히 'above the fold 콘텐츠'라고 부릅니다. 스크롤하지 않고도 브라우저에서 바로 볼 수 있는 웹페이지 영역입니다. 방문자가 가장 먼저 보는 영역이므로 화면에 보이는 viewport의 렌더링을 최우선으로 처리해야 합니다. Critical CSS를 사용하면 이를 해결할 수 있습니다!

Critical CSS를 왜 사용해야 합니까

한마디로 훨씬 빠르기 때문입니다! Critical path (above-the-fold) CSS는 CSS 전송을 최적화하는 데 가장 중요하고 효과적인 기법 중 하나입니다. 모든 최신 브라우저의 동작 방식상, 외부 파일의 모든 스타일은 render blocking으로 처리됩니다. 즉, 브라우저는 페이지 head의 외부 CSS 파일을 모두 다운로드할 때까지 렌더링(구체적으로는 render tree 생성)을 시작하지 않습니다. 브라우저가 1개 이상의 CSS 파일을 다운로드해야 할 때 페이지는 100ms 이상 쉽게 차단될 수 있습니다. Google PageSpeed Insights에서도 페이지를 더 빠르게 로드할 수 있도록 render blocking 리소스를 제거하라고 권장합니다.
이를 방지하는 한 가지 방법이 바로 Critical CSS를 사용하는 것입니다. Critical CSS는 페이지에서 화면에 보이는 영역만을 표시하는 데 필요한 CSS 모음입니다. 이 Critical CSS는 주로 페이지 head에 인라인으로 삽입합니다. 그 결과 브라우저는 렌더링을 시작하기 전에 1개 이상의 CSS 파일을 다운로드할 필요가 없습니다. 페이지가 화면에 표시되는 동안, 브라우저는 백그라운드에서 최종 CSS 파일을 다운로드합니다.

Critical CSS 생성기는 어떻게 사용합니까?

우선 웹페이지의 Critical Path CSS를 생성해야 합니다. 페이지 URL을 입력한 뒤 'Generate Critical CSS'를 클릭하십시오. 몇 초 후 추출된 CSS가 나타납니다.
해당 CSS를 복사하여 페이지 <head>의 <title> 바로 아래 <style> 태그에 넣으십시오.
다음 단계는 기존 CSS 로딩을 지연시키는 것입니다. CSS를 지연시키는 방법에는 3가지가 있습니다.

  1. CSS를 preload하고 로드 시점에 rel 속성을 교체하십시오
  2. media=print로 CSS를 로드하고 로드 시점에 media 속성을 교체하십시오
  3. 기존 CSS 링크를 페이지 footer에 배치하십시오

Non-critical CSS 캐싱

Critical CSS는 브라우저 캐시에 아직 CSS 파일이 저장되지 않은 첫 방문자에게 매우 빠릅니다. 재방문자의 경우 브라우저 캐시에서 CSS 파일을 불러올 수 있으므로 보통 Critical CSS가 거의 필요하지 않습니다.

스타일시트를 병합해야 합니까?

Critical CSS를 적용한 뒤 스타일시트를 병합하면 속도가 더 빨라집니까? 이에 대해 단순하게 답하기는 어렵습니다. 스타일시트를 병합하는 것이 더 빠를 때도 있고 그렇지 않을 때도 있습니다. 이는 critical rendering path와 관련이 있습니다. 우선순위가 높은 리소스가 5개 이상이라면 스타일시트 몇 개를 병합하는 것이 대체로 유리합니다.

Critical CSS 생성기는 어떻게 작동합니까?

Critical CSS 생성기는 커스텀 NodeJs 플랫폼에서 동작합니다. 실제 Chrome 기반 웹 브라우저로 웹페이지를 직접 방문합니다. 다양한 viewport에서 웹사이트를 분석하여, 화면에 보이는 viewport(페이지에서 눈에 보이는 영역)를 렌더링하는 데 스타일시트의 어느 부분이 사용되는지 파악합니다. 그런 다음 렌더링에 필요한 CSS를 정리하고 minify합니다.

Critical CSS 생성기용 WordPress 플러그인도 있습니까?

네, 있습니다. 바로 Core Web Vitals 플러그인으로, 이 Critical Path 추출기와 연동되도록 특별히 설계되었습니다.

피드백 / 베타 상태

현재 Critical CSS 생성기는 베타 상태입니다. 아직 지속적으로 실험을 진행하고 있다는 뜻입니다. Critical CSS 생성기가 제대로 작동하지 않습니까? 걱정하지 마십시오 ... 5분 후에 다시 시도해 보십시오!

피드백이 있거나 필요한 기능이 있습니까? 알려주십시오