Prestandatestning av Frontend: Integrera Lighthouse CI för kontinuerlig förbättring

I dagens digitala landskap är en webbplats prestanda av yttersta vikt. Långsamma laddningstider, tillgänglighetsproblem och dålig SEO kan avsevärt påverka användarupplevelsen och därmed affärsresultaten. Prestandatestning av frontend har blivit en väsentlig del av den moderna mjukvaruutvecklingens livscykel, och säkerställer att webbplatser och webbapplikationer är snabba, pålitliga och användarvänliga för en global publik. Den här artikeln fördjupar sig i hur man integrerar Lighthouse CI, ett kraftfullt open source-verktyg, i sin pipeline för kontinuerlig integration (CI) för att automatisera prestandatestning av frontend och driva kontinuerlig förbättring.

Varför är prestandatestning av frontend viktigt?

Innan vi dyker in i Lighthouse CI, låt oss förstå varför prestandatestning av frontend är avgörande:

• Användarupplevelse: En snabb och responsiv webbplats ger en bättre användarupplevelse, vilket leder till ökat engagemang och minskade avvisningsfrekvenser. Föreställ dig en potentiell kund i Tokyo, Japan, som försöker köpa en produkt på en långsamt laddande e-handelssajt. De kommer sannolikt att överge webbplatsen och leta efter alternativ.
• SEO-ranking: Sökmotorer som Google betraktar webbplatsens hastighet och prestanda som rankingfaktorer. Snabbare webbplatser tenderar att rankas högre i sökresultaten, vilket driver mer organisk trafik. Googles initiativ Core Web Vitals betonar vikten av faktorer som Largest Contentful Paint (LCP), First Input Delay (FID) och Cumulative Layout Shift (CLS) för SEO.
• Tillgänglighet: Prestandaförbättringar leder ofta till bättre tillgänglighet för användare med funktionsnedsättningar. Optimerad kod och bilder kan förbättra upplevelsen för användare som förlitar sig på skärmläsare eller de med begränsad bandbredd.
• Konverteringsgrad: En snabbare webbplats kan direkt påverka konverteringsgraden. Studier har visat att även en sekunds fördröjning i sidladdningstid kan leda till en betydande minskning av konverteringar. Tänk på en användare i Mumbai, Indien, som försöker boka ett flyg. En långsam bokningsprocess kan leda till att de överger köpet och väljer en konkurrent.
• Resursoptimering: Prestandatestning hjälper till att identifiera områden där resurser kan optimeras, vilket leder till kostnadsbesparingar i form av serverinfrastruktur och bandbreddsanvändning.

Introduktion till Lighthouse CI

Lighthouse CI är ett automatiserat open source-verktyg utformat för att smidigt integreras med din CI/CD-pipeline. Det kör Lighthouse, ett populärt granskningsverktyg utvecklat av Google, och ger insikter om din webbplats prestanda, tillgänglighet, SEO, bästa praxis och efterlevnad av Progressive Web App (PWA). Lighthouse CI hjälper dig att:

• Automatisera prestandagranskningar: Kör Lighthouse-granskningar automatiskt med varje commit eller pull request.
• Spåra prestanda över tid: Övervaka prestandamått över tid och identifiera regressioner tidigt.
• Sätt prestandabudgetar: Definiera prestandabudgetar och låt byggen misslyckas om de överskrids.
• Integrera med CI/CD-system: Integrera med populära CI/CD-system som GitHub Actions, GitLab CI, CircleCI och Jenkins.
• Samarbeta kring prestandaproblem: Dela Lighthouse-rapporter och samarbeta med ditt team för att lösa prestandaproblem.

Konfigurera Lighthouse CI

Här är en steg-för-steg-guide för att konfigurera Lighthouse CI i ditt projekt:

1. Installera Lighthouse CI

Installera Lighthouse CI CLI globalt med npm eller yarn:

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

              
                Copy
              
            
          

2. Konfigurera Lighthouse CI

Skapa en lighthouserc.js-fil i ditt projekts rotkatalog för att konfigurera Lighthouse CI. Här är ett exempel 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
              
            
          

Låt oss gå igenom den här konfigurationen:

