피드로 돌아가기
Dev.toFrontend
원문 읽기
LCP 1.8s에서 4.2s로 급증하는 병목 제거 및 WebP/AVIF 최적화 전략
Images, Fonts, Third-Party Scripts: LCP and CLS
AI 요약
Context
Hero Image의 지연 로딩과 Third-party Script의 동기적 실행으로 인한 LCP 및 CLS 회귀 발생. 특히 내 GTM 태그의 동기 실행이 Parser를 차단하여 LCP 후보 리소스의 렌더링을 지연시키는 구조적 한계 존재.
Technical Solution
- fetchpriority="high"와 를 조합한 LCP 리소스의 네트워크 우선순위 강제 상향
- srcset 및 sizes 속성을 통한 Device Pixel Ratio 기반 최적 해상도 이미지 선택 구조 설계
- AVIF(50% 압축)와 WebP(30% 압축)를 활용하되, Encoding 속도 차이에 따른 CDN 기반 사전 생성 전략 채택
- Width/Height 속성 명시를 통한 Intrinsic Aspect Ratio 확보로 이미지 로드 전 레이아웃 공간 예약 및 CLS 방지
- 사용자 인터랙션 발생 시점에 SDK를 로드하는 Facade Pattern 도입을 통한 Third-party Script 실행 비용 제거
- GTM 태그의 실행 시점을 DOMContentLoaded 이후로 지연시켜 Critical Rendering Path 최적화
실천 포인트
- LCP 이미지에 loading="eager", fetchpriority="high" 설정 및 <head> 내 Preload 적용 여부 검토 - 모든 이미지 태그에 명시적 width/height 속성을 부여하여 CLS 발생 가능성 차단 - AVIF/WebP 포맷 제공 및 <picture> 태그를 이용한 브라우저별 Fallback 체계 구축 - 외부 SDK(Maps, Chat 등)를 정적 이미지나 커스텀 버튼으로 대체하는 Facade Pattern 적용 검토 - Third-party 스크립트의 실행 시점을 분석하여 비동기 로딩 또는 DOMContentLoaded 이후로 배치