Lighthouse 및 Github Actions의 Análise de Performance

Google Lighthouse는 실제 페이지에서 페이지를 분석할 수 없습니다. Com ele conseguimos medir tanto a performance, quanto questões de acessibilidade e SEO.

Promover essas métricas ?

우리는 Travis, CircleCI, Github Actions 등 다양한 파이프라인에서 실시간으로 정보를 제공하고 실시간 모니터링을 간단하게 수행합니다.

Nesse는 Github Actions를 활용하여 자동 자동화 기능을 시연합니다.

설정

Github의 분석 페이지는 HTML 전용, React, Vue 또는 qualquer outro 프레임워크와 같이 Github의 정확한 저장소에 있습니다.

essa 데모는 cli create-react-app을 활용하는 Reactjs의 매우 간단한 응용 프로그램을 보여줍니다.

Criando 음 워크플로

Para criar o nosso workflow, vamos utilizar a seguinte action disponível:

lighthouse-check-action

Na raiz do nosso repositório vamos criar uma pasta .github/workflows. É nessa 파스타 que vamos criar o nosso 작업 흐름.

 mkdir .github/workflows
 touch main.yaml

아니오 초기 파이프라인, 토큰 gh_token com permissões de repositório, para assim nosso 워크플로 ter autorização para fazer o 배포 de nossa 페이지 또는 no github 페이지, e assim fazer a análise.

React는 main.yaml 파일을 사용하지 않고 추가로 빌드하거나 github 페이지를 배포하지 않고 애플리케이션을 사용할 수 있습니다.

name: Main Workflow

on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

jobs:
  main:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - run: mkdir /tmp/artifacts # Create a folder for the lighthouse artifacts.

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}

      - name: Install Dependencies
        run: npm install

      - name: Build App
        run: npm run build

      - name: Deploy to Github Pages
        uses: JamesIves/[email protected]
        with:
          branch: gh-pages
          folder: build
          token: ${{secrets.gh_token}} # Your repository token.

      - name: Lighthouse Check
        uses: foo-software/lighthouse-check-action@master
        id: lighthouseCheck
        with:
          outputDirectory: /tmp/artifacts
          urls: "https://vinisaveg.github.io/lighthouse-github-actions/" # Your application URL.
          device: "all"

      - name: Upload Lighthouse Artifacts # Upload the generated reports from Lighthouse.
        uses: actions/upload-artifact@master
        with:
          name: Lighthouse reports
          path: /tmp/artifacts

이제 등대 기본 작업을 구성하고 시각적으로 분석할 파일을 업로드할 수 있습니다.

모든 작업 흐름은 저장소에서 작업 흐름을 정확하게 처리하고, 모든 작업 과정은 거의 동일하게 처리합니다.

 git push origin master

분석

Se tudo ocorreu bem, esse será o resultado:



오스 아르테파토스:



분석 결과:



E por fim, para melhorar o nosso CI, podemos verificar nossas pontuações e gerar uma falha, se alguma pontuação não foi atingida.

모든 워크플로우에 대한 추가 작업, 추가 작업:

      - name: Verify Lighthouse Check results
        uses: foo-software/lighthouse-check-status-action@master
        with:
          lighthouseCheckResults: ${{ steps.lighthouseCheck.outputs.lighthouseCheckResults }}
          minAccessibilityScore: "98"
          minBestPracticesScore: "95"
          minPerformanceScore: "98"
          minSeoScore: "98"

Você pode alterar os valores mínimos, com os pertinentes para a sua página.

Esse será o resultado se houver alguma falha:



E se todas as pontuações forem atingidas, teremos esse resultado:



조속히! Agora você tem sua análise automatizada, e semper disponível paraauditia.

Se esse post foi útil de alguma maneira, solte uma reação e deixe alguma mensagem. 밸류!

행복한 코딩!

관련 링크:
Lighthouse Check Github Actions Docs
Performance Scoring
Lighthouse Load Performance