• collect.url: En array med URL:er att granska. Detta exempel granskar hemsidan och om-sidan. Du bör inkludera alla kritiska sidor på din webbplats, med hänsyn till olika användningsfall. Till exempel kan en e-handelssajt inkludera hemsidan, produktlistningssidor, produktdetaljsidor och kassaprocessen.
• collect.startServerCommand: Kommandot för att starta din utvecklingsserver. Detta är nödvändigt om Lighthouse CI behöver köras mot en lokal utvecklingsmiljö.
• collect.numberOfRuns: Antalet gånger Lighthouse-granskningar ska köras för varje URL. Att köra flera granskningar hjälper till att mildra variationer i nätverksförhållanden och andra faktorer.
• assert.assertions: En uppsättning påståenden för att validera resultaten från Lighthouse-granskningen. Varje påstående specificerar ett mätvärde eller en kategori och ett tröskelvärde. Om tröskelvärdet inte uppfylls kommer bygget att misslyckas. Detta exempel sätter tröskelvärden för kategorierna prestanda, tillgänglighet, bästa praxis och SEO. Det sätter också tröskelvärden för specifika mätvärden som First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT) och Cumulative Layout Shift (CLS).
• upload.target: Anger var Lighthouse-rapporterna ska laddas upp. temporary-redirect laddar upp rapporterna till en tillfällig lagringsplats och tillhandahåller en URL för att komma åt dem. Andra alternativ inkluderar att använda Lighthouse CI-servern eller molnlagringslösningar som Google Cloud Storage eller Amazon S3.

3. Integrera med ditt CI/CD-system

Nästa steg är att integrera Lighthouse CI i din CI/CD-pipeline. Här är ett exempel på hur man integrerar det med GitHub Actions:

Skapa en .github/workflows/lighthouse.yml-fil i ditt 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
              
            
          

Detta arbetsflöde utför följande steg:

• Hämtar koden (checkout).
• Sätter upp Node.js.
• Installerar beroenden.
• Kör Lighthouse CI. Detta steg bygger först applikationen (npm run build), och kör sedan lhci autorun, vilket utför Lighthouse-granskningarna och validerar resultaten mot de konfigurerade tröskelvärdena.

Anpassa detta arbetsflöde till ditt specifika CI/CD-system och projektkrav. Om du till exempel använder GitLab CI, skulle du konfigurera en .gitlab-ci.yml-fil med liknande steg.

4. Kör Lighthouse CI

Committa dina ändringar och pusha dem till ditt repository. CI/CD-pipelinen kommer automatiskt att köra Lighthouse CI. Om något av påståendena misslyckas, kommer bygget att misslyckas, vilket ger värdefull feedback till utvecklarna. Lighthouse CI-rapporterna kommer att finnas tillgängliga på den URL som tillhandahålls av CI/CD-systemet.

Avancerad konfiguration och anpassning

Lighthouse CI erbjuder ett brett utbud av konfigurationsalternativ och anpassningsmöjligheter. Här är några avancerade funktioner:

1. Använda Lighthouse CI-servern

Lighthouse CI-servern tillhandahåller en centraliserad instrumentpanel för att spåra prestandamått över tid, hantera projekt och samarbeta kring prestandaproblem. För att använda Lighthouse CI-servern måste du sätta upp en instans och konfigurera din lighthouserc.js-fil för att ladda upp rapporter till servern.

Först, driftsätt servern. Det finns olika driftsättningsalternativ tillgängliga, inklusive Docker, Heroku och molnleverantörer som AWS och Google Cloud. Se Lighthouse CI-dokumentationen för detaljerade instruktioner om hur man driftsätter servern.

När servern är igång, uppdatera din lighthouserc.js-fil för att peka mot servern:

            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
              
            
          

Ersätt YOUR_LHCI_SERVER_URL med URL:en till din Lighthouse CI-server och YOUR_LHCI_SERVER_TOKEN med en token som genererats av servern. Token autentiserar din CI-pipeline med servern.

2. Sätta prestandabudgetar

Prestandabudgetar definierar acceptabla tröskelvärden för specifika mätvärden. Lighthouse CI låter dig sätta prestandabudgetar och låta byggen misslyckas om dessa budgetar överskrids. Detta hjälper till att förhindra prestandaregressioner och säkerställer att din webbplats håller sig inom acceptabla prestandagränser.

Du kan definiera prestandabudgetar i din lighthouserc.js-fil med hjälp av egenskapen assert.assertions. För att till exempel sätta en prestandabudget för First Contentful Paint (FCP), kan du lägga till följande påstående:

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

              
                Copy
              
            
          

Detta påstående kommer att få bygget att misslyckas om FCP är större än 2500 millisekunder.

3. Anpassa Lighthouse-konfiguration

Lighthouse CI låter dig anpassa Lighthouse-konfigurationen för att passa dina specifika behov. Du kan konfigurera olika Lighthouse-inställningar, såsom:

• onlyAudits: Ange en lista över granskningar att köra.
• skipAudits: Ange en lista över granskningar att hoppa över.
• throttling: Konfigurera inställningar för nätverksstrypning för att simulera olika nätverksförhållanden.
• formFactor: Ange formfaktorn (desktop eller mobil) att emulera.
• screenEmulation: Konfigurera inställningar för skärmemulering.

För att anpassa Lighthouse-konfigurationen kan du skicka en --config-path-flagga till kommandot lhci autorun, som pekar på en anpassad Lighthouse-konfigurationsfil. Se Lighthouse-dokumentationen för en komplett lista över konfigurationsalternativ.

4. Granska autentiserade sidor

