이미지는 보통 페이지에서 가장 무거운 바이트이므로, 이를 최적화하는 것이 가장 큰 LCP 개선입니다. 세 가지 지렛대: 최신 포맷, 반응형 크기 조정, 로딩 우선순위.
최신 포맷: AVIF / WebP
AVIF와 WebP는 같은 품질에서 JPEG/PNG보다 훨씬 작게 압축됩니다(AVIF는 종종 JPEG보다 50% 작음). 구형 브라우저도 동작하도록 폴백과 함께 제공하세요:
html
이미지는 보통 페이지에서 가장 무거운 바이트이므로, 이를 최적화하는 것이 가장 큰 LCP 개선입니다. 세 가지 지렛대: 최신 포맷, 반응형 크기 조정, 로딩 우선순위.
AVIF와 WebP는 같은 품질에서 JPEG/PNG보다 훨씬 작게 압축됩니다(AVIF는 종종 JPEG보다 50% 작음). 구형 브라우저도 동작하도록 폴백과 함께 제공하세요:
2000px 이미지를 400px 스마트폰에 보내지 마세요. srcset은 브라우저가 기기에 맞는 크기를 고르게 합니다:
<img
srcset="/p-400.jpg 400w, /p-800.jpg 800w, /p-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
src="/p-800.jpg" width="800" height="600" alt="...">
sizes는 이미지가 얼마나 넓게 렌더링되는지 브라우저에 알려주어 가장 작고 충분한 소스를 고르게 합니다.
fetchpriority="high", loading="eager", 그리고 preload 고려.loading="lazy"로 필요할 때까지 페치하지 않음.CLS를 막기 위해 width/height를 항상 유지하세요.
느린 LCP는 대부분 그저 과도하게 큰 히어로 이미지 문제입니다. 포맷(AVIF/WebP), 적절한 해상도를 위한 srcset, 올바른 우선순위 — 그리고 LCP 이미지를 지연 로딩하지 않는 것 — 을 아는 것이 면접관이 기대하는 실용적 도구 모음이며, 보통 실제 사이트에서 가장 영향력 있는 단일 변경입니다.
주니어부터 시니어까지 상세한 답변이 포함된 IT 면접 질문 라이브러리.
후원하기