CSS 사용량
페이지와 스타일시트별로 검사 중 사용된 CSS의 크기와 비율을 확인하세요. 이번에 사용되지 않은 스타일도 사용자 동작 후나 다른 페이지에서 필요할 수 있습니다.
온라인 CSS 감사
페이지가 로드하는 CSS의 양, 검사 중 사용된 스타일과 반복되는 규칙을 확인하세요. 색상, 글꼴, 쌓임 순서와 오류를 한 보고서에서 볼 수 있습니다.
결과 형식
보고서는 CSS 소스, 지표, 신호를 보여줍니다
CSS 크기와 사용량을 확인한 후 색상, 글꼴, 쌓임 순서와 유효성 검사 오류를 살펴보세요.
보고서를 설명하기 위한 예시 데이터입니다. 실제 페이지 결과는 검사 후 표시됩니다.
스타일시트 출처
외부 스타일시트와 페이지에 포함된 스타일을 비교하세요. 출처별로 크기와 검사 중 사용된 코드 및 미사용 코드의 양을 보여줍니다.
| 소스 | 유형 | 사용률 | 미사용 |
|---|---|---|---|
| app.css | 외부 | 48 KiB / 72 KiB | 72 KiB · 60% |
| components.css | 외부 | 32 KiB / 8 KiB | 8 KiB · 20% |
| 인라인 스타일 | 인라인 | 6 KiB / 2 KiB | 2 KiB · 25% |
- 소스
- app.css
- 유형
- 외부
- 사용률
- 48 KiB / 72 KiB
- 미사용
- 72 KiB · 60%
- 소스
- components.css
- 유형
- 외부
- 사용률
- 32 KiB / 8 KiB
- 미사용
- 8 KiB · 20%
- 소스
- 인라인 스타일
- 유형
- 인라인
- 사용률
- 6 KiB / 2 KiB
- 미사용
- 2 KiB · 25%
스타일시트 출처와 반복된 선언부터 확인하세요. 반복 항목이 같은 컴포넌트와 상태에 속하는지 검토하세요. 소스를 수정한 뒤 다시 검사한 보고서와 비교하세요.
확인 항목
일반적인 조언 대신 완전한 CSS 인벤토리
보고서는 스타일 출처와 크기, 코드 사용량, 선택자 우선순위, 반복 선언, 디자인 값과 유효성 검사 오류를 모아 보여줍니다.
크기 및 소스
총 CSS 크기, 스타일시트 소스 수, 인라인 및 외부 스타일시트의 개별 개수를 수집합니다.
선택자 명시도
규칙 우선순위에 영향을 주는 선택자 명시도의 최솟값, 평균과 최댓값을 비교하세요. 가장 복잡한 선택자는 따로 표시합니다.
반복 선언과 !important
규칙, 선택자와 선언의 수, 반복되는 속성·값 쌍, !important 사용 예시를 확인하세요.
미디어 쿼리 및 접두사
가장 빈번한 미디어 쿼리를 보여주고 벤더 접두사가 있는 CSS 속성(-webkit-, -moz-, -ms-, -o-)을 셉니다.
색상, 글꼴, z-index, 오류
보고서는 고유 색상 값, 감지된 font-family 값, 숫자 z-index 값, CSS 유효성 오류 예시를 출력합니다.
작동 방식
URL에서 페이지의 전체 CSS 요약까지
페이지 URL을 입력하세요. Milten이 브라우저에서 페이지를 열고 스타일시트를 수집해 보고서를 만듭니다. 빌드 과정에 통합할 필요가 없습니다.
페이지를 로드하고 CSS 수집
보고서에는 검사한 URL, 날짜, 스타일 출처가 표시됩니다. 페이지에 포함된 스타일과 외부 스타일시트를 구분해서 보여 줍니다.
CSS 사용량과 선택자 우선순위 측정
사용된 CSS의 양, 발견된 규칙과 선언의 수, 명시도가 가장 높은 선택자를 확인하세요.
CSS 검토용 표 작성
반복 선언, !important, 미디어 쿼리, 브라우저 접두사, 색상, 글꼴, 쌓임 순서와 CSS 오류를 살펴보세요.
FAQ
CSS 감사에 관한 자주 묻는 질문
CSS 사용량, 선택자 우선순위, !important, 보고서 내용과 검사 시간에 대한 답변입니다.
미사용 CSS는 속도에 어떤 영향을 주나요?
브라우저는 페이지를 렌더링하기 전에 CSS를 다운로드하고 파싱하고 적용합니다. 불필요한 규칙이 많을수록 첫 렌더링 지연 위험이 커지고 인터페이스 유지보수도 어려워집니다.
선택자 명시도를 왜 검토해야 하나요?
명시도는 CSS 규칙이 충돌할 때 선택자 우선순위를 판단하는 데 도움이 됩니다. 명시도가 지나치게 높은 선택자는 덮어쓰려면 더 강한 규칙이 필요하므로 이후 수정을 어렵게 만듭니다.
모든 !important 선언을 제거해야 하나요?
아니요. !important는 선언의 우선순위를 바꾸며 의도적으로 사용될 수도 있습니다. 보고서는 조사할 위치를 보여줍니다. 대체하기 전에 캐스케이드와 컴포넌트 상태를 검토하세요.
보고서에는 어떤 데이터가 포함되나요?
보고서는 URL과 날짜, 스타일 출처와 크기, 코드 사용량, 선택자와 명시도, 반복 선언, !important, 미디어 쿼리, 브라우저 접두사, 색상, 글꼴, 쌓임 순서와 CSS 오류를 포함합니다.
페이지 검사는 얼마나 걸리나요?
단일 페이지 검사는 보통 1분 이내에 완료됩니다. 소요 시간은 리소스 수, 네트워크 상태, 로딩 후 페이지가 안정화되는 시간에 따라 달라집니다.
관련 서비스