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에 유지한 다음 URL을 async 또는 defer 속성으로 표시할 수 있습니다(자바스크립트로 상호작용 추가 참고).
전혀 사용되지 않는 코드는 삭제해야 합니다 (사용하지 않는 코드 삭제 참고).
렌더링 차단 스타일시트를 제거하는 방법
<script> 태그의 인라인 코드와 마찬가지로 HTML 페이지의 head에 있는 <style> 블록 내부에서 첫 번째 페인트에 필요한 중요한 스타일을 인라인으로 추가합니다.
그런 다음 preload 링크를 사용하여 나머지 스타일을 비동기식으로 로드합니다(사용하지 않는 CSS 연기 참고).
중요한 도구를 사용하여 '스크롤 없이 볼 수 있는 부분' CSS를 추출하고 인라인 처리하는 프로세스를 자동화해 보세요.
렌더링 차단 스타일을 제거하는 또 다른 방법은 이러한 스타일을 미디어 쿼리별로 정리된 여러 파일로 분할하는 것입니다. 그런 다음 각 스타일시트 링크에 미디어 속성을 추가합니다. 페이지를 로드할 때 브라우저는 첫 번째 페인트만 차단하고 사용자의 기기와 일치하는 스타일시트를 검색합니다(렌더링 차단 CSS 참고).
마지막으로 CSS를 축소하여 추가 공백 또는 문자를 삭제합니다 (CSS 축소 참고). 이렇게 하면 사용자에게 가능한 가장 작은 번들을 전송할 수 있습니다.
스택별 안내
AMP
AMP 옵티마이저와 같은 도구를 사용하여 서버 측에서 AMP 레이아웃을 렌더링합니다.
Drupal
모듈을 사용하여 중요한 CSS 및 JavaScript를 인라인으로 처리하거나 고급 CSS/JS 집계 모듈과 같은 자바스크립트를 통해 애셋을 비동기식으로 로드하는 것이 좋습니다.
Joomla
중요한 애셋을 인라인하거나 덜 중요한 리소스를 지연하는 데 도움이 되는 다양한 Joomla 플러그인이 있습니다.
WordPress
중요한 애셋을 인라인하거나 덜 중요한 리소스를 연기하는 데 도움이 되는 다양한 WordPress 플러그인이 있습니다.