Lighthouse 보고서의 '기회' 섹션에는 페이지의 첫 페인트를 차단하는 모든 URL이 표시됩니다. 목표는 중요한 리소스를 인라인 처리하고, 중요하지 않은 리소스를 지연하고, 사용되지 않는 항목을 삭제하여 이러한 렌더링 차단 URL의 영향을 줄이는 것입니다.
어떤 URL이 렌더링 차단 리소스로 신고되나요?
Lighthouse는 스크립트와 스타일시트, 두 가지 유형의 렌더링 차단 URL에 플래그를 지정합니다.
다음을 실행하는 <script> 태그
- 문서의
<head>에 있습니다. defer속성이 없습니다.async속성이 없습니다.
<link rel="stylesheet"> 태그:
disabled속성이 없습니다. 이 속성이 있으면 브라우저가 스타일시트를 다운로드하지 않습니다.- 사용자의 기기에 정확하게 일치하는
media속성이 없습니다.media="all"은 렌더링 차단으로 간주됩니다.
중요한 리소스를 식별하는 방법
렌더링 차단 리소스의 영향을 줄이기 위한 첫 번째 단계는 중요한 리소스와 그렇지 않은 리소스를 식별하는 것입니다. Chrome DevTools의 범위 탭을 사용하여 중요하지 않은 CSS 및 JS를 식별합니다. 페이지를 로드하거나 실행하면 탭에 사용된 코드의 양과 로드된 코드의 양이 표시됩니다.
필요한 코드와 스타일만 전송하여 페이지 크기를 줄일 수 있습니다. URL을 클릭하여 Sources 패널에서 해당 파일을 검사합니다. CSS 파일의 스타일과 JavaScript 파일의 코드는 두 가지 색상으로 표시됩니다.
- 녹색 (중요): 첫 번째 페인트에 필요한 스타일, 페이지의 핵심 기능에 중요한 코드
- 빨간색 (비중 낮음): 즉시 표시되지 않는 콘텐츠에 적용되는 스타일입니다. 페이지의 핵심 기능에 사용되지 않는 코드입니다.
렌더링을 차단하는 스크립트를 제거하는 방법
중요한 코드를 식별한 후 렌더링 차단 URL에서 HTML 페이지의 인라인 script 태그로 코드를 이동합니다.
페이지가 로드되면 페이지의 핵심 기능을 처리하는 데 필요한 요소를 갖게 됩니다.
렌더링 차단 URL에 중요하지 않은 코드가 있는 경우 URL에 코드를 유지한 다음 async 또는 defer 속성으로 URL을 표시할 수 있습니다(JavaScript로 상호작용 추가 참고).
전혀 사용되지 않는 코드는 삭제해야 합니다 (사용하지 않는 코드 삭제 참고).
렌더링 차단 스타일시트를 제거하는 방법
<script> 태그에 코드를 인라인 처리하는 것과 마찬가지로 HTML 페이지의 head에 있는 <style> 블록 내에서 첫 번째 페인트에 필요한 중요한 스타일을 인라인 처리합니다.
그런 다음 preload 링크를 사용하여 나머지 스타일을 비동기식으로 로드합니다(사용되지 않는 CSS 지연 참고).
중요 도구를 사용하여 'Above the Fold' CSS를 추출하고 인라인 처리하는 프로세스를 자동화하는 것이 좋습니다.
렌더링 차단 스타일을 제거하는 또 다른 방법은 이러한 스타일을 미디어 쿼리별로 구성된 여러 파일로 분할하는 것입니다. 그런 다음 각 스타일시트 링크에 media 속성을 추가합니다. 페이지를 로드할 때 브라우저는 사용자의 기기와 일치하는 스타일시트를 검색하기 위해 첫 번째 페인트만 차단합니다(렌더링 차단 CSS 참고).
마지막으로 CSS를 축소하여 여백이나 문자를 삭제합니다 (CSS 축소 참고). 이렇게 하면 사용자에게 최대한 작은 번들을 전송할 수 있습니다.
스택별 안내
AMP
AMP Optimizer와 같은 도구를 사용하여 서버 측에서 AMP 레이아웃을 렌더링합니다.
Drupal
모듈을 사용하여 중요한 CSS 및 JavaScript를 인라인으로 처리하는 방안을 고려하고, 중요하지 않은 CSS 또는 JavaScript에는 defer 속성을 사용합니다.
Joomla
중요한 애셋을 인라인으로 로드하거나 덜 중요한 리소스를 지연할 수 있게 도와주는 다양한 Joomla 플러그인이 있습니다.
WordPress
중요한 애셋을 인라인하거나 덜 중요한 리소스를 지연시키는 데 도움이 되는 다양한 WordPress 플러그인이 있습니다.