WebGL 3D 랜딩 페이지에서 5개의 치명적인 Lighthouse 문제를 찾아 해결한 방법 (Python CLI 사용)
Source: Dev.to
몇 달 전, 3D 산업 모델을 임베드한 B2B 랜딩 페이지를 만들고 있었습니다. 시각적으로는 훌륭했지만 Lighthouse 점수는 42 / 100에 불과했습니다. 아래는 제가 발견한 다섯 가지 치명적인 문제와 각각을 해결한 방법입니다.
1. 너무 많은 폰트 굵기 (요청 8개 → 3개)
Google Fonts가 Inter에 wght@300;400;500;600;700;800와 JetBrains Mono에 두 개의 굵기를 로드하고 있었습니다 – 폰트만으로도 8개의 별도 HTTP 요청이 발생하고, 모두 렌더링을 차단했습니다.
해결: 필요한 굵기만 요청하도록 줄입니다. 예: wght@400;600;700. 이렇게 하면 약 400 ms가 절감됩니다.
2. <head>에 있는 스크립트 (렌더링 차단)
WebGL 스크립트(model‑viewer.min.js, ~300 KB)가 <head>에 배치돼 모든 로드를 차단하고 있었습니다.
해결: <body> 끝으로 옮기고 type="module"을 사용해 자동으로 지연 로드되게 합니다.
) -->
) -->3. preconnect와 dns-prefetch 누락
페이지가 외부 리소스(Google Fonts, QR‑code API, model‑viewer CDN)에 의존했지만 <link rel="preconnect"> 태그가 없었습니다. 각 도메인마다 전체 DNS 조회와 TLS 핸드셰이크가 필요했기 때문에 리소스 로드가 지연되었습니다.
해결: 모든 외부 도메인에 대해 <head>에 preconnect(필요 시 dns-prefetch)를 추가합니다.
4. 히어로 이미지에 loading="lazy" 적용
페이지 상단의 히어로 이미지를 포함해 모든 이미지에 loading="lazy"를 적용했습니다. 가장 중요한 시각 요소의 로드가 지연돼 Largest Contentful Paint (LCP)에 악영향을 미쳤습니다.
해결: 히어로 이미지를 loading="eager"로 설정하고 fetchpriority="high"를 추가합니다. 아래‑폴드 이미지에는 계속해서 lazy loading을 사용합니다.
[Image: Hero]5. 조용한 SEO 킬러: JSON‑LD에 삽입된 JavaScript
Particle.js 애니메이션이 콜백 코드를 <script type="application/ld+json"> 블록 안에 삽입했습니다. 페이지는 정상적으로 렌더링되었지만 JSON‑LD가 무효화돼 Google Search Console이 Product rich snippet 인덱싱을 중단했습니다. 이 문제는 구조화 데이터 감사를 진행하면서 3개월 뒤에야 발견했습니다.
해결: 런타임 JavaScript가 JSON‑LD 블록을 조작하지 않도록 합니다. 서버‑사이드에서 전용 스크립트로 JSON‑LD를 생성하거나 정적으로 유지합니다.
해결책: web-performance-surgeon
위 문제들을 자동으로 탐지하고 수정하기 위해 Python CLI를 만들었습니다.
# 감사만 수행 – 모든 문제 표시
python web_performance_surgeon.py index.html
# 감사 + 자동 수정 모두 수행
python web_performance_surgeon.py index.html --fix수정 적용 후 최종 Lighthouse 점수: 98 / 100.
부가 도구
json-ld-schema-guardian– JSON‑LD 블록에 대한 JavaScript 삽입을 스캔합니다.static-dom-surgeon– HTML 요소를 대규모로 정밀하게 패치합니다(예: BeautifulSoup으로 21개의 제품 카드 업데이트).b2b-landing-page-checklist– 이 프로젝트에서 추출한 50가지 사전 출시 체크리스트.
모든 도구는 무료이며 오픈 소스입니다.
JSON‑LD 삽입 버그를 이전에 겪어보신 적 있나요? 이 문제가 생각보다 흔한지 궁금합니다.