프론트엔드 성능 최적화 – Lighthouse로 분석하기

byCode Keeper •

프론트엔드 성능 최적화 – Lighthouse로 분석하기


웹 애플리케이션의 성능은 사용자 경험과 직접적으로 연결됩니다. 빠른 로딩 시간과 원활한 사용자 인터페이스는 사용자 만족도를 높이고, SEO 성능을 향상시키는 중요한 요소입니다. 이번 포스팅에서는 "프론트엔드 성능", "Lighthouse 분석", "웹 성능 최적화"를 중심으로, Google Lighthouse를 사용하여 웹 애플리케이션의 성능을 분석하고 최적화하는 방법을 상세히 설명하겠습니다. 고급 개발자를 대상으로 하며, 예제를 통해 실습해 보겠습니다.


Lighthouse란?


Lighthouse는 Google에서 제공하는 오픈 소스 도구로, 웹 페이지의 성능, 접근성, 최적화, SEO 등을 자동으로 분석하고 보고서를 생성합니다. Lighthouse는 Chrome 개발자 도구에 통합되어 있으며, 커맨드 라인 인터페이스(CLI)와 Node 모듈로도 사용할 수 있습니다.


Lighthouse의 주요 분석 항목


  1. 성능(Performance): 페이지 로딩 속도와 관련된 다양한 지표를 분석합니다.
  2. 접근성(Accessibility): 페이지가 접근성 표준을 준수하는지 확인합니다.
  3. 베스트 프랙티스(Best Practices): 웹 개발의 모범 사례를 따르는지 검토합니다.
  4. SEO: 검색 엔진 최적화 관련 요소를 분석합니다.
  5. 진보된 웹 애플리케이션(Progressive Web App, PWA): PWA의 구현 상태를 평가합니다.

Lighthouse 설치 및 설정


Lighthouse는 Chrome 브라우저의 개발자 도구에서 바로 실행할 수 있으며, 커맨드 라인 인터페이스(CLI)와 Node 모듈로도 사용할 수 있습니다. 여기서는 CLI와 Node 모듈을 사용한 방법을 설명합니다.


Chrome 개발자 도구에서 실행


  1. Chrome 브라우저를 열고, 분석할 웹 페이지로 이동합니다.
  2. 개발자 도구를 열고(F12 또는 Ctrl+Shift+I), "Lighthouse" 탭으로 이동합니다.
  3. 분석할 항목을 선택하고, "Generate report" 버튼을 클릭합니다.

CLI 설치 및 실행


Lighthouse CLI를 사용하면 터미널에서 직접 웹 페이지를 분석할 수 있습니다.


npm install -g lighthouse
lighthouse https://example.com --output html --output-path ./report.html

Node 모듈 설치 및 실행


Lighthouse를 Node.js 환경에서 사용할 수 있습니다. 프로젝트 디렉토리에서 Lighthouse를 설치합니다.


npm install --save-dev lighthouse

다음은 Node.js 스크립트를 사용하여 Lighthouse 분석을 실행하는 예제입니다.


const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

(async () => {
  const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
  const options = { logLevel: 'info', output: 'html', onlyCategories: ['performance'], port: chrome.port };
  const runnerResult = await lighthouse('https://example.com', options);

  // Report is in runnerResult.lhr (Lighthouse Result object)
  console.log('Report is done for', runnerResult.lhr.finalUrl);
  console.log('Performance score was', runnerResult.lhr.categories.performance.score * 100);

  await chrome.kill();
})();

Lighthouse 분석 지표 이해하기


Lighthouse는 다양한 성능 지표를 제공하며, 각 지표는 웹 페이지의 성능을 평가하는 데 중요한 역할을 합니다. 주요 성능 지표는 다음과 같습니다.


성능 지표


  1. First Contentful Paint (FCP): 처음으로 콘텐츠가 화면에 표시되는 시간입니다.
  2. Largest Contentful Paint (LCP): 페이지에서 가장 큰 콘텐츠가 화면에 표시되는 시간입니다.
  3. Total Blocking Time (TBT): FCP 이후 사용자가 상호작용할 수 있는 시점까지의 블로킹 시간입니다.
  4. Time to Interactive (TTI): 페이지가 완전히 상호작용 가능한 상태가 되는 시간입니다.
  5. Cumulative Layout Shift (CLS): 페이지 로딩 중에 발생하는 예상치 못한 레이아웃 변경의 합입니다.

접근성 지표


  1. 적절한 대체 텍스트: 이미지에 적절한 대체 텍스트가 있는지 확인합니다.
  2. 명확한 버튼 이름: 버튼과 링크에 명확한 텍스트가 있는지 확인합니다.
  3. 적절한 색 대비: 텍스트와 배경의 색 대비가 적절한지 확인합니다.

SEO 지표


  1. 메타 태그: 페이지에 적절한 메타 태그가 있는지 확인합니다.
  2. 링크 속성: 링크에 rel="noopener" 또는 rel="noreferrer" 속성이 있는지 확인합니다.
  3. 페이지 제목과 설명: 페이지 제목과 메타 설명이 적절한지 확인합니다.

Lighthouse로 성능 최적화하기


Lighthouse 보고서를 통해 식별된 문제를 해결하고, 웹 페이지의 성능을 최적화하는 방법을 살펴보겠습니다.


이미지 최적화


이미지는 웹 페이지의 로딩 속도에 큰 영향을 미칩니다. 이미지를 최적화하여 성능을 향상시킬 수 있습니다.


  1. 이미지 압축: 이미지 파일 크기를 줄여 로딩 시간을 단축합니다. ImageOptim과 같은 도구를 사용할 수 있습니다.
  2. 적절한 형식 사용: 웹페이지에 맞는 적절한 이미지 형식을 사용합니다. 예를 들어, 사진에는 JPEG, 그래픽에는 PNG, 최신 브라우저에서는 WebP를 사용할 수 있습니다.
  3. 반응형 이미지 사용: 다양한 화면 크기에 맞게 최적화된 이미지를 제공하여 로딩 시간을 단축합니다.

