Lighthouse CI를 Github Actions에 적용하기

웹 최적화

 

프론트엔드 개발에서 웹 최적화는 중요 부분을 담당하고 있습니다. 사이트의 속도가 느려서 유저가 이탈하거나 SEO가 제대로 작동하지 않아서 노출이 되지 않으면 회사의 매출과도 직결되기 때문이죠.

하지만 우리는 웹 페이지가 느리다는 것을 어떻게 정의할 수 있을까요. 단순히 로딩 속도가 느리다와 같은 추측만으로는 부족하기 때문에 눈으로 확인할 수 있는 정량적인 지표들이 필요합니다.이를 도와주는 도구가 Google이 제공하는 Lighthouse입니다.

이번 포스팅에서는 Lighthouse에 대해 간단히 알아보고 Lighthouse CI와 Github Actions를 활용하여 PR 단계에서 웹 성능을 측정하는 과정을 다뤄보겠습니다.

Lighthouse

 

Lighthouse는 Google에서 제공하는, 웹앱의 품질 개선에 도움을 주는 자동화 도구 입니다. 성능, 접근성, SEO 등 사이트에 대한 전반적인 진단을 할 수 있습니다.

간단히 Chrome의 개발자 도구에서 실행할 수 있는데 어떤 지표를 제공하는지 실제로 Lighthouse를 실행해서 확인해보겠습니다.

React 공식 홈페이지에서 Lighthouse 리포트를 생성해봤습니다. 리포트를 살펴보면 크게 Performance, Accessibility, Best Practice, SEO 5개 카테고리로 분류하여 측정값을 보여주고 있습니다.

Performance의 경우 FCP(First Contentful Paint), TTI(Time to Interactive), Speed Index, TBT(Total Blocking Time), LCP(Largest Contentful Paint), Cumulative Layout Shiftblock로 세분화 됩니다. 모두 웹 성능을 측정하는 중요한 지표인 만큼 추후 포스팅에서 각각의 상세성능 지표에 대해 다뤄보겠습니다.

Lighthouse CI

 

Lighthouse에 대해서 간단히 알아보았습니다. 하지만 우리가 개발을 하면서 매번 성능측정을 위해 크롬탭에서 보고서를 작성할 순 없겠죠.

 

이 Lighthouse를 CI 단계에서 연동할 수 있는데 라이브러리가 Lighthouse CI입니다. 여러 CI와 연동할 수 있는데 이번 포스팅에서는 Github Actions와 연동하여 PR단계에서 웹 성능을 측정할 수 있도록 설정해보겠습니다. 프로젝트는 Next.js 기반으로 진행하겠습니다.

Local

 

yarn global add @lhci/cli

 

먼저 로컬에서 실행하기 위해 프로젝트에 @lhci/cli를 설치해줍니다. 설치가 완료되면 루트 폴더에 .lighthouserc.js 파일을 생성합니다. 파일의 기본적인 구성은 다음과 같습니다.

 

module.exports = {
  ci: {
    collect: {
      // collect options here
    },
    assert: {
      // assert options here
    },
    upload: {
      // upload options here
    },
    server: {
      // server options here
    },
    wizard: {
      // wizard options here
    },
  },
};

 

각각의 이름에서 유추할 수 있듯이 웹 페이지의 정보를 수집하고 측정 결과 업로드의 셋팅 등을 담고 있습니다. 자세한 세팅은 이곳 에서 확인할 수 있고 이번 프로젝트에서 셋팅할 설정은 다음과 같습니다.

 

module.exports = {
  ci: {
    collect: {
      //staticDistDir: "./build",
      startServerCommand: "yarn dev",
      url: ["http://localhost:8080"],
      collect: {
        numberOfRuns: 3,
      },
      settings: {
        preset: "desktop",
      },
    },
    assert: {
      preset: "lighthouse:recommended",
    },
    upload: {
      target: "temporary-public-storage",
    },
  },
};

 

위에서 설정한 셋팅은 Next.js 기반이니 참고만 해주시고 각자의 프로젝트 설정에 따라 셋팅해주시면 되겠습니다. 설정 파일에 대해 간단히 알아보겠습니다.

 

1. staticDistDir : 정적 파일의 경로를 지정합니다. 경로를 지정하면 Lighthouse CI는 그 파일을 기준으로 서버를 실행해서 테스트합니다.
2. startServerCommand : 만약 정적인 사이트가 아닐 경우 서버를 구동하는 명령어를 지정합니다. Lighthouse CI는 실행 될때마다 서버가 구동되어 사이트가 시작되어야 합니다. 따라서 build 폴더의 경로를 지정하거나 동적으로 서버를 구동하는 명령어를 지정해줘야 합니다.
3. url : Lighthouse CI가 실행될 주소를 지정해줍니다. 배열에는 여러 주소가 들어갈 수 있으며 여러개의 사이트에서 구동이 가능합니다.
4. collect.numberOfRuns : Lighthouse CI가 반복적으로 실행 될 횟수를 지정합니다. 최대 5번까지 실행이 가능합니다.
5. upload.target : 작성된 보고서가 저장될 장소입니다. 커스텀하게 지정할 수 있으며 보고서 이름의 패턴등을 지정할 수 있습니다.

 

