페이지 속도 체크리스트

DevTools로 LCP 요소를 파악하고 최대한 빠르게 로드되도록 합니다. 이미지를 압축하고, 최신 포맷(WebP/AVIF)을 사용하며, 명시적인 width/height를 설정하세요.

LCP 이미지나 폰트에 <link rel="preload">를 추가하여 브라우저가 CSS나 JS를 기다리지 않고 먼저 가져오도록 합니다.

이미지, 폰트 등의 자산을 CDN에서 제공하여 다양한 지역의 사용자에게 지연 시간을 줄입니다.

중요하지 않은 CSS와 JS를 지연 로드합니다. 크리티컬 CSS를 인라인으로 삽입하여 첫 렌더링 속도를 높이고 LCP 요소의 차단을 방지하세요.

srcset과 sizes 속성을 활용하여 각 뷰포트에 적절한 크기의 이미지를 제공하고, 과대한 이미지 다운로드를 방지합니다.

Time to First Byte를 800ms 미만으로 유지합니다. 서버 측 캐싱, 데이터베이스 쿼리 최적화, Edge 렌더링을 고려하세요.

LCP 요소는 즉시 로드되어야 합니다. 히어로 이미지에 loading="eager" 또는 fetchpriority="high"를 설정하세요.

50ms 이상 걸리는 JavaScript 작업을 requestIdleCallback, setTimeout, scheduler.yield() 등을 사용하여 작은 단위로 분할합니다.

사용하지 않는 코드를 제거하고, 비필수 스크립트를 지연시키며, 코드 분할을 사용하여 JavaScript 실행 시간을 줄입니다.

이벤트 핸들러를 가볍게 유지합니다. 무거운 계산은 Web Worker로 이동하거나 requestAnimationFrame으로 지연시킵니다.

DOM을 1,500개 노드 미만으로 유지합니다. 큰 DOM은 인터랙션 시 스타일 계산, 레이아웃, 페인트 작업을 느리게 합니다.

DOM 변경 직후에 레이아웃 속성(offsetHeight, getBoundingClientRect)을 읽지 마세요.

독립적인 섹션에 contain: content 또는 contain: layout을 추가하여 브라우저의 재레이아웃 범위를 제한합니다.

scroll, resize, input 이벤트에 디바운싱 또는 스로틀링을 적용하여 프레임당 과도한 처리를 방지합니다.

항상 width와 height 속성(또는 CSS aspect-ratio)을 포함하여 미디어 로드 전에 브라우저가 공간을 예약하도록 합니다.

광고 슬롯, iframe, 동적으로 삽입되는 콘텐츠에 min-height 또는 aspect-ratio 컨테이너를 사용합니다.

로드 후 기존 콘텐츠를 아래로 밀어내는 배너, 쿠키 알림, 알림을 동적으로 삽입하지 마세요.

font-display: swap과 함께 size-adjust 또는 폰트 폴백 메트릭을 사용하여 웹 폰트로 인한 레이아웃 이동을 방지합니다.

갑작스러운 크기 변경 대신 CSS 트랜지션을 사용합니다. width/height 대신 transform으로 애니메이션을 적용하세요.

아래쪽 섹션에 content-visibility: auto와 contain-intrinsic-size를 적용하여 레이아웃을 안정화합니다.

HTML, CSS, JS 응답을 Brotli(권장) 또는 gzip으로 압축합니다. 대부분의 호스팅 플랫폼에서 기본 지원합니다.

CSS와 JS 번들에서 공백, 주석, 사용하지 않는 코드를 제거합니다. Terser, cssnano 등의 도구를 사용하세요.

정적 자산에 적절한 max-age의 Cache-Control 헤더를 설정합니다. 해시된 파일명에는 immutable을 사용하세요.

서드파티 스크립트(분석, 채팅 위젯 등)를 감사합니다. 지연 로드하거나 defer를 적용하고, Partytown 도입을 고려하세요.

서버가 HTTP/2 이상을 지원하는지 확인하여 멀티플렉싱, 헤더 압축, 빠른 리소스 전달을 활용합니다.

서드파티 출처에 dns-prefetch와 preconnect를 사용합니다. 중요한 외부 도메인에 <link rel="preconnect">를 추가하세요.

동적 import와 Tree shaking을 사용하여 각 페이지에 필요한 JavaScript만 전송합니다. 초기 번들 크기를 줄입니다.