Critical CSS 예산 계산기
인라인 Critical CSS 크기, 미사용 CSS 비율, 압축 후 무게, 초기 응답 예산을 점검합니다.
이 도구에 대해
Critical CSS를 인라인하면 첫 페인트가 빨라질 수 있지만, 과하면 HTML 응답 자체가 무거워집니다.
첫 화면에 필요한 CSS만 남기고 나머지 규칙을 초기 응답 밖으로 분리해야 하는지 판단할 수 있습니다.
Critical CSS
18.0 KB
미사용 CSS
12%
상태
개선 필요
결과
사용 방법
- 1
필요한 값을 입력하거나 텍스트를 붙여넣습니다.
- 2
옵션이나 단위를 원하는 방식으로 조정합니다.
- 3
표시된 결과를 확인하고 필요한 곳에 복사해 사용합니다.
기능
즉시 결과
값을 입력하면 결과가 브라우저에서 바로 업데이트됩니다.
브라우저 처리
입력값은 서버로 업로드하지 않고 기기 안에서 처리됩니다.
간단한 입력
반복 사용에 맞춘 명확한 입력 필드와 출력값을 제공합니다.
무료 사용
가입이나 설치 없이 바로 사용할 수 있습니다.
주요 사용 사례
- ›Critical CSS 블록을 인라인해도 될 만큼 작은지 확인합니다.
- ›첫 HTML 응답에 추가되는 압축 후 무게를 추정합니다.
- ›첫 화면 CSS 안의 미사용 규칙이 유지보수 문제가 되는 페이지를 찾습니다.