Att granska autentiserade sidor kräver ett något annorlunda tillvägagångssätt. Du måste ge Lighthouse CI ett sätt att autentisera sig innan granskningarna körs. Detta kan uppnås med hjälp av cookies eller genom att skripta inloggningsprocessen.

Ett vanligt tillvägagångssätt är att använda flaggan --extra-headers för att skicka autentiseringscookies till Lighthouse CI. Du kan hämta kakorna från din webbläsares utvecklarverktyg efter att ha loggat in på webbplatsen.

Alternativt kan du använda ett Puppeteer-skript för att automatisera inloggningsprocessen och sedan köra Lighthouse-granskningar på de autentiserade sidorna. Detta tillvägagångssätt ger mer flexibilitet och låter dig hantera komplexa autentiseringsscenarier.Bästa praxis för prestandatestning av frontend med Lighthouse CI

För att maximera fördelarna med Lighthouse CI, följ dessa bästa praxis:

• Kör Lighthouse CI regelbundet: Integrera Lighthouse CI i din CI/CD-pipeline för att köra granskningar automatiskt med varje commit eller pull request. Detta säkerställer att prestandaregressioner upptäcks tidigt och åtgärdas snabbt.
• Sätt realistiska prestandabudgetar: Definiera prestandabudgetar som är utmanande men uppnåeliga. Börja med konservativa budgetar och skärp dem gradvis i takt med att din webbplats prestanda förbättras. Överväg att sätta olika budgetar för olika typer av sidor, beroende på deras komplexitet och betydelse.
• Fokusera på nyckeltal: Prioritera de viktigaste prestandamätvärdena som har störst inverkan på användarupplevelsen och affärsresultaten. Googles Core Web Vitals (LCP, FID och CLS) är en bra utgångspunkt.
• Undersök och åtgärda prestandaproblem: När Lighthouse CI identifierar prestandaproblem, undersök dem noggrant och implementera lämpliga lösningar. Använd Lighthouse-rapporterna för att identifiera grundorsakerna till problemen och prioritera de mest effektfulla korrigeringarna.
• Övervaka prestanda över tid: Spåra prestandamått över tid för att identifiera trender och mönster. Använd Lighthouse CI-servern eller andra övervakningsverktyg för att visualisera prestandadata och identifiera förbättringsområden.
• Utbilda ditt team: Se till att ditt team förstår vikten av frontend-prestanda och hur man använder Lighthouse CI effektivt. Tillhandahåll utbildning och resurser för att hjälpa dem att förbättra sina färdigheter och kunskaper.
• Tänk på globala nätverksförhållanden: När du sätter prestandabudgetar, ta hänsyn till nätverksförhållandena i olika delar av världen. Användare i områden med långsammare internethastigheter kan ha en annan upplevelse än användare i områden med snabbare hastigheter. Använd verktyg för att simulera olika nätverksförhållanden under testning.
• Optimera bilder: Bildoptimering är en kritisk aspekt av frontend-prestanda. Använd verktyg som ImageOptim, TinyPNG eller online-konverterare för att komprimera och optimera bilder utan att förlora kvalitet. Använd moderna bildformat som WebP, som erbjuder bättre komprimering och kvalitet än traditionella format som JPEG och PNG. Implementera lazy loading för bilder som inte är omedelbart synliga i viewporten.
• Minimera och komprimera kod: Minimera din HTML-, CSS- och JavaScript-kod för att minska filstorlekarna. Använd verktyg som UglifyJS, Terser eller online-minifierare. Aktivera Gzip- eller Brotli-komprimering på din server för att ytterligare minska storleken på överförda filer.
• Utnyttja webbläsarcache: Konfigurera din server för att sätta lämpliga cache-headers för statiska tillgångar som bilder, CSS- och JavaScript-filer. Detta gör att webbläsare kan cacha dessa tillgångar och undvika att ladda ner dem upprepade gånger.

Slutsats

Att integrera Lighthouse CI i ditt utvecklingsflöde är ett avgörande steg mot att bygga högpresterande, tillgängliga och SEO-vänliga webbplatser. Genom att automatisera prestandatestning av frontend och spåra prestanda över tid kan du identifiera och åtgärda prestandaproblem tidigt, förbättra användarupplevelsen och driva affärsresultat. Omfamna Lighthouse CI och gör kontinuerlig prestandaförbättring till ett kärnvärde i din utvecklingsprocess. Kom ihåg att en webbplats prestanda inte är en engångsansträngning utan en pågående process som kräver ständig uppmärksamhet och optimering. Ta hänsyn till kulturella och regionala faktorer för att säkerställa en sömlös upplevelse för alla dina användare, oavsett deras plats eller enhet. Genom att följa de bästa praxis som beskrivs i den här artikeln kan du säkerställa att din webbplats levererar en snabb, pålitlig och njutbar upplevelse till användare över hela världen.