이제 셋팅도 마무리 되었으니 실제로 Lighthouse CI를 실행해보겠습니다.

 

lhci autorun

✅  .lighthouseci/ directory writable
✅  Configuration file found
✅  Chrome installation found
⚠️   GitHub token not set
Healthcheck passed!

Started a web server with "yarn dev"...
WARNING: Timed out waiting for the server to start listening.
         Ensure the server prints a pattern that matches /ready on/i when it is ready.
Running Lighthouse 3 time(s) on http://localhost:8080
Run #1...done.
Run #2...done.
Run #3...done.
Done running Lighthouse!

Uploading median LHR of http://localhost:8080/...success!
Open the report at https://googlechrome.github.io/lighthouse-ci/viewer/.../html

 

정상적으로 실행되었고 Lighthouse가 사이트의 성능 지표들을 측정해 보고서를 업로드 했습니다. 검사가 마무리되면 보고서가 작성된 링크를 제공해주는데 다음과 같이 측정결과를 확인할 수 있습니다.

 

 

보고서를 통해 우리가 개발중인 사이트의 Performance 점수는 어떤지, SEO는 정상적으로 작동하고 있는지 등을 확인할 수 있습니다. 요약된 결과 뿐만 아니라 LCP(Largest Contentful Paint)와 같은 지표도 확인할 수 있으니 어느 부분이 부족한지, 어떤 점을 개선해야 할 지 확인할 수 있습니다.

 

로컬에서 테스트를 마무리 했으니 다음으로 Github Actions와 연동하여 PR 단계에서 Lighthouse를 작동하는 과정을 진행해보겠습니다.

Github Actions

 

루트 폴더의 .github/worklows에 lighthouse-ci.yaml 파일을 생성합니다. 파일을 생성한 후 이곳을 들어가 나의 repository에 Lighthouse CI를 설치해주고 저장소 설정에서 LHCI_GITHUB_APP_TOKEN 키를 등록해줍니다.

 

이제 Github Actions에서 작동할 프로세스들을 작성해보겠습니다.

 

// .github/worklows에/lighthouse-ci.yaml

name: Run lighthouse CI When Push
on: [push]
jobs:
  lhci:
    name: Lighthouse CI
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Use Node.js 16
        uses: actions/setup-node@v1
        with:
          node-version: 16

      - name: Install Packages
        run: npm install && npm install -g @lhci/cli@0.8.x

      - name: Build
        run: yarn build

      - name: Collect
        run: lhci collect

      - name: Upload
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
        run: lhci upload

작성할 내용이 그렇게 많지는 않습니다. 위 코드들을 한줄씩 정리해보면서 어떤 과정을 거쳐 Lighthouse CI를 수행하는지 설명해보겠습니다.

 

1. Checkout : 저장소의 코드를 내려받습니다.
2. Use Node.js 16 : Node.js를 설치합니다. 본인의 프로젝트에 맞는 버전을 설정해줍니다.
3. Install Packages : 프로젝트에 필요한 패키지들과 @lhci/cli를 설치합니다.
4. Build : 앱을 빌드합니다.
5. Collect : Lighthouse CI가 정보를 수집하고 웹 성능측정을 진행합니다.
6. Upload : 작성된 보고서를 지정된 경로에 업로드 합니다.

이제 PR을 작성해보고 정상적으로 Lighthouse CI가 돌아가는지 확인해보겠습니다. Actions가 완료되면 다음과 같은 결과를 확인할 수 있습니다.

 

 

정상적으로 Lighthouse CI가 수행되었음을 볼 수 있습니다. 프로세스가 완료되면 Details 메뉴를 통해 상세한 Ligthouse 보고서를 확인하실 수 있습니다.

마치며

 

지금까지 웹 성능측정 도구인 Lighthouse CI를 알아보았고 Github Actions와 연동하여 PR 단계에서 성능측정을 진행하는 과정을 다뤄보았습니다. 수동으로 측정하던 과정들을 이제는 CI와 연동하여 PR 단계에서 자동으로 웹 성능 지표들을 확인할 수 있습니다.

 

사용자들의 이탈을 막고 좋은 유저 경험을 제공하기 위해 사이트의 성능 측정은 중요합니다. 습관적으로 지표들을 확인하고 점수를 개선하기 위해 꾸준히 개선하는 과정들이 필요할 것 같습니다.