렌더링 경로 최적화로 PSI 74에서 91 및 LCP 2.04초 단축

Core Web Vitals from 74 to 91: A Real Tax Practitioner Site Rebuild

Joseph Anady2026년 5월 24일3분intermediate

AI 요약

Context

GSAP 애니메이션과 외부 CDN 의존성으로 인한 Render-path 병목 현상 발생. 특히 LCP 대상 요소의 초기 불투명도 설정과 Web Font Swap으로 인한 Layout Shift가 사용자 경험을 저해하는 구조임.

LCP 지연 방지를 위해 GSAP entrance animation의 opacity: 0 설정을 제거하고 transform-only 방식으로 변경하여 첫 프레임부터 렌더링 유도
DNS Resolution 및 TLS Handshake 오버헤드 제거를 위해 외부 CDN 스크립트를 로컬 /assets/js/vendor/ 경로로 이관
사용되지 않는 anime.js 라이브러리를 제거하여 불필요한 네트워크 페이로드 및 실행 리소스 최적화
Web Font swap 시 발생하는 reflow 억제를 위해 size-adjust 패턴을 도입하여 폰트 교체 시 레이아웃 변동 최소화
H1 요소에 사용되는 미등록 폰트에 대해 힌트를 추가하여 CSS 파싱 후 대기 시간을 제거하고 렌더링 속도 개선

실천 포인트

1. LCP 대상 요소에 opacity: 0 애니메이션을 적용 중인지 확인하고 transform 기반으로 전환

2. 제3자 CDN 의존성을 줄이고 정적 자산의 로컬 호스팅 검토

3. Web Font 도입 시 size-adjust 패턴과 font-display: swap의 조화 확인

4. Hero Section에 사용되는 모든 폰트 자산에 preload 설정 적용

태그