속도 보고서 샘플

example.com용으로 준비한 데모 데이터입니다. 사용자 사이트의 감사나 고객 사례가 아닙니다. 로그인이나 카드가 필요 없으며 한도를 사용하지 않습니다.

사이트 속도 최적화가 필요합니다.

페이지 URLhttps://example.com

지역: 암스테르담 · nl-ams
날짜 및 시간: 2025년 2월 10일 오후 02:23 UTC
기기: 모바일
네트워크 속도: —

기술

ReactNext.jsjQueryTailwind CSSWebpack

추가 측정 매개변수

사용자 에이전트Mozilla/5.0 (Linux; Android 11; moto g power (2022)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Mobile Safari/537.36

Lighthouse12.4.0

화면 해상도360×640

네트워크 속도1.4 Mbit/s · RTT 150ms

주요 속도 지표

First Contentful Paint (FCP)

1.8s

≤1.8s

Largest Contentful Paint (LCP)

3.2s

≤2.5s

Cumulative Layout Shift (CLS)

0.05

≤0.10

첫 바이트까지의 시간

600ms

≤0.8s

총 차단 시간

450ms

≤200ms

Speed Index

2.8s

≤3.4s

INP가 별도 서비스로 분리됨 INP 서비스는 실제 클릭과 입력 시나리오를 실행하고, long-animation-frames와 무거운 핸들러를 찾습니다. 열기

가장 먼저 수정할 항목

이 예제의 vendor.js와 app.js에는 사용하지 않는 JavaScript가 있습니다. 리소스 사용량 차트에서 확인하고 불필요한 코드를 지연시킨 뒤 같은 기기와 지역에서 다시 측정하세요. 전송 크기와 메인 스레드 차단 시간을 비교하세요.

CLS 분석

데이터 없음

긴 작업

120ms 이하120–300ms300ms 초과

리소스 크기

1.8 MB

JS리소스 12개

963 KB

이미지리소스 18개

600 KB

CSS리소스 4개

150 KB

폰트리소스 3개

120 KB

문서리소스 1개

25 KB

사용량 차트

/assets/vendor.js200 KB500 KB60%

/assets/app.js100 KB250 KB60%

/assets/analytics.js56 KB80 KB30%

네트워크 진단

17 요청

중복 표시17개 중 17개 표시


/	200	580 ms	매우 높음
/assets/styles.css	200	120 ms	매우 높음
/assets/components.css	200	95 ms	매우 높음
/assets/vendor.js	200	340 ms	높음
/assets/app.js	200	220 ms	높음
/assets/analytics.js	200	110 ms	낮음
https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap	200	85 ms	매우 높음
https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2	200	65 ms	높음
https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4.woff2	200	70 ms	높음
/images/hero.webp	200	250 ms	높음
/images/banner.webp	200	280 ms	낮음
/images/footer-bg.png	200	190 ms	낮음
/images/icon-check.svg	200	25 ms	낮음
/api/v1/config	200	145 ms	높음
https://www.google-analytics.com/analytics.js	200	95 ms	낮음

리소스 로딩 힌트

리소스 힌트
Rel	As	리소스
Rel preconnect	As —	리소스 https://fonts.googleapis.com
Rel preconnect	As —	리소스 https://fonts.gstatic.com
Rel dns-prefetch	As —	리소스 https://www.google-analytics.com
Rel preload	As image	리소스 /images/hero.webp
Rel preload	As font	리소스 https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2

리소스 로딩 우선순위

리소스 Fetch Priority
리소스	우선순위	용량	권장사항
리소스 /images/hero.webp	우선순위 high	용량 —	권장사항 —
리소스 /assets/analytics.js	우선순위 low	용량 —	권장사항 —
리소스 https://www.google-analytics.com/analytics.js	우선순위 low	용량 —	권장사항 —
리소스 /images/footer-bg.png	우선순위 low	용량 —	권장사항 —

서드파티 리소스

서드파티 리소스 및 속도 영향
3rd-party	요청	용량	속도 영향
서드 파티 fonts.gstatic.com	요청 2	용량 81 KB	속도 영향 낮음
서드 파티 www.google-analytics.com	요청 1	용량 17 KB	속도 영향 낮음
서드 파티 fonts.googleapis.com	요청 1	용량 1 KB	속도 영향 낮음

추가 지표

내비게이션 타이밍

DOMContentLoaded: 2.5 s
DOMComplete: 4.8 s
LoadEvent: 4.9 s

DOM 및 문서

문서: 1
프레임: 1
DOM 노드: 850

JavaScript 메모리

JS 이벤트 리스너: 85
총 JS 메모리(Heap): 15.0 MB
사용된 JS 메모리 (Heap): 10.0 MB