Frontend Performance Testing: Integrering af Lighthouse CI for Løbende Forbedring

I nutidens digitale landskab er et websites ydeevne altafgørende. Langsomme indlæsningstider, tilgængelighedsproblemer og dårlig SEO kan have en betydelig indvirkning på brugeroplevelsen og dermed forretningsresultaterne. Frontend-performancetestning er blevet en essentiel del af den moderne softwareudviklings livscyklus, der sikrer, at websites og webapplikationer er hurtige, pålidelige og brugervenlige for et globalt publikum. Denne artikel dykker ned i integrationen af Lighthouse CI, et kraftfuldt open-source værktøj, i din continuous integration (CI) pipeline for at automatisere frontend-performancetestning og drive løbende forbedringer.

Hvorfor er Frontend Performance Testing Vigtigt?

Før vi dykker ned i Lighthouse CI, lad os forstå, hvorfor frontend-performancetestning er afgørende:

• Brugeroplevelse: Et hurtigt og responsivt website giver en bedre brugeroplevelse, hvilket fører til øget engagement og lavere afvisningsprocenter. Forestil dig en potentiel kunde i Tokyo, Japan, der forsøger at købe et produkt på en langsom e-handelsside. De vil sandsynligvis forlade siden og lede efter alternativer.
• SEO-placering: Søgemaskiner som Google betragter websitehastighed og ydeevne som rangeringsfaktorer. Hurtigere websites har tendens til at rangere højere i søgeresultaterne, hvilket driver mere organisk trafik. Googles Core Web Vitals-initiativ understreger vigtigheden af faktorer som Largest Contentful Paint (LCP), First Input Delay (FID) og Cumulative Layout Shift (CLS) for SEO.
• Tilgængelighed: Forbedringer i ydeevne fører ofte til bedre tilgængelighed for brugere med handicap. Optimeret kode og billeder kan forbedre oplevelsen for brugere, der er afhængige af skærmlæsere, eller dem med begrænset båndbredde.
• Konverteringsrater: Et hurtigere website kan direkte påvirke konverteringsraterne. Undersøgelser har vist, at selv en et-sekunds forsinkelse i sideindlæsningstid kan føre til et markant fald i konverteringer. Tænk på en bruger i Mumbai, Indien, der forsøger at booke en flyrejse. En langsom bookingproces kan føre til, at de opgiver købet og vælger en konkurrent.
• Ressourceoptimering: Performancetestning hjælper med at identificere områder, hvor ressourcer kan optimeres, hvilket fører til omkostningsbesparelser i form af serverinfrastruktur og båndbreddeforbrug.

Introduktion til Lighthouse CI

Lighthouse CI er et open-source, automatiseret værktøj designet til at integrere problemfrit med din CI/CD-pipeline. Det kører Lighthouse, et populært revisionsværktøj udviklet af Google, og giver indsigt i dit websites ydeevne, tilgængelighed, SEO, bedste praksis og Progressive Web App (PWA) overholdelse. Lighthouse CI hjælper dig med at:

• Automatisere Performance Audits: Kør Lighthouse-audits automatisk med hver commit eller pull request.
• Spore Ydeevne Over Tid: Overvåg ydeevnemålinger over tid og identificer regressioner tidligt.
• Sætte Performance-budgetter: Definer performance-budgetter og få builds til at fejle, hvis de overskrides.
• Integrere med CI/CD-systemer: Integrer med populære CI/CD-systemer som GitHub Actions, GitLab CI, CircleCI og Jenkins.
• Samarbejde om Performance-problemer: Del Lighthouse-rapporter og samarbejd med dit team for at løse performance-problemer.

Opsætning af Lighthouse CI

Her er en trin-for-trin guide til opsætning af Lighthouse CI i dit projekt:

1. Installer Lighthouse CI

Installer Lighthouse CI CLI globalt ved hjælp af npm eller yarn:

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

              
                Copy
              
            
          

2. Konfigurer Lighthouse CI

Opret en lighthouserc.js-fil i dit projekts rodmappe for at konfigurere Lighthouse CI. Her er et eksempel på en konfiguration:

            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
              
            
          

Lad os gennemgå denne konfiguration:

