프론트엔드 성능 테스트: 지속적인 개선을 위한 Lighthouse CI 통합

오늘날의 디지털 환경에서 웹사이트 성능은 매우 중요합니다. 느린 로딩 시간, 접근성 문제, 저조한 SEO는 사용자 경험과, 결과적으로, 비즈니스 결과에 큰 영향을 미칠 수 있습니다. 프론트엔드 성능 테스트는 현대 소프트웨어 개발 라이프사이클의 필수적인 부분이 되었으며, 웹사이트와 웹 애플리케이션이 전 세계 사용자에게 빠르고, 안정적이며, 사용자 친화적이도록 보장합니다. 이 글에서는 강력한 오픈소스 도구인 Lighthouse CI를 지속적 통합(CI) 파이프라인에 통합하여 프론트엔드 성능 테스트를 자동화하고 지속적인 개선을 이끌어내는 방법을 자세히 살펴봅니다.

프론트엔드 성능 테스트가 중요한 이유는 무엇일까요?

Lighthouse CI에 대해 알아보기 전에 프론트엔드 성능 테스트가 왜 중요한지 이해해 보겠습니다:

• 사용자 경험: 빠르고 반응이 좋은 웹사이트는 더 나은 사용자 경험을 제공하여 참여도를 높이고 이탈률을 줄입니다. 일본 도쿄의 잠재 고객이 느리게 로딩되는 전자 상거래 사이트에서 제품을 구매하려고 한다고 상상해 보세요. 그들은 사이트를 포기하고 대안을 찾을 가능성이 높습니다.
• SEO 순위: 구글과 같은 검색 엔진은 웹사이트 속도와 성능을 순위 결정 요소로 고려합니다. 빠른 웹사이트는 검색 결과에서 더 높은 순위를 차지하는 경향이 있으며, 이는 더 많은 유기적 트래픽을 유도합니다. 구글의 코어 웹 바이탈(Core Web Vitals) 이니셔티브는 SEO를 위해 최대 콘텐츠풀 페인트(LCP), 최초 입력 지연(FID), 누적 레이아웃 이동(CLS)과 같은 요소의 중요성을 강조합니다.
• 접근성: 성능 개선은 종종 장애가 있는 사용자의 접근성 향상으로 이어집니다. 최적화된 코드와 이미지는 스크린 리더에 의존하거나 대역폭이 제한된 사용자의 경험을 개선할 수 있습니다.
• 전환율: 빠른 웹사이트는 전환율에 직접적인 영향을 미칠 수 있습니다. 연구에 따르면 페이지 로드 시간이 단 1초만 지연되어도 전환율이 크게 감소할 수 있습니다. 인도 뭄바이의 사용자가 항공편을 예약하려고 한다고 생각해 보세요. 느린 예약 과정은 그들이 구매를 포기하고 경쟁사를 선택하게 만들 수 있습니다.
• 리소스 최적화: 성능 테스트는 리소스를 최적화할 수 있는 영역을 식별하는 데 도움을 주어 서버 인프라 및 대역폭 사용 측면에서 비용을 절감할 수 있습니다.

Lighthouse CI 소개

Lighthouse CI는 CI/CD 파이프라인과 원활하게 통합되도록 설계된 오픈소스 자동화 도구입니다. 구글이 개발한 인기 있는 감사 도구인 Lighthouse를 실행하고 웹사이트의 성능, 접근성, SEO, 모범 사례 및 프로그레시브 웹 앱(PWA) 준수 여부에 대한 통찰력을 제공합니다. Lighthouse CI는 다음과 같은 도움을 줍니다:

• 성능 감사 자동화: 모든 커밋 또는 풀 리퀘스트에 대해 자동으로 Lighthouse 감사를 실행합니다.
• 시간에 따른 성능 추적: 시간 경과에 따른 성능 지표를 모니터링하고 성능 저하를 조기에 식별합니다.
• 성능 예산 설정: 성능 예산을 정의하고 이를 초과하면 빌드를 실패시킵니다.
• CI/CD 시스템과 통합: GitHub Actions, GitLab CI, CircleCI, Jenkins와 같은 인기 있는 CI/CD 시스템과 통합합니다.
• 성능 문제에 대한 협업: Lighthouse 보고서를 공유하고 팀과 협력하여 성능 문제를 해결합니다.

Lighthouse CI 설정하기

프로젝트에 Lighthouse CI를 설정하는 단계별 가이드는 다음과 같습니다:

1. Lighthouse CI 설치하기

