이 페이지는 Cloud Translation API를 통해 번역되었습니다.

사용하지 않는 CSS 삭제

Lighthouse 보고서 목록의 기회 섹션 사용하지 않는 CSS가 있는 모든 스타일시트에 대해 2KiB 이상을 절약할 수 있습니다. 사용하지 않는 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를 인라인으로 추가하고 중요하지 않은 CSS는 연기

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

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

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

스택별 안내

Drupal

사용하지 않는 CSS 규칙을 삭제해 보세요. 필요한 Drupal 라이브러리만 연결 추가할 수 있습니다. 자세한 내용은 라이브러리 정의를 참조하세요.

Joomla

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

WordPress

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

리소스

사용하지 않는 CSS 삭제 감사를 위한 소스 코드