• collect.url: En liste af URL'er, der skal auditeres. Dette eksempel auditerer forsiden og om-siden. Du bør inkludere alle kritiske sider på dit website og overveje forskellige brugsscenarier. For eksempel kan en e-handelsside inkludere forsiden, produktlistesider, produktdetaljesider og betalingsprocessen.
• collect.startServerCommand: Kommandoen til at starte din udviklingsserver. Dette er nødvendigt, hvis Lighthouse CI skal køre mod et lokalt udviklingsmiljø.
• collect.numberOfRuns: Antallet af gange Lighthouse-audits skal køres for hver URL. At køre flere audits hjælper med at afbøde variationer i netværksforhold og andre faktorer.
• assert.assertions: Et sæt af påstande til at validere Lighthouse-auditresultaterne. Hver påstand specificerer en metrik eller kategori og en tærskelværdi. Hvis tærskelværdien ikke opfyldes, vil buildet fejle. Dette eksempel sætter tærskelværdier for kategorierne performance, tilgængelighed, bedste praksis og SEO. Det sætter også tærskelværdier for specifikke metrikker som First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT) og Cumulative Layout Shift (CLS).
• upload.target: Angiver, hvor Lighthouse-rapporterne skal uploades. temporary-redirect uploader rapporterne til en midlertidig lagerplacering og giver en URL til at tilgå dem. Andre muligheder inkluderer brug af Lighthouse CI-serveren eller cloud-lagringsløsninger som Google Cloud Storage eller Amazon S3.

3. Integrer med dit CI/CD-system

Næste skridt er at integrere Lighthouse CI i din CI/CD-pipeline. Her er et eksempel på, hvordan man integrerer det med GitHub Actions:

Opret en .github/workflows/lighthouse.yml-fil i dit repository:

            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
              
            
          

Denne workflow udfører følgende trin:

• Checker koden ud.
• Opsætter Node.js.
• Installerer afhængigheder.
• Kører Lighthouse CI. Dette trin bygger først applikationen (npm run build) og kører derefter lhci autorun, som udfører Lighthouse-audits og validerer resultaterne mod de konfigurerede tærskelværdier.

Tilpas denne workflow til dit specifikke CI/CD-system og projektkrav. For eksempel, hvis du bruger GitLab CI, ville du konfigurere en .gitlab-ci.yml-fil med lignende trin.

4. Kør Lighthouse CI

Commit dine ændringer og push dem til dit repository. CI/CD-pipelinen vil automatisk køre Lighthouse CI. Hvis nogen af påstandene fejler, vil buildet fejle, hvilket giver værdifuld feedback til udviklerne. Lighthouse CI-rapporterne vil være tilgængelige på den URL, der leveres af CI/CD-systemet.

Avanceret Konfiguration og Tilpasning

Lighthouse CI tilbyder en bred vifte af konfigurationsmuligheder og tilpasningsmuligheder. Her er nogle avancerede funktioner:

1. Brug af Lighthouse CI Server

Lighthouse CI-serveren giver et centraliseret dashboard til at spore ydeevnemålinger over tid, administrere projekter og samarbejde om performance-problemer. For at bruge Lighthouse CI-serveren skal du opsætte en instans og konfigurere din lighthouserc.js-fil til at uploade rapporter til serveren.

Først skal du deploye serveren. Der findes forskellige implementeringsmuligheder, herunder Docker, Heroku og cloud-udbydere som AWS og Google Cloud. Se Lighthouse CI-dokumentationen for detaljerede instruktioner om implementering af serveren.

Når serveren kører, skal du opdatere din lighthouserc.js-fil, så den peger på serveren:

            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
              
            
          

Erstat YOUR_LHCI_SERVER_URL med URL'en til din Lighthouse CI-server og YOUR_LHCI_SERVER_TOKEN med et token genereret af serveren. Tokenet autentificerer din CI-pipeline med serveren.

2. Indstilling af Performance-budgetter

Performance-budgetter definerer acceptable tærskelværdier for specifikke metrikker. Lighthouse CI giver dig mulighed for at sætte performance-budgetter og få builds til at fejle, hvis disse budgetter overskrides. Dette hjælper med at forhindre performance-regressioner og sikrer, at dit website holder sig inden for acceptable performance-grænser.

Du kan definere performance-budgetter i din lighthouserc.js-fil ved hjælp af assert.assertions-egenskaben. For eksempel, for at sætte et performance-budget for First Contentful Paint (FCP), kan du tilføje følgende påstand:

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

              
                Copy
              
            
          

Denne påstand vil få buildet til at fejle, hvis FCP er større end 2500 millisekunder.

3. Tilpasning af Lighthouse-konfiguration

Lighthouse CI giver dig mulighed for at tilpasse Lighthouse-konfigurationen, så den passer til dine specifikke behov. Du kan konfigurere forskellige Lighthouse-indstillinger, såsom:

• onlyAudits: Angiv en liste over audits, der skal køres.
• skipAudits: Angiv en liste over audits, der skal springes over.
• throttling: Konfigurer netværksbegrænsningsindstillinger for at simulere forskellige netværksforhold.
• formFactor: Angiv den formfaktor (desktop eller mobil), der skal emuleres.
• screenEmulation: Konfigurer skærmemuleringsindstillinger.

For at tilpasse Lighthouse-konfigurationen kan du sende et --config-path-flag til lhci autorun-kommandoen, der peger på en brugerdefineret Lighthouse-konfigurationsfil. Se Lighthouse-dokumentationen for en komplet liste over konfigurationsmuligheder.