npm 또는 yarn을 사용하여 Lighthouse CI CLI를 전역으로 설치합니다:

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

              
                Copy
              
            
          

2. Lighthouse CI 구성하기

프로젝트의 루트 디렉터리에 lighthouserc.js 파일을 만들어 Lighthouse CI를 구성합니다. 다음은 구성 예시입니다:

            module.exports = {
  ci:
{
    collect:
{
      url: ['http://localhost:3000', 'http://localhost:3000/about'],
      startServerCommand: 'npm start',
      numberOfRuns: 3,
    },
    assert:
{
      assertions:
{
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 1 }],
        'categories:best-practices': ['warn', { minScore: 0.9 }],
        'categories:seo': ['warn', { minScore: 0.9 }],
        'categories:pwa': ['off'],
        'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 4000 }],
        'total-blocking-time': ['warn', { maxNumericValue: 200 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
      },
    },
    upload:
{
      target: 'temporary-redirect',
    },
  },
};

            

              
                Copy
              
            
          

이 구성을 자세히 살펴보겠습니다:

• collect.url: 감사할 URL의 배열입니다. 이 예시는 홈페이지와 'about' 페이지를 감사합니다. 다양한 사용 사례를 고려하여 웹사이트의 모든 중요한 페이지를 포함해야 합니다. 예를 들어, 전자 상거래 사이트에는 홈페이지, 제품 목록 페이지, 제품 상세 페이지 및 결제 프로세스가 포함될 수 있습니다.
• collect.startServerCommand: 개발 서버를 시작하는 명령어입니다. Lighthouse CI가 로컬 개발 환경에 대해 실행되어야 하는 경우 필요합니다.
• collect.numberOfRuns: 각 URL에 대해 Lighthouse 감사를 실행할 횟수입니다. 여러 번의 감사를 실행하면 네트워크 상태 및 기타 요인의 변동을 완화하는 데 도움이 됩니다.
• assert.assertions: Lighthouse 감사 결과를 검증하기 위한 어설션 집합입니다. 각 어설션은 메트릭 또는 카테고리와 임계값을 지정합니다. 임계값이 충족되지 않으면 빌드가 실패합니다. 이 예시에서는 성능, 접근성, 모범 사례 및 SEO 카테고리에 대한 임계값을 설정합니다. 또한 최초 콘텐츠풀 페인트(FCP), 최대 콘텐츠풀 페인트(LCP), 총 차단 시간(TBT), 누적 레이아웃 이동(CLS)과 같은 특정 메트릭에 대한 임계값도 설정합니다.
• upload.target: Lighthouse 보고서를 업로드할 위치를 지정합니다. temporary-redirect는 보고서를 임시 저장 위치에 업로드하고 액세스할 수 있는 URL을 제공합니다. 다른 옵션으로는 Lighthouse CI 서버 또는 Google Cloud Storage나 Amazon S3와 같은 클라우드 스토리지 솔루션을 사용하는 것이 있습니다.

3. CI/CD 시스템과 통합하기

다음 단계는 Lighthouse CI를 CI/CD 파이프라인에 통합하는 것입니다. GitHub Actions와 통합하는 방법의 예시는 다음과 같습니다:

리포지토리에 .github/workflows/lighthouse.yml 파일을 생성합니다:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install Dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |          npm run build
          lhci autorun

            

              
                Copy
              
            
          

이 워크플로우는 다음 단계를 수행합니다:

• 코드를 체크아웃합니다.
• Node.js를 설정합니다.
• 의존성을 설치합니다.
• Lighthouse CI를 실행합니다. 이 단계는 먼저 애플리케이션을 빌드한(npm run build) 다음, Lighthouse 감사를 실행하고 구성된 임계값에 대해 결과를 어설션하는 lhci autorun을 실행합니다.

이 워크플로우를 특정 CI/CD 시스템 및 프로젝트 요구 사항에 맞게 조정하세요. 예를 들어, GitLab CI를 사용하는 경우 유사한 단계로 .gitlab-ci.yml 파일을 구성할 것입니다.

4. Lighthouse CI 실행하기

변경 사항을 커밋하고 리포지토리로 푸시하세요. CI/CD 파이프라인이 자동으로 Lighthouse CI를 실행합니다. 어설션 중 하나라도 실패하면 빌드가 실패하여 개발자에게 귀중한 피드백을 제공합니다. Lighthouse CI 보고서는 CI/CD 시스템에서 제공하는 URL에서 확인할 수 있습니다.

고급 구성 및 사용자 정의

Lighthouse CI는 다양한 구성 옵션과 사용자 정의 가능성을 제공합니다. 다음은 몇 가지 고급 기능입니다:

