choijming21 님의 블로그

랜딩 페이지의 Lighthouse Performance 점수를 17점에서 60점까지 올린 최적화 과정을 공유합니다. 주요 개선 사항은 Hero 배너 최적화, 섹션 지연 로딩 적용, 서드파티 스크립트 최적화, 그리고 CLS 개선입니다. 항목BeforeAfter개선도Lighthouse Performance(mobile)17점65점+43점사용하지 않는 JavaScript956KiB693KiB-263KiB이미지 크기 최적화미적용적용-50KiB 배경과 목표📊 문제 상황랜딩 페이지 첫 진입 시 대용량 영상과 이미지가 모두 로드되어 Lighthouse 측정이 불가할 정도로 랜더링 속도가 매우 느림LCP(최대 콘텐츠 표시 시간) 지연 및 CLS(누적 레이아웃 이동) 발생Lighthouse Performance ..

1.  문제 발생❓ params를 이용한 동적 렌더링 페이지 4개(DynamicPage 컴포넌트)를 구현했습니다. params의 pageId값을 받아 pageId값과 일치하는 데이터를 찾아 각각의 pageConfig 데이터를 초기에는 클라이언트 측에서 렌더링 하는 방식으로 구현했습니다. 하지만 전체 페이지가 클라이언트 컴포넌트로 설정되어 있어 이로 인해 초기 페이지 로딩 시 이미지 렌더링 속도가 현저히 느려지는 문제가 발생했습니다.  2.  원인 분석 🔎 Next.js에서 클라이언트 컴포넌트 "use client"로 설정된 컴포넌트는 서버에서 사전 렌더링 되지 않고 클라이언트 측에서 hydration이 완료된 후에만 완전히 렌더링됩니다. 전체 DynamicPage 컴포넌트가 클라이언트 컴포넌트였기 때문..