프론트엔드 Lighthouse CI: 웹 애플리케이션을 위한 지속적인 성능 모니터링

오늘날 빠르게 변화하는 디지털 환경에서 웹사이트 성능은 가장 중요합니다. 로딩이 느리거나 최적화가 제대로 되지 않은 웹사이트는 사용자의 불만을 사고, 참여도를 감소시키며, 궁극적으로 비즈니스에 부정적인 영향을 미칠 수 있습니다. 바로 이 지점에서 Lighthouse CI가 필요합니다. 이 가이드는 지속적인 성능 모니터링을 위해 Lighthouse CI를 구현하는 과정을 안내하여, 성능 병목 현상이 사용자에게 영향을 미치기 전에 선제적으로 식별하고 해결할 수 있도록 도와줍니다.

Lighthouse CI란 무엇인가?

Lighthouse CI는 지속적 통합 및 지속적 제공(CI/CD) 파이프라인에 원활하게 통합되는 오픈소스 자동 성능 테스트 도구입니다. Google의 Lighthouse 감사 도구를 활용하여 웹사이트의 성능, 접근성, SEO 및 모범 사례에 대한 실행 가능한 통찰력을 제공합니다. Lighthouse CI를 워크플로우에 통합함으로써 웹사이트의 성능을 지속적으로 모니터링하고, 성능 저하를 추적하며, 모든 코드 변경이 더 나은 사용자 경험에 기여하도록 보장할 수 있습니다. Lighthouse CI는 특정 클라우드 제공업체에 종속되지 않으며 다양한 설정과 함께 사용할 수 있습니다. 예를 들어, Github Actions, Jenkins, CircleCI 등과 같은 서비스의 Docker 컨테이너 내에서 실행할 수 있습니다.

Lighthouse CI를 사용하는 이유

Lighthouse CI를 구현하면 다음과 같은 다양한 이점을 얻을 수 있습니다:

• 성능 저하의 조기 발견: 새로운 코드 변경으로 인해 발생하는 성능 문제를 프로덕션에 도달하기 전에 식별합니다.
• 웹사이트 성능 향상: 속도, 접근성, SEO를 위해 웹사이트를 최적화하는 방법에 대한 실행 가능한 통찰력을 얻습니다.
• 사용자 경험 개선: 방문자의 참여를 유지하는 더 빠르고 사용자 친화적인 웹사이트를 제공합니다.
• 이탈률 감소: 로딩 시간을 최적화하여 사용자 불만을 줄이고 사이트를 떠나는 것을 방지합니다.
• 전환율 증가: 더 빠른 웹사이트는 일반적으로 더 높은 전환율과 개선된 비즈니스 성과로 이어집니다.
• 자동화된 성능 테스트: 지속적인 모니터링을 위해 성능 테스트를 CI/CD 파이프라인에 통합합니다.
• 데이터 기반 의사 결정: 구체적인 성능 지표와 통찰력을 바탕으로 최적화 노력을 기울입니다.
• 장기적인 성능 추적: 시간 경과에 따른 웹사이트 성능을 모니터링하여 추세를 파악하고 최적화의 영향을 측정합니다.

Lighthouse CI의 주요 기능

• 자동화된 감사: CI/CD 프로세스의 일부로 Lighthouse 감사를 자동으로 실행합니다.
• 성능 예산: 웹사이트가 허용 가능한 성능 임계값 내에 있도록 성능 예산을 설정합니다.
• 성능 저하 추적: 시간 경과에 따른 성능 저하를 추적하여 원인이 된 코드 변경 사항을 식별할 수 있습니다.
• 실행 가능한 통찰력: 웹사이트 성능 개선 방법에 대한 실행 가능한 권장 사항이 포함된 상세 보고서를 제공합니다.
• 사용자 정의 가능한 구성: 특정 요구 사항에 맞게 Lighthouse CI를 구성합니다.
• CI/CD 도구와의 통합: Jenkins, CircleCI, GitHub Actions, GitLab CI와 같은 인기 있는 CI/CD 도구와 원활하게 통합됩니다.
• 오픈 소스: Lighthouse CI는 오픈 소스 프로젝트이므로 무료로 사용하고 수정할 수 있습니다.