4. Auditering af sider, der kræver godkendelse

Auditering af sider, der kræver godkendelse, kræver en lidt anderledes tilgang. Du skal give Lighthouse CI en måde at autentificere sig på, før audits køres. Dette kan opnås ved hjælp af cookies eller ved at scripte login-processen.

En almindelig tilgang er at bruge --extra-headers-flaget til at sende godkendelsescookies til Lighthouse CI. Du kan hente cookies fra din browsers udviklerværktøjer efter at have logget ind på websitet.

Alternativt kan du bruge et Puppeteer-script til at automatisere login-processen og derefter køre Lighthouse-audits på de godkendte sider. Denne tilgang giver mere fleksibilitet og giver dig mulighed for at håndtere komplekse godkendelsesscenarier.Bedste Praksis for Frontend Performance Testing med Lighthouse CI

For at maksimere fordelene ved Lighthouse CI, følg disse bedste praksisser:

• Kør Lighthouse CI Regelmæssigt: Integrer Lighthouse CI i din CI/CD-pipeline for at køre audits automatisk med hver commit eller pull request. Dette sikrer, at performance-regressioner opdages tidligt og håndteres hurtigt.
• Sæt Realistiske Performance-budgetter: Definer performance-budgetter, der er udfordrende, men opnåelige. Start med konservative budgetter og stram dem gradvist, efterhånden som dit websites ydeevne forbedres. Overvej at sætte forskellige budgetter for forskellige typer sider, afhængigt af deres kompleksitet og vigtighed.
• Fokuser på Nøglemetrikker: Prioriter de vigtigste ydeevnemålinger, der har størst indflydelse på brugeroplevelsen og forretningsresultaterne. Googles Core Web Vitals (LCP, FID og CLS) er et godt udgangspunkt.
• Undersøg og Løs Performance-problemer: Når Lighthouse CI identificerer performance-problemer, skal du undersøge dem grundigt og implementere passende løsninger. Brug Lighthouse-rapporterne til at identificere de grundlæggende årsager til problemerne og prioritere de mest effektfulde rettelser.
• Overvåg Ydeevne Over Tid: Spor ydeevnemålinger over tid for at identificere tendenser og mønstre. Brug Lighthouse CI-serveren eller andre overvågningsværktøjer til at visualisere ydeevnedata og identificere områder for forbedring.
• Uddan Dit Team: Sørg for, at dit team forstår vigtigheden af frontend-performance og hvordan man bruger Lighthouse CI effektivt. Sørg for træning og ressourcer til at hjælpe dem med at forbedre deres færdigheder og viden.
• Overvej Globale Netværksforhold: Når du sætter performance-budgetter, skal du overveje netværksforholdene i forskellige dele af verden. Brugere i områder med langsommere internethastigheder kan have en anden oplevelse end brugere i områder med hurtigere hastigheder. Brug værktøjer til at simulere forskellige netværksforhold under test.
• Optimer Billeder: Billedoptimering er et kritisk aspekt af frontend-performance. Brug værktøjer som ImageOptim, TinyPNG eller online konvertere til at komprimere og optimere billeder uden at miste kvalitet. Brug moderne billedformater som WebP, der tilbyder bedre komprimering og kvalitet end traditionelle formater som JPEG og PNG. Implementer lazy loading for billeder, der ikke er umiddelbart synlige i viewporten.
• Minimer og Komprimer Kode: Minimer din HTML-, CSS- og JavaScript-kode for at reducere filstørrelser. Brug værktøjer som UglifyJS, Terser eller online minifiers. Aktiver Gzip- eller Brotli-komprimering på din server for yderligere at reducere størrelsen på overførte filer.
• Udnyt Browser Caching: Konfigurer din server til at sætte passende cache-headere for statiske aktiver som billeder, CSS- og JavaScript-filer. Dette giver browsere mulighed for at cache disse aktiver og undgå at downloade dem gentagne gange.

Konklusion

Integrering af Lighthouse CI i dit udviklingsworkflow er et afgørende skridt mod at bygge højtydende, tilgængelige og SEO-venlige websites. Ved at automatisere frontend-performancetestning og spore ydeevne over tid, kan du identificere og løse performance-problemer tidligt, forbedre brugeroplevelsen og drive forretningsresultater. Omfavn Lighthouse CI og gør løbende performance-forbedring til en kerneværdi i din udviklingsproces. Husk, at et websites ydeevne ikke er en engangsindsats, men en løbende proces, der kræver konstant opmærksomhed og optimering. Overvej kulturelle og regionale faktorer for at sikre en problemfri oplevelse for alle dine brugere, uanset deres placering eller enhed. Ved at følge de bedste praksisser, der er skitseret i denne artikel, kan du sikre, at dit website leverer en hurtig, pålidelig og fornøjelig oplevelse til brugere over hele verden.