LÀr dig hur du integrerar Lighthouse CI i ditt utvecklingsflöde för automatiserad prestandatestning av frontend. FörbÀttra webbplatsens hastighet, tillgÀnglighet och SEO med varje commit.
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
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',
},
},
};
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-redirectladdar 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
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 sedanlhci 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',
},
},
};
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 }],
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.