중요한 CSS를 사용한 첫 번째 페인트

Critical CSS란 무엇인가요?

Critical CSS는 사용자가 페이지를 열 때 보게 되는 웹페이지의 첫 번째 영역(above-the-fold라고 하며 HTML로 인라인으로 표시됨)에 필요한 CSS 규칙을 결정하는 것입니다. 이 기술을 사용하면 브라우저는 외부 CSS 파일을 기다리지 않고 페이지를 그릴 수 있습니다.

렌더링 차단 문제 해결

브라우저는 기본적으로 모든 CSS 파일이 다운로드될 때까지 페이지 페인팅을 기다립니다. 이로 인해 특히 큰 CSS 파일이 있는 프로젝트에서 심각한 지연이 발생합니다. 우리는 중요한 CSS 기술로 이러한 대기 시간을 제거합니다:

1. 페이지 상단에 필요한 CSS 규칙을 결정합니다.
2. 이러한 규칙을 HTML의 부분에 인라인으로 추가합니다.
3. media="print" onload="this.media='all'"를 사용하여 기본 CSS 파일을 비동기식으로 로드합니다.

도구

Critical(npm 패키지), Penthouse 및 PurgeCSS와 같은 도구는 이 프로세스를 자동화하는 데 도움이 됩니다. 이를 Laravel Mix 또는 Vite 파이프라인에 통합할 수 있습니다.

이득

• FCP(First Contentful Paint) 시간이 40-60% 감소합니다.
• 사용자는 사이트가 로드되는 것을 즉시 느낍니다.
• Lighthouse 성능 점수가 10-20포인트 증가합니다.