JS 제거와 전략적 지연 로딩을 통한 Mobile Lighthouse 100점 달성

How I get marketing sites to 100/100 on mobile Lighthouse (the exact Astro setup)

Kent Weyers2026년 6월 19일7분intermediate

AI 요약

Context

대다수 마케팅 사이트가 불필요한 JavaScript 배포로 인해 Mobile 환경에서 TBT 및 LCP 성능 저하를 겪는 상황. 프레임워크의 Hydration 과정과 서드파티 스크립트가 메인 스레드를 점유하여 사용자 상호작용을 차단하는 구조적 한계 존재.

Technical Solution

Astro의 Zero JS by default 특성을 활용하여 빌드 타임에 Static HTML을 생성하고 Client-side JS 배포를 최소화한 구조 설계
외부 CSS 요청으로 인한 Render-blocking 제거를 위해 inlineStylesheets: 'always' 설정을 통한 CSS 인라인화 구현
TBT 최적화를 위해 GTM 및 분석 스크립트를 load/idle 시점이 아닌 사용자의 첫 상호작용(scroll, touch 등) 발생 시점에 로드하는 지연 실행 로직 적용
Layout Shift 방지를 위해 font-display: optional 설정 및 Above-the-fold 폰트의 Preload 처리를 통한 렌더링 안정성 확보
LCP 이미지의 중복 요청 방지를 위해 빌드 타임에 최적화된 URL을 생성하고 imagesrcset과 일치시킨 Preload 링크 배치
Cloudflare Pages의 Edge Caching을 활용하여 TTFB를 단축하고 불필요한 메인 스레드 부하를 주는 Bot Fight Mode 비활성화

실천 포인트

- Hydration이 필요한 컴포넌트가 실제 있는지 검토하고 Static HTML 비중 극대화 - 서드파티 마케팅 픽셀의 로드 시점을 '첫 사용자 인터랙션' 이후로 변경 - Critical CSS의 인라인화 및 LCP 이미지의 정확한 Preload 설정 확인 - font-display: optional 설정을 통한 폰트 교체 시점의 Layout Shift 제거

태그

#Lighthouse #TBT #Astro #LCP #Edge Caching

원문 읽기