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 플러그인이 있습니다.