Lighthouse CI 설정하기: 단계별 가이드

다음은 프로젝트에 Lighthouse CI를 설정하기 위한 종합적인 가이드입니다:

1. Lighthouse CI CLI 설치

먼저, npm 또는 yarn을 사용하여 Lighthouse CI 명령줄 인터페이스(CLI)를 전역으로 설치해야 합니다:

            npm install -g @lhci/cli
yarn global add @lhci/cli
            

              
                Copy
              
            
          

2. Lighthouse CI 구성

프로젝트의 루트에 lighthouserc.js 파일을 생성하여 Lighthouse CI를 구성합니다. 이 파일은 감사할 URL, 어설션 규칙 및 기타 구성 옵션을 정의합니다.

다음은 lighthouserc.js 파일의 기본 예제입니다:

            module.exports = {
  ci:
   {
    collect: {
      url: ['http://localhost:3000', 'http://localhost:3000/about']
    },
    assert: {
      preset: 'lighthouse:recommended'
    },
    upload: {
      target: 'temporary-public-storage'
    },
  },
};

            

              
                Copy
              
            
          

설명:

• collect.url: Lighthouse가 감사할 URL을 지정합니다. 이 예에서는 localhost:3000에서 실행 중인 웹사이트의 홈페이지와 "about" 페이지를 감사합니다. 이 URL을 *자신의* 프로젝트와 관련된 URL(스테이징 환경 포함)로 교체하는 것을 잊지 마세요.
• assert.preset: Lighthouse의 권장 사항에 기반한 사전 정의된 어설션 세트를 적용하는 lighthouse:recommended 프리셋을 사용합니다. 이는 좋은 출발점이지만 필요에 따라 이러한 어설션을 사용자 정의할 수 있습니다.
• upload.target: Lighthouse CI 결과가 업로드될 위치를 구성합니다. temporary-public-storage는 테스트 및 개발에 유용하지만, 프로덕션 환경에서는 일반적으로 더 영구적인 스토리지 솔루션(나중에 설명)을 사용하게 됩니다.

3. Lighthouse CI를 CI/CD 파이프라인에 통합하기

다음 단계는 Lighthouse CI를 CI/CD 파이프라인에 통합하는 것입니다. 정확한 단계는 CI/CD 제공업체에 따라 다르지만, 일반적인 프로세스는 CI/CD 구성에 Lighthouse CI 명령을 실행하는 스크립트를 추가하는 것을 포함합니다.

GitHub Actions 사용 예제:

리포지토리에 .github/workflows/lighthouse-ci.yml라는 이름의 파일을 다음 내용으로 생성합니다:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16.x'
      - name: Install dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.11.x
          lhci autorun

            

              
                Copy
              
            
          

설명:

• on.push.branches: main 브랜치로 푸시될 때 워크플로우를 트리거합니다.
• on.pull_request: 풀 리퀘스트 시 워크플로우를 트리거합니다.
• jobs.lighthouse.runs-on: 잡에 사용할 운영 체제를 지정합니다 (이 경우 Ubuntu).
• steps: 잡에서 실행될 단계를 정의합니다:
• actions/checkout@v3: 리포지토리를 체크아웃합니다.
• actions/setup-node@v3: Node.js를 설정합니다.
• npm ci: 의존성을 설치합니다.
• Run Lighthouse CI: Lighthouse CI 명령을 실행합니다:
• npm install -g @lhci/cli@0.11.x: Lighthouse CI CLI를 전역으로 설치합니다. *중요*: 항상 특정 버전을 고정하는 것이 좋습니다.
• lhci autorun: Lighthouse CI를 "autorun" 모드로 실행하여 감사를 자동으로 수집하고 성능 예산을 확인하며 결과를 업로드합니다.

