B2B 사이트 96.9% CWV 실패, 리소스 우선순위 최적화로 해결

Context

북미 B2B 소규모 비즈니스 웹사이트의 모바일 성능 저하 현상을 분석한 사례임. 대부분의 사이트가 최적화되지 않은 고해상도 이미지와 동기식 외부 스크립트 로드로 인해 심각한 렌더링 지연을 겪는 구조적 한계를 보임.

Technical Solution

• LCP 개선을 위해 Next.js Image 컴포넌트의 priority 속성을 통한 Preload Hint 주입 및 WebP/AVIF 자동 포맷 최적화 적용
• HTML 파싱 차단을 방지하기 위해 Third-party 스크립트에 defer 속성을 부여하거나 Next.js Script의 afterInteractive/lazyOnload 전략으로 로드 시점 분리
• 텍스트 렌더링 차단(FOIT) 해결을 위해 CSS font-display: swap 설정을 통한 폰트 로드 전 대체 폰트 표시 구조 설계
• 접근성 결함을 방지하기 위해 CI 파이프라인 내 axe-core CLI를 통합하여 Link Labels 누락을 자동 검출하는 검증 체계 구축
• 뷰포트별 최적 이미지 제공을 위해 srcset 및 sizes 속성을 활용한 반응형 이미지 전달 전략 수립

Impact

• 모바일 LCP 4.0s 초과 비율 86.4% 및 FCP 3.0s 초과 비율 72.4% 기록
• 모든 Core Web Vitals 통과 비율 3.1%에 불과한 극심한 성능 불균형 확인
• axe-core Link Labels 규칙 위반율 100% 달성으로 웹 접근성 설계 부재 증명

Key Takeaway

웹 성능 최적화의 핵심은 모든 리소스를 균등하게 처리하는 것이 아니라 LCP 요소와 핵심 폰트만 Priority-load하고 나머지는 Lazy-load하는 '리소스 우선순위의 차등화' 설계에 있음.