<!-- 반응형 이미지 예제 -->
<img srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 2000w" sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 1200px" src="image-large.jpg" alt="Example image">

코드 스플리팅


코드 스플리팅을 통해 초기 로딩 시간을 단축하고, 필요한 코드만 로드하여 성능을 최적화할 수 있습니다. Webpack과 같은 모듈 번들러를 사용하여 코드 스플리팅을 구현할 수 있습니다.


// Webpack 코드 스플리팅 예제
import(/* webpackChunkName: "lodash" */ 'lodash').then(({ default: _ }) => {
  const element = document.createElement('div');
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  document.body.appendChild(element);
});

캐싱


캐싱을 통해 웹 페이지의 리소스를 효율적으로 관리하고, 반복적인 네트워크 요청을 줄여 성능을 향상시킬 수 있습니다.


  1. 브라우저 캐싱: HTTP 헤더를 사용하여 브라우저가 리소스를 캐시하도록 설정합니다.

# .htaccess 파일 예제
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access 1 year"
  ExpiresByType image/jpeg "access 1 year"
  ExpiresByType image/png "access 1 year"
  ExpiresByType text/css "access 1 month"
  ExpiresByType application/javascript "access 1 month"
</IfModule>

  1. 서비스 워커: 서비스 워커를 사용하여 오프라인 캐싱과 네트워크 요청 관리를 구현합니다.

// 서비스 워커 등록 예제
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js').then(registration => {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, err => {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

비동기 로딩


JavaScript와 CSS 파일을 비동기로 로딩하여 초기 페이지 로딩 시간을 단축할 수 있습니다.


  1. JavaScript 비동기 로딩: async와 defer 속성을 사용하여 스크립트를 비동기로 로딩합니다.

<!-- async: 스크립트 다운로드와 실행을 비동기로 수행 -->
<script src="script.js" async></script>

<!-- defer: 스크립트 다운로드를 비동기로 수행하고, DOMContentLoaded 이벤트 후 실행 -->
<script src="script.js" defer></script>

  1. CSS 비동기 로딩: media 속성을 사용하여 특정 미디어 조건에서만 CSS를 로딩합니다.

<!-- 미디어 조건에 따라 CSS 로딩 -->
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="style.css"></noscript>

렌더링 차단 리소스 제거


렌더링을 차단하는 CSS와 JavaScript를 최소화하여 페이지 로딩 성능을 향상시킵니다. CSS는 critical CSS 기법을 사용하여 필요한 부분만 인라인 스타일로 포함하고, 나머지는 비동기로 로딩합니다.


<!-- Critical CSS 인라인 스타일 -->
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
  }
</style>
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="style.css"></noscript>

Lighthouse 보고서 해석 및 최적화 사례


Lighthouse 보고서를 통해 식별된 성능 문제를 해결하고, 최적화하는 방법을 사례별로 설명합니다.


사례 1: First Contentful Paint(FCP) 최적화


FCP 지표가 낮은 경우, 초기 콘텐츠가 표시되는 시간을 단축해야 합니다.


  1. 이미지 최적화: 이미지 크기와 형식을 최적화하여 로딩 시간을 단축합니다.
  2. CSS 최적화: Critical CSS를 사용하여 초기 스타일을 빠르게 적용합니다.
  3. 비동기 스크립트 로딩: async와 defer 속성을 사용하여 스크립트를 비동기로 로딩합니다.

사례 2: Total Blocking Time(TBT) 최적화


TBT 지표가 낮은 경우, 자바스크립트 실행 시간을 단축해야 합니다.


  1. 코드 스플리팅: Webpack과 같은 도구를 사용하여 코드 스플리팅을 구현합니다.
  2. 웹 워커 사용: 무거운 작업을 웹 워커로 오프로드하여 메인 스레드의 부담을 줄입니다.

// 웹 워커 예제
const worker = new Worker('worker.js');
worker.postMessage('Hello, worker!');
worker.onmessage = (event) => {
  console.log('Message from worker:', event.data);
};

사례 3: Cumulative Layout Shift(CLS) 최적화


CLS 지표가 낮은 경우, 레이아웃 변경을 최소화해야 합니다.


  1. 고정된 크기 지정: 이미지와 비디오 등의 요소에 고정된 크기를 지정하여 레이아웃 변경을 방지합니다.

img {
  width: 100%;
  height: auto;
}

  1. 애니메이션과 전환: 애니메이션과 전환을 사용하여 부드러운 레이아웃 변경을 구현합니다.

.transition {
  transition: all 0.3s ease-in-out;
}

결론


프론트엔드 성능 최적화는 사용자 경험과 SEO에 직접적인 영향을 미치는 중요한 요소입니다. Google Lighthouse는 웹 페이지의 성능을 분석하고 최적화할 수 있는 강력한 도구입니다. 이번 포스팅에서는 Lighthouse를 사용하여 웹 페이지의 성능을 분석하고 최적화하는 방법을 상세히 설명하였습니다. 이미지 최적화, 코드 스플리팅, 캐싱, 비동기 로딩, 렌더링 차단 리소스 제거 등의 기법을 통해 웹 페이지의 성능을 크게 향상시킬 수 있습니다.

이 포스팅이 프론트엔드 성능 최적화를 이해하고 구현하는 데 도움이 되길 바랍니다. 질문이나 추가 정보가 필요하시면 언제든지 댓글로 남겨주세요.

Tags:
다음 이전