CI/CD 통합을 위한 중요 고려사항:

• 서버 시작: lhci autorun을 실행하기 전에 웹 서버가 실행 중인지 확인하세요 (예: npm start). CI/CD 구성에 서버를 백그라운드에서 시작하는 단계를 추가해야 할 수도 있습니다.
• 데이터베이스 마이그레이션: 애플리케이션이 데이터베이스에 의존하는 경우, Lighthouse CI를 실행하기 *전에* CI/CD 프로세스의 일부로 데이터베이스 마이그레이션이 실행되도록 하세요.
• 환경 변수: 애플리케이션에 환경 변수가 필요한 경우, CI/CD 환경에 이러한 변수가 올바르게 구성되었는지 확인하세요.

4. Lighthouse CI 실행

이제 main 브랜치에 변경 사항을 푸시하거나 풀 리퀘스트를 생성할 때마다 Lighthouse CI 워크플로우가 자동으로 실행됩니다. 결과는 GitHub Actions 인터페이스에서 확인할 수 있습니다.

5. Lighthouse CI 결과 보기

Lighthouse CI 결과는 lighthouserc.js 파일에 지정된 위치(예: temporary-public-storage)에 업로드됩니다. CI/CD 출력에 제공된 링크를 따라 이러한 결과에 액세스할 수 있습니다. 이 결과는 웹사이트의 성능, 접근성, SEO 및 모범 사례에 대한 상세 정보를 제공합니다.

어설션 및 성능 예산 구성

Lighthouse CI를 사용하면 웹사이트가 성능 목표를 충족하도록 어설션과 성능 예산을 구성할 수 있습니다. 어설션은 특정 성능 지표(예: 첫 번째 콘텐츠 페인트, 가장 큰 콘텐츠 페인트)를 사전 정의된 임계값과 비교하는 규칙입니다. 성능 예산은 다양한 성능 지표에 대한 허용 가능한 한도를 정의합니다.

다음은 lighthouserc.js 파일에서 어설션을 구성하는 예제입니다:

            module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000']
    },
    assert: {
      assertions: {
        'first-contentful-paint': ['warn', { maxNumericValue: 2000 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
        'total-blocking-time': ['warn', { maxNumericValue: 500 }],
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 0.8 }],
      }
    },
   upload: {
      target: 'temporary-public-storage'
    },
  }
};

            

              
                Copy
              
            
          

설명:

• first-contentful-paint: 첫 번째 콘텐츠 페인트(FCP)에 대한 경고 임계값을 2000ms로 설정합니다.
• largest-contentful-paint: 가장 큰 콘텐츠 페인트(LCP)에 대한 경고 임계값을 2500ms로 설정합니다.
• cumulative-layout-shift: 누적 레이아웃 이동(CLS)에 대한 경고 임계값을 0.1로 설정합니다.
• total-blocking-time: 총 차단 시간(TBT)에 대한 경고 임계값을 500ms로 설정합니다.
• categories:performance: 전체 성능 카테고리 점수에 대한 경고 임계값을 0.9로 설정합니다.
• categories:accessibility: 전체 접근성 카테고리 점수에 대한 오류 임계값을 0.8로 설정합니다.

어설션 레벨:

• off: 어설션을 비활성화합니다.
• warn: 어설션이 실패하면 경고를 표시합니다.
• error: 어설션이 실패하면 Lighthouse CI 실행을 실패 처리합니다.

어설션 사용자 정의:

특정 요구에 맞게 어설션을 사용자 정의할 수 있습니다. 예를 들어, 중요한 성능 지표에 대해 더 엄격한 임계값을 설정하거나 애플리케이션과 관련 없는 어설션을 비활성화할 수 있습니다.

Lighthouse CI 업로드 대상 선택

