프론트엔드 성능 최적화: Lighthouse 점수 90점 이상 달성한 실전 노하우 8가지
프론트엔드 개발자에게 Lighthouse(라이트하우스) 점수 90점 이상은 단순한 수치를 넘어, 쾌적한 사용자 경험과 높은 검색 엔진 최적화(SEO)를 보장하는 중요한 척도입니다. 저는 수많은 프로젝트를 진행하며 이 90점대 점수를 일관되게 유지하는 실전 노하우를 정립했습니다. 특히 Google의 Core Web Vitals 지표를 만족시키기 위한 과정은 쉽지 않았지만, 몇 가지 핵심 원칙을 지킨 덕분에 성공할 수 있었습니다. 오늘은 그 누구도 알려주지 않았던, 실제로 제가 사용해서 높은 점수를 달성한 프론트엔드 성능 최적화 실전 노하우 8가지를 공개합니다.
💡 Lighthouse 90점 이상을 위한 8가지 핵심 전략
Lighthouse 점수는 크게 성능(Performance), 접근성(Accessibility), 모범 사례(Best Practices), SEO의 네 가지 영역으로 나뉩니다. 이 중에서도 성능 점수를 올리는 것이 가장 까다롭고 중요합니다. 다음은 제가 집중적으로 개선하여 성과를 본 8가지 노하우입니다.
1. 이미지 최적화의 '3대 원칙' 준수
가장 흔한 성능 저하 요인은 최적화되지 않은 이미지입니다. 저는 다음 3대 원칙을 철저히 준수했습니다.
WebP 포맷 사용: JPEG 대비 용량을 25~35% 절감하는 WebP를 기본 이미지 포맷으로 사용합니다.
반응형 이미지 적용:
<picture>태그나srcset속성을 활용하여 사용자 디바이스 크기에 맞는 이미지만 로드합니다.지연 로딩(Lazy Loading):
loading="lazy"속성을 사용하거나 Intersection Observer API를 이용하여 뷰포트에 들어올 때만 이미지를 로드합니다.
2. 핵심 CSS와 비핵심 CSS 분리 (Critical CSS)
페이지 로드 시 사용자에게 즉시 보여지는 부분(Above the Fold)에 필요한 Critical CSS만 인라인(Inline)으로 HTML <head> 태그 내에 삽입하고, 나머지 CSS는 비동기적으로 로드합니다. 이를 통해 FCP(First Contentful Paint) 시간을 획기적으로 단축할 수 있습니다. Webpack의 'mini-css-extract-plugin'이나 관련 도구를 활용했습니다.
3. JavaScript 번들 최소화 및 코드 분할(Code Splitting)
무거운 JavaScript 파일은 TBT(Total Blocking Time)를 증가시켜 성능을 저해합니다.
불필요한 라이브러리 제거: 사용하지 않는 코드는 과감하게 삭제합니다.
트리 쉐이킹(Tree Shaking): Webpack/Rollup 설정을 통해 실제로 사용되는 코드만 최종 번들에 포함시킵니다.
동적 임포트(Dynamic Imports): 필요할 때만 모듈을 로드하도록
import()구문을 사용하여 코드 분할을 적용합니다. 이는 SPA(Single Page Application)에서 필수적입니다.
4. 폰트 로딩 최적화: font-display: swap 활용
웹 폰트가 로딩될 때까지 텍스트가 보이지 않는 FOIT(Flash of Invisible Text) 현상은 LCP에 악영향을 줍니다. CSS @font-face 규칙에 **font-display: swap**을 추가하여 폰트가 로드되기 전까지 시스템 기본 폰트를 먼저 보여주도록 설정했습니다. 이 작은 설정 변경만으로도 LCP 점수가 크게 개선되었습니다.
5. 서버 응답 시간(TTFB) 개선
프론트엔드 최적화 외에도, 서버 응답 시간을 의미하는 **TTFB(Time To First Byte)**가 빠를수록 전체 성능 점수가 높아집니다.
CDN(Content Delivery Network) 사용: 정적 파일을 사용자에게 가장 가까운 서버에서 제공하여 지연 시간을 줄입니다.
효율적인 캐싱 전략: HTTP 캐시 헤더(Cache-Control)를 설정하여 브라우저가 정적 리소스를 재사용하도록 합니다.
6. 불필요한 리렌더링 최소화 (React/Vue)
React나 Vue 같은 라이브러리 사용 시, 불필요한 컴포넌트 리렌더링은 메인 스레드 작업을 증가시켜 TBT를 악화시킵니다. React에서는 React.memo(), useCallback(), useMemo() 훅을 사용하여 props가 변경되지 않으면 리렌더링을 건너뛰도록 최적화했습니다.
7. 제3자 스크립트(Third-party Scripts) 지연 로드
Google Analytics, 광고 스크립트, 소셜 위젯 등 제3자 스크립트는 종종 메인 스레드를 차단합니다. 이들을 defer 또는 async 속성을 사용하여 비동기적으로 로드하거나, Intersection Observer를 사용하여 스크롤 시에만 로드되도록 설정합니다.
8. Service Worker를 활용한 오프라인/캐싱 전략
PWA(Progressive Web App) 기술의 핵심인 Service Worker를 도입하여 주요 정적 파일을 캐시하고, 오프라인 접속 환경에서도 일부 페이지를 제공할 수 있도록 했습니다. 이는 재접속 시 로딩 속도를 극적으로 단축시키며, Lighthouse의 모범 사례 점수도 높여줍니다.
✨ 결론 및 다음 단계
Lighthouse 90점 이상은 단순히 코드를 줄이는 것을 넘어, 로딩 순서와 리소스 활용에 대한 깊은 이해를 요구합니다. 이미지, CSS, JavaScript의 로드 순서를 최적화하고, 불필요한 작업을 최소화하는 이 8가지 실전 노하우를 적용한다면, 여러분도 사용자 경험과 SEO 모두를 만족시키는 고성능 웹사이트를 구축할 수 있습니다. 성능 최적화는 단발성 작업이 아니라 지속적인 모니터링이 필요하다는 점을 명심하고, 지금 바로 Lighthouse Audit을 실행하여 개선 작업을 시작해 보세요!
0 댓글