CSS 점검

스타일시트 분석: 파일 크기, 커버리지, 셀렉터 특이성 및 중복 선언.

장점

바이트 수준 CSS 커버리지

파일별 사용된 CSS와 사용되지 않은 CSS의 정밀 측정. 브라우저가 불필요하게 다운로드하는 킬로바이트를 정확히 확인하고 페이지 무게를 줄이세요.

특이성 제어

최소, 평균, 최대 셀렉터 특이성과 가장 무거운 상위 10개 셀렉터 보고서. 캐스케이드를 예측 가능하게 유지하고 스타일 유지보수를 쉽게 합니다.

중복 및 !important 감지

반복 선언과 !important 과다 사용의 자동 발견. 기능 손실 없이 CSS 크기를 줄이세요.

전체 스타일시트 맵

외부 및 인라인을 포함한 모든 연결 파일의 개요 — 크기, 유형, 커버리지 비율. 미디어 쿼리, 벤더 접두사, 색상 및 글꼴을 하나의 보고서에서 확인.

브라우저는 렌더링 시작 전에 모든 CSS를 다운로드하고 파싱합니다. 추가 스타일은 차단 시간을 증가시켜 FCP와 LCP를 늦춥니다. 미사용 CSS 제거는 페이지 로딩 속도를 높이는 가장 효과적인 방법 중 하나입니다.

특이성은 충돌 시 어떤 CSS 규칙이 이기는지 결정합니다. 높은 특이성은 '셀렉터 전쟁'으로 이어지고 유지보수를 어렵게 합니다. 보고서는 문제가 있는 셀렉터를 강조하여 캐스케이드를 단순화할 수 있게 합니다.

!important는 CSS의 자연스러운 캐스케이드를 깨뜨리고 스타일을 예측 불가능하게 만듭니다. 새로운 !important는 이를 재정의하기 위해 또 다른 !important를 강제합니다. 보고서는 모든 해당 선언을 나열하여 점진적 리팩토링을 지원합니다.

총 CSS 크기, 파일·규칙·셀렉터 수, 미사용 스타일 비율, 특이성 상위 점수, 중복 목록, !important 선언, 미디어 쿼리, 벤더 접두사, 색상 팔레트 및 사용 글꼴.

단일 페이지 분석은 보통 1분 이내에 완료됩니다. 서비스는 실제 브라우저에서 페이지를 로드하고 모든 스타일시트를 수집하여 실제 조건에서 커버리지를 분석합니다.