1. Lighthouse CI 서버 사용하기

Lighthouse CI 서버는 시간 경과에 따른 성능 지표 추적, 프로젝트 관리, 성능 문제에 대한 협업을 위한 중앙 집중식 대시보드를 제공합니다. Lighthouse CI 서버를 사용하려면 인스턴스를 설정하고 보고서를 서버에 업로드하도록 lighthouserc.js 파일을 구성해야 합니다.

먼저 서버를 배포합니다. Docker, Heroku, AWS 및 Google Cloud와 같은 클라우드 제공업체를 포함한 다양한 배포 옵션을 사용할 수 있습니다. 서버 배포에 대한 자세한 지침은 Lighthouse CI 설명서를 참조하세요.

서버가 실행되면 서버를 가리키도록 lighthouserc.js 파일을 업데이트합니다:

            module.exports = {
  ci:
{
    collect: {
      url: ['http://localhost:3000'],
      startServerCommand: 'npm start',
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
      },
    },
    upload:
{
      target: 'lhci',
      serverBaseUrl: 'YOUR_LHCI_SERVER_URL',
      token: 'YOUR_LHCI_SERVER_TOKEN',
    },
  },
};

            

              
                Copy
              
            
          

YOUR_LHCI_SERVER_URL을 Lighthouse CI 서버의 URL로, YOUR_LHCI_SERVER_TOKEN을 서버에서 생성된 토큰으로 바꾸세요. 이 토큰은 CI 파이프라인을 서버로 인증합니다.

2. 성능 예산 설정하기

성능 예산은 특정 메트릭에 대해 허용 가능한 임계값을 정의합니다. Lighthouse CI를 사용하면 성능 예산을 설정하고 해당 예산을 초과하면 빌드를 실패시킬 수 있습니다. 이는 성능 저하를 방지하고 웹사이트가 허용 가능한 성능 한계 내에 있도록 보장하는 데 도움이 됩니다.

lighthouserc.js 파일의 assert.assertions 속성을 사용하여 성능 예산을 정의할 수 있습니다. 예를 들어, 최초 콘텐츠풀 페인트(FCP)에 대한 성능 예산을 설정하려면 다음 어설션을 추가할 수 있습니다:

            'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
            

              
                Copy
              
            
          

이 어설션은 FCP가 2500밀리초보다 크면 빌드를 실패시킵니다.

3. Lighthouse 구성 사용자 정의하기

Lighthouse CI를 사용하면 특정 요구에 맞게 Lighthouse 구성을 사용자 정의할 수 있습니다. 다음과 같은 다양한 Lighthouse 설정을 구성할 수 있습니다:

• onlyAudits: 실행할 감사 목록을 지정합니다.
• skipAudits: 건너뛸 감사 목록을 지정합니다.
• throttling: 다양한 네트워크 조건을 시뮬레이션하도록 네트워크 스로틀링 설정을 구성합니다.
• formFactor: 에뮬레이션할 폼 팩터(데스크톱 또는 모바일)를 지정합니다.
• screenEmulation: 화면 에뮬레이션 설정을 구성합니다.

Lighthouse 구성을 사용자 정의하려면 lhci autorun 명령어에 사용자 정의 Lighthouse 구성 파일을 가리키는 --config-path 플래그를 전달할 수 있습니다. 전체 구성 옵션 목록은 Lighthouse 설명서를 참조하세요.

4. 인증된 페이지 감사하기

인증된 페이지를 감사하려면 약간 다른 접근 방식이 필요합니다. 감사를 실행하기 전에 Lighthouse CI에 인증할 수 있는 방법을 제공해야 합니다. 이는 쿠키를 사용하거나 로그인 프로세스를 스크립팅하여 수행할 수 있습니다.

일반적인 접근 방식 중 하나는 --extra-headers 플래그를 사용하여 인증 쿠키를 Lighthouse CI에 전달하는 것입니다. 쿠키는 웹사이트에 로그인한 후 브라우저의 개발자 도구에서 얻을 수 있습니다.

또는 Puppeteer 스크립트를 사용하여 로그인 프로세스를 자동화한 다음 인증된 페이지에서 Lighthouse 감사를 실행할 수 있습니다. 이 접근 방식은 더 많은 유연성을 제공하며 복잡한 인증 시나리오를 처리할 수 있게 해줍니다.Lighthouse CI를 이용한 프론트엔드 성능 테스트 모범 사례

Lighthouse CI의 이점을 극대화하려면 다음 모범 사례를 따르세요:

• 정기적으로 Lighthouse CI 실행하기: Lighthouse CI를 CI/CD 파이프라인에 통합하여 모든 커밋 또는 풀 리퀘스트에 대해 감사를 자동으로 실행하세요. 이를 통해 성능 저하를 조기에 감지하고 신속하게 해결할 수 있습니다.
• 현실적인 성능 예산 설정하기: 도전적이지만 달성 가능한 성능 예산을 정의하세요. 보수적인 예산으로 시작하여 웹사이트 성능이 향상됨에 따라 점차 예산을 강화하세요. 페이지의 복잡성과 중요도에 따라 유형별로 다른 예산을 설정하는 것을 고려하세요.
• 핵심 지표에 집중하기: 사용자 경험과 비즈니스 결과에 가장 큰 영향을 미치는 핵심 성능 지표에 우선순위를 두세요. 구글의 코어 웹 바이탈(LCP, FID, CLS)이 좋은 시작점입니다.
• 성능 문제 조사 및 해결하기: Lighthouse CI가 성능 문제를 식별하면 철저히 조사하고 적절한 해결책을 구현하세요. Lighthouse 보고서를 사용하여 문제의 근본 원인을 파악하고 가장 영향력 있는 수정 사항의 우선순위를 정하세요.
• 시간에 따른 성능 모니터링하기: 시간 경과에 따른 성능 지표를 추적하여 추세와 패턴을 파악하세요. Lighthouse CI 서버 또는 다른 모니터링 도구를 사용하여 성능 데이터를 시각화하고 개선할 영역을 식별하세요.
• 팀 교육하기: 팀이 프론트엔드 성능의 중요성과 Lighthouse CI를 효과적으로 사용하는 방법을 이해하도록 하세요. 그들의 기술과 지식을 향상시키는 데 도움이 되는 교육과 자료를 제공하세요.
• 글로벌 네트워크 환경 고려하기: 성능 예산을 설정할 때 전 세계 여러 지역의 네트워크 환경을 고려하세요. 인터넷 속도가 느린 지역의 사용자는 빠른 속도를 가진 지역의 사용자와 다른 경험을 할 수 있습니다. 테스트 중에 다양한 네트워크 환경을 시뮬레이션하는 도구를 사용하세요.
• 이미지 최적화하기: 이미지 최적화는 프론트엔드 성능의 중요한 측면입니다. ImageOptim, TinyPNG 또는 온라인 변환기와 같은 도구를 사용하여 품질 저하 없이 이미지를 압축하고 최적화하세요. WebP와 같이 JPEG 및 PNG와 같은 기존 형식보다 더 나은 압축률과 품질을 제공하는 최신 이미지 형식을 사용하세요. 뷰포트에서 즉시 보이지 않는 이미지에 대해 지연 로딩(lazy loading)을 구현하세요.
• 코드 축소 및 압축하기: HTML, CSS, JavaScript 코드를 축소(minify)하여 파일 크기를 줄이세요. UglifyJS, Terser 또는 온라인 축소 도구를 사용하세요. 서버에서 Gzip 또는 Brotli 압축을 활성화하여 전송되는 파일의 크기를 더욱 줄이세요.
• 브라우저 캐싱 활용하기: 이미지, CSS, JavaScript 파일과 같은 정적 자산에 대해 적절한 캐시 헤더를 설정하도록 서버를 구성하세요. 이를 통해 브라우저는 이러한 자산을 캐시하고 반복적으로 다운로드하는 것을 피할 수 있습니다.

결론

Lighthouse CI를 개발 워크플로우에 통합하는 것은 고성능, 접근성이 뛰어나고 SEO 친화적인 웹사이트를 구축하기 위한 중요한 단계입니다. 프론트엔드 성능 테스트를 자동화하고 시간 경과에 따른 성능을 추적함으로써 성능 문제를 조기에 식별하고 해결하며 사용자 경험을 개선하고 비즈니스 결과를 이끌어낼 수 있습니다. Lighthouse CI를 도입하고 지속적인 성능 개선을 개발 프로세스의 핵심 가치로 삼으세요. 웹사이트 성능은 일회성 노력이 아니라 지속적인 관심과 최적화가 필요한 지속적인 과정임을 기억하세요. 문화적, 지역적 요인을 고려하여 모든 사용자가 위치나 장치에 관계없이 원활한 경험을 할 수 있도록 보장하세요. 이 글에서 설명한 모범 사례를 따르면 전 세계 사용자에게 빠르고 안정적이며 즐거운 경험을 제공하는 웹사이트를 보장할 수 있습니다.