lighthouserc.js 파일의 upload.target 옵션은 Lighthouse CI 결과가 업로드될 위치를 지정합니다. temporary-public-storage 대상은 테스트 및 개발에는 편리하지만 데이터가 영구적이지 않기 때문에 프로덕션 환경에는 적합하지 않습니다.

다음은 몇 가지 대체 업로드 대상입니다:

• Lighthouse CI 서버: 프로덕션 환경에 권장되는 접근 방식은 Lighthouse CI 서버를 사용하는 것입니다. Lighthouse CI 서버는 Lighthouse CI 결과에 대한 영구적인 스토리지 솔루션과 데이터를 보고 분석하기 위한 사용자 인터페이스를 제공합니다. 다양한 클라우드 제공업체에 배포하거나 자체 인프라에서 호스팅할 수 있습니다.
• Google Cloud Storage: Lighthouse CI 결과를 Google Cloud Storage 버킷에 업로드할 수 있습니다. 이는 데이터를 저장하기 위한 비용 효율적이고 확장 가능한 솔루션입니다.
• Amazon S3: Google Cloud Storage와 유사하게, Lighthouse CI 결과를 Amazon S3 버킷에 업로드할 수 있습니다.

Lighthouse CI 서버 설정하기:

Lighthouse CI 서버를 설정하는 과정은 다음 단계를 포함합니다:

1. Lighthouse CI 서버 설치: npm 또는 yarn을 사용하여 Lighthouse CI 서버를 설치할 수 있습니다:

            npm install -g @lhci/server
yarn global add @lhci/server
            

              
                Copy
              
            
          

2. 데이터베이스 구성: Lighthouse CI 서버는 데이터를 저장하기 위해 데이터베이스가 필요합니다. PostgreSQL, MySQL, SQLite 등 다양한 데이터베이스를 사용할 수 있습니다. .env 파일에서 데이터베이스 연결 설정을 구성합니다.
3. Lighthouse CI 서버 시작: lhci server 명령을 사용하여 Lighthouse CI 서버를 시작합니다.
4. Lighthouse CI CLI가 서버를 사용하도록 구성: lighthouserc.js 파일을 업데이트하여 Lighthouse CI 서버를 업로드 대상으로 사용하도록 합니다:

            module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000']
    },
    assert: {
      preset: 'lighthouse:recommended'
    },
    upload: {
      target: 'lhci',
      serverBaseUrl: 'http://your-lhci-server.com',
      token: 'YOUR_LHCI_TOKEN'
    },
  }
};

            

              
                Copy
              
            
          

http://your-lhci-server.com을 Lighthouse CI 서버의 URL로, YOUR_LHCI_TOKEN을 프로젝트의 액세스 토큰으로 교체하세요.

Lighthouse CI 사용을 위한 모범 사례

Lighthouse CI를 최대한 활용하려면 다음 모범 사례를 따르세요:

• 모든 코드 변경 시 Lighthouse CI 실행: CI/CD 파이프라인에 Lighthouse CI를 통합하여 모든 코드 변경에 대해 감사를 실행합니다. 이를 통해 성능 저하를 조기에 발견할 수 있습니다.
• 성능 예산 설정: 웹사이트가 허용 가능한 성능 임계값 내에 있도록 성능 예산을 정의합니다.
• 성능 추세 모니터링: 시간 경과에 따른 웹사이트 성능을 추적하여 추세를 파악하고 최적화의 영향을 측정합니다.
• 최적화 노력의 우선순위 지정: 가장 중요한 성능 지표를 먼저 최적화하는 데 집중합니다.
• 실제 데이터 사용: 실제 데이터를 사용하여 최적화 노력을 구체화합니다. 예를 들어, Google Analytics를 사용하여 사용자가 가장 자주 방문하는 페이지를 식별할 수 있습니다.
• 실제 기기에서 테스트: 실제 기기에서 웹사이트를 테스트하여 실제 환경에서 잘 작동하는지 확인합니다.
• 정기적으로 Lighthouse CI 결과 검토: 정기적으로 Lighthouse CI 결과를 검토하고 식별된 성능 문제를 해결하기 위한 조치를 취해야 합니다.
• 이미지 최적화: 품질 저하 없이 파일 크기를 줄이기 위해 이미지를 최적화합니다. ImageOptim(macOS), TinyPNG, ImageKit와 같은 도구가 유용합니다.
• CSS 및 JavaScript 축소: CSS 및 JavaScript 파일의 크기를 줄이기 위해 축소(minify)합니다. UglifyJS 및 CSSNano와 같은 도구가 도움이 될 수 있습니다.
• 브라우저 캐싱 활용: 브라우저 캐싱을 활용하여 웹사이트가 서버에 보내는 요청 수를 줄입니다.
• 콘텐츠 전송 네트워크(CDN) 사용: CDN을 사용하여 웹사이트의 콘텐츠를 전 세계 서버에 배포합니다. 이는 다른 지리적 위치의 사용자들에게 로딩 시간을 개선할 수 있습니다. Cloudflare 및 Amazon CloudFront와 같은 서비스가 인기 있는 CDN입니다.
• 화면 밖 이미지 지연 로딩: 화면에 즉시 보이지 않는 이미지에 대해 지연 로딩(lazy loading)을 구현합니다. 이는 초기 페이지 로드 시간을 크게 향상시킬 수 있습니다. 간단한 지연 로딩에는 loading="lazy" 속성을 사용할 수 있습니다.
• 렌더링 차단 리소스 제거: 페이지 렌더링을 차단하는 리소스를 식별하고 제거합니다. 이는 종종 중요한 CSS를 인라인으로 처리하고 중요하지 않은 CSS 및 JavaScript를 지연시키는 것을 포함합니다.
• JavaScript 실행 시간 단축: JavaScript 코드를 프로파일링하여 느리게 실행되는 함수를 식별하고 최적화합니다. 코드 분할(code splitting) 및 트리 셰이킹(tree shaking)과 같은 기술은 다운로드 및 실행해야 하는 JavaScript의 양을 줄이는 데 도움이 될 수 있습니다.

고급 Lighthouse CI 기술

Lighthouse CI의 기본 사항에 익숙해지면 성능 모니터링을 더욱 향상시키기 위해 몇 가지 고급 기술을 탐색할 수 있습니다:

• 사용자 정의 Lighthouse 감사: 애플리케이션과 관련된 특정 성능 문제를 테스트하기 위해 사용자 정의 Lighthouse 감사를 생성할 수 있습니다.
• 헤드리스 크롬 구성: 특정 장치 에뮬레이션이나 네트워크 스로틀링 설정을 사용하도록 헤드리스 크롬을 구성합니다.
• 모니터링 도구와의 통합: 웹사이트 성능에 대한 보다 포괄적인 시각을 얻기 위해 기존 모니터링 도구(예: New Relic, Datadog)와 Lighthouse CI를 통합합니다.
• 시각적 회귀 테스트: Lighthouse CI를 시각적 회귀 테스트 도구와 결합하여 성능에 영향을 미칠 수 있는 시각적 변화를 감지합니다.

글로벌 사용자를 위한 Lighthouse CI: 국제 웹사이트 고려사항

글로벌 사용자를 대상으로 하는 웹사이트에 Lighthouse CI를 사용할 때는 다음 사항을 고려하세요:

• 여러 위치에서 테스트: 서버 응답 시간은 사용자 위치에 따라 크게 달라질 수 있습니다. CDN(콘텐츠 전송 네트워크)을 사용하고, 국제 사용자의 성능을 더 정확하게 파악하기 위해 다른 지리적 지역에서 Lighthouse CI 감사를 실행하는 것을 고려하세요. 일부 CI/CD 제공업체는 실행기(runner)의 지리적 위치를 지정하는 옵션을 제공합니다.
• 네트워크 조건 고려: 네트워크 속도와 지연 시간은 전 세계적으로 매우 다양합니다. Lighthouse CI 감사 중에 다양한 네트워크 조건을 시뮬레이션하여 다양한 제약 조건 하에서 웹사이트가 어떻게 작동하는지 이해하세요. Lighthouse는 3G와 같은 느린 연결을 시뮬레이션하는 네트워크 스로틀링 기능을 제공합니다.
• 콘텐츠 현지화: 현지화된 콘텐츠가 제대로 최적화되었는지 확인하세요. 여기에는 다른 언어 및 문자 세트에 대한 이미지 최적화와 표시 문제를 피하기 위한 적절한 인코딩이 포함됩니다.
• 글꼴 로딩: 다른 언어에 대한 글꼴 로딩을 최적화하세요. 글꼴 로딩 중에 텍스트가 보이지 않는 것을 방지하기 위해 font-display: swap 사용을 고려하세요.
• 타사 스크립트: 타사 스크립트는 특히 네트워크 연결이 느린 지역의 사용자에게 성능에 큰 영향을 미칠 수 있으므로 유의하세요. 타사 스크립트 성능을 정기적으로 감사하고 비동기 로딩이나 중요한 스크립트의 자체 호스팅을 고려하세요.
• 모바일 최적화: 세계 여러 지역에서 모바일 사용이 보편적입니다. 웹사이트가 모바일 장치에 최적화되었는지 확인하고 Lighthouse CI 감사에 모바일 관련 테스트를 포함하세요.

일반적인 Lighthouse CI 문제 해결

Lighthouse CI를 사용할 때 발생할 수 있는 몇 가지 일반적인 문제와 해결 방법은 다음과 같습니다:

• Lighthouse CI가 "Timeout" 오류로 실패: 웹사이트 로딩 시간이 너무 길거나 Lighthouse CI가 웹사이트에 연결할 수 없는 경우 발생할 수 있습니다. lighthouserc.js 파일의 타임아웃 값을 늘리거나 웹사이트 서버 로그에서 오류를 확인해 보세요.
• Lighthouse CI가 일관되지 않은 결과를 보고: Lighthouse 결과는 네트워크 조건이나 기타 요인으로 인해 실행 간에 약간씩 다를 수 있습니다. 더 안정적인 평균을 얻기 위해 여러 번 감사를 실행하세요.
• Lighthouse CI가 결과 업로드에 실패: upload.target 구성을 확인하고 Lighthouse CI 서버가 실행 중이고 접근 가능한지 확인하세요. 또한 올바른 액세스 토큰이 구성되었는지 확인하세요.
• Lighthouse CI가 예상치 못한 성능 저하를 보고: 저하가 감지되기 전에 이루어진 코드 변경 사항을 조사하세요. Lighthouse CI 보고서를 사용하여 저하된 특정 성능 지표를 식별하고 해당 영역에 최적화 노력을 집중하세요.

결론

프론트엔드 Lighthouse CI는 웹 애플리케이션의 지속적인 성능 모니터링을 위한 강력한 도구입니다. CI/CD 파이프라인에 Lighthouse CI를 통합함으로써 성능 문제를 선제적으로 식별하고 해결하여 웹사이트가 최적의 사용자 경험을 제공하도록 보장할 수 있습니다. 전 세계 사용자를 위한 최상의 경험을 만들기 위해 설정, 어설션 규칙 및 테스트 위치를 글로벌 대상에 맞게 조정하는 것을 잊지 마세요.

이 가이드에 설명된 단계와 모범 사례를 따르면 웹사이트의 성능을 크게 향상시키고, 이탈률을 줄이며, 전환율을 높이고, 궁극적으로 비즈니스 목표를 달성할 수 있습니다. 오늘 바로 Lighthouse CI를 구현하여 웹 애플리케이션의 잠재력을 최대한 발휘하세요.