사용하지 않는 CSS 삭제

Lighthouse 보고서의 추천 섹션에는 사용되지 않은 CSS가 포함된 모든 스타일시트가 2KiB 이상을 절감할 수 있습니다. 사용되지 않는 CSS를 삭제하여 네트워크 활동에 소비되는 불필요한 바이트를 줄이세요.

Lighthouse 미사용 CSS 삭제 감사 스크린샷

사용하지 않는 CSS로 인해 실적이 저하되는 방식

<link> 태그를 사용하여 페이지에 스타일을 추가하는 것이 일반적인 방법입니다.

<!DOCTYPE html>
<html>
  <head>
    <link href="main.css" rel="stylesheet" />
    ...
  </head>
</html>

브라우저가 다운로드하는 main.css 파일은 이 파일을 사용하는 HTML과 별도로 저장되므로 외부 스타일시트라고 합니다.

기본적으로 브라우저는 콘텐츠를 사용자 화면에 표시하거나 렌더링하기 전에 모든 외부 스타일시트를 다운로드하고 파싱하고 처리해야 합니다. 스타일시트에 페이지의 스타일 지정에 영향을 주는 규칙이 포함되어 있을 수 있으므로 브라우저에서 스타일시트가 처리되기 전에 콘텐츠를 표시하려고 시도하는 것은 적절하지 않습니다.

각 외부 스타일시트는 네트워크에서 다운로드해야 합니다. 이러한 추가 네트워크 이동으로 인해 사용자가 화면에서 콘텐츠를 보기 전에 기다려야 하는 시간이 크게 증가할 수 있습니다.

또한 사용되지 않는 CSS는 브라우저에서 렌더링 트리를 생성하는 속도를 저하시킵니다. 렌더링 트리는 각 노드에 대한 스타일도 포함한다는 점을 제외하면 DOM 트리와 유사합니다. 렌더링 트리를 생성하려면 브라우저가 전체 DOM 트리를 탐색하고 각 노드에 적용되는 CSS 규칙을 확인해야 합니다. 사용되지 않는 CSS가 많을수록 브라우저에서 각 노드의 스타일을 계산하는 데 소비해야 하는 시간이 늘어납니다.

사용되지 않는 CSS 감지 방법

Chrome DevTools의 적용 범위 탭을 사용하면 중요한 CSS와 중요하지 않은 CSS를 찾을 수 있습니다. 범위 탭에서 사용된 CSS 및 사용되지 않은 CSS 보기를 참고하세요.

Chrome DevTools: 적용 범위 탭
Chrome DevTools: 적용 범위 탭

중요한 CSS 인라인 처리 및 중요하지 않은 CSS 연기

<script> 태그의 인라인 코드와 마찬가지로 HTML 페이지의 head에 있는 <style> 블록 내부의 첫 번째 페인트에 필요한 중요한 스타일을 인라인으로 추가합니다. 그런 다음 preload 링크를 사용하여 나머지 스타일을 비동기식으로 로드합니다.

중요한 도구를 사용하여 '스크롤 없이 볼 수 있는 부분' CSS를 추출하고 인라인 처리하는 과정을 자동화해 보세요.

중요하지 않은 CSS 연기에서 자세히 알아보세요.

스택별 안내

Drupal

사용하지 않는 CSS 규칙을 삭제해 보세요. 필요한 Drupal 라이브러리만 관련 페이지 또는 페이지의 구성요소에 연결합니다. 자세한 내용은 라이브러리 정의를 참고하세요.

Joomla

페이지에서 사용되지 않는 CSS를 로드하는 Joomla 확장 프로그램 수를 줄이거나 전환하는 것이 좋습니다.

WordPress

페이지에서 사용되지 않는 CSS를 로드하는 WordPress 플러그인의 수를 줄이거나 전환하는 것이 좋습니다.

자료