Lär dig implementera Frontend Lighthouse CI för kontinuerlig prestandaövervakning, vilket säkerställer optimal hastighet och användarupplevelse för dina webbapplikationer.
Frontend Lighthouse CI: Kontinuerlig prestandaövervakning för webbapplikationer
I dagens snabbrörliga digitala landskap är en webbplats prestanda av yttersta vikt. En långsamt laddande eller dåligt optimerad webbplats kan leda till frustrerade användare, minskat engagemang och i slutändan en negativ inverkan på din verksamhet. Det är här Lighthouse CI kommer in i bilden. Denna guide kommer att leda dig genom implementeringen av Lighthouse CI för kontinuerlig prestandaövervakning, vilket ger dig möjlighet att proaktivt identifiera och åtgärda prestandaflaskhalsar innan de påverkar dina användare.
Vad är Lighthouse CI?
Lighthouse CI är ett automatiserat prestandatestverktyg med öppen källkod som integreras sömlöst i din pipeline för kontinuerlig integration och kontinuerlig leverans (CI/CD). Det använder Googles granskningsverktyg Lighthouse för att ge handlingsbara insikter om din webbplats prestanda, tillgänglighet, SEO och bästa praxis. Genom att införliva Lighthouse CI i ditt arbetsflöde kan du kontinuerligt övervaka din webbplats prestanda, spåra regressioner och säkerställa att varje kodändring bidrar till en bättre användarupplevelse. Lighthouse CI är inte knutet till en specifik molnleverantör och kan användas med olika uppsättningar. Till exempel kan det köras inuti en Docker-container på tjänster som Github Actions, Jenkins, CircleCI och många fler.
Varför använda Lighthouse CI?
Att implementera Lighthouse CI erbjuder en mängd fördelar:
- Tidig upptäckt av prestandaregressioner: Identifiera prestandaproblem som introduceras av nya kodändringar innan de når produktion.
- Förbättrad webbplatsprestanda: Få handlingsbara insikter om hur du optimerar din webbplats för hastighet, tillgänglighet och SEO.
- Förbättrad användarupplevelse: Leverera en snabbare och mer användarvänlig webbplats som håller besökarna engagerade.
- Minskad avvisningsfrekvens: Optimera laddningstider för att minska användarfrustration och förhindra dem från att lämna din webbplats.
- Ökade konverteringsgrader: En snabbare webbplats leder vanligtvis till högre konverteringsgrader och förbättrade affärsresultat.
- Automatiserad prestandatestning: Integrera prestandatestning i din CI/CD-pipeline för kontinuerlig övervakning.
- Datadrivet beslutsfattande: Basera dina optimeringsinsatser på konkreta prestandamått och insikter.
- Långsiktig prestandaspårning: Övervaka din webbplats prestanda över tid för att identifiera trender och mäta effekten av dina optimeringar.
Huvudfunktioner i Lighthouse CI
- Automatiserade granskningar: Kör Lighthouse-granskningar automatiskt som en del av din CI/CD-process.
- Prestandabudgetar: Sätt prestandabudgetar för att säkerställa att din webbplats håller sig inom acceptabla prestandatrösklar.
- Spårning av regressioner: Spårar prestandaregressioner över tid, vilket gör att du kan identifiera de kodändringar som orsakade dem.
- Handlingsbara insikter: Ger detaljerade rapporter med handlingsbara rekommendationer om hur du kan förbättra din webbplats prestanda.
- Anpassningsbar konfiguration: Konfigurera Lighthouse CI för att möta dina specifika behov och krav.
- Integration med CI/CD-verktyg: Integreras sömlöst med populära CI/CD-verktyg som Jenkins, CircleCI, GitHub Actions och GitLab CI.
- Öppen källkod: Lighthouse CI är ett open source-projekt, vilket innebär att det är gratis att använda och modifiera.
Konfigurera Lighthouse CI: En steg-för-steg-guide
Här är en omfattande guide för att sätta upp Lighthouse CI för ditt projekt:
1. Installera Lighthouse CI CLI
Först måste du installera Lighthouse CI:s kommandoradsgränssnitt (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 roten av ditt projekt för att konfigurera Lighthouse CI. Denna fil definierar vilka webbadresser som ska granskas, assertionsregler och andra konfigurationsalternativ.
Här är ett grundläggande exempel på en lighthouserc.js-fil:
module.exports = {
ci:
{
collect: {
url: ['http://localhost:3000', 'http://localhost:3000/about']
},
assert: {
preset: 'lighthouse:recommended'
},
upload: {
target: 'temporary-public-storage'
},
},
};
Förklaring:
collect.url: Specificerar de webbadresser som ska granskas av Lighthouse. I det här exemplet granskar vi hemsidan och "om"-sidan på en webbplats som körs pålocalhost:3000. Kom ihåg att ersätta detta med de webbadresser som är relevanta för *ditt* projekt, vilket kan inkludera staging-miljöer.assert.preset: Använder förinställningenlighthouse:recommended, som tillämpar en uppsättning fördefinierade assertions baserade på Lighthouses rekommendationer. Detta är en bra utgångspunkt, men du kan anpassa dessa assertions efter behov.upload.target: Konfigurerar var Lighthouse CI-resultaten ska laddas upp.temporary-public-storageär användbart för testning och utveckling, men för produktionsmiljöer vill du vanligtvis använda en mer beständig lagringslösning (diskuteras senare).
3. Integrera Lighthouse CI i din CI/CD-pipeline
Nästa steg är att integrera Lighthouse CI i din CI/CD-pipeline. De exakta stegen varierar beroende på din CI/CD-leverantör, men den allmänna processen innebär att du lägger till ett skript i din CI/CD-konfiguration som kör Lighthouse CI-kommandon.
Exempel med GitHub Actions:
Skapa en fil med namnet .github/workflows/lighthouse-ci.yml i ditt repository med följande innehåll:
name: Lighthouse CI
on:
push:
branches: [main]
pull_request:
jobs:
lighthouse:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: '16.x'
- name: Install dependencies
run: npm ci
- name: Run Lighthouse CI
run: |
npm install -g @lhci/cli@0.11.x
lhci autorun
Förklaring:
on.push.branches: Utlöser arbetsflödet vid pushar tillmain-branchen.on.pull_request: Utlöser arbetsflödet vid pull requests.jobs.lighthouse.runs-on: Anger operativsystemet som ska användas för jobbet (Ubuntu i det här fallet).steps: Definierar de steg som ska utföras i jobbet:actions/checkout@v3: Checkar ut repositoryt.actions/setup-node@v3: Sätter upp Node.js.npm ci: Installerar beroenden.Run Lighthouse CI: Kör Lighthouse CI-kommandon:npm install -g @lhci/cli@0.11.x: Installerar Lighthouse CI CLI globalt. *Viktigt*: Det rekommenderas alltid att låsa en specifik version.lhci autorun: Kör Lighthouse CI i "autorun"-läge, vilket automatiskt samlar in granskningar, kontrollerar prestandabudgetar och laddar upp resultaten.
Viktiga överväganden för CI/CD-integration:
- Serverstart: Innan du kör
lhci autorun, se till att din webbserver är igång (t.ex.npm start). Du kan behöva lägga till ett steg i din CI/CD-konfiguration för att starta din server i bakgrunden. - Datamigreringar: Om din applikation är beroende av en databas, se till att databasmigreringar körs som en del av din CI/CD-process *innan* du kör Lighthouse CI.
- Miljövariabler: Om din applikation kräver miljövariabler, se till att dessa är korrekt konfigurerade i din CI/CD-miljö.
4. Kör Lighthouse CI
Nu, när du pushar ändringar till main-branchen eller skapar en pull request, kommer Lighthouse CI-arbetsflödet att köras automatiskt. Resultaten kommer att finnas tillgängliga i GitHub Actions-gränssnittet.
5. Visa Lighthouse CI-resultat
Lighthouse CI-resultaten kommer att laddas upp till den plats som anges i din lighthouserc.js-fil (t.ex. temporary-public-storage). Du kan komma åt dessa resultat genom att följa länken som finns i CI/CD-utdatan. Dessa resultat ger detaljerad information om din webbplats prestanda, tillgänglighet, SEO och bästa praxis.
Konfigurera Assertions och prestandabudgetar
Lighthouse CI låter dig konfigurera assertions och prestandabudgetar för att säkerställa att din webbplats uppfyller dina prestandamål. Assertions är regler som kontrollerar specifika prestandamått (t.ex. First Contentful Paint, Largest Contentful Paint) mot fördefinierade trösklar. Prestandabudgetar definierar acceptabla gränser för olika prestandamått.
Här är ett exempel på hur man konfigurerar assertions i din lighthouserc.js-fil:
module.exports = {
ci: {
collect: {
url: ['http://localhost:3000']
},
assert: {
assertions: {
'first-contentful-paint': ['warn', { maxNumericValue: 2000 }],
'largest-contentful-paint': ['warn', { maxNumericValue: 2500 }],
'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
'total-blocking-time': ['warn', { maxNumericValue: 500 }],
'categories:performance': ['warn', { minScore: 0.9 }],
'categories:accessibility': ['error', { minScore: 0.8 }],
}
},
upload: {
target: 'temporary-public-storage'
},
}
};
Förklaring:
first-contentful-paint: Sätter en varningströskel för First Contentful Paint (FCP) på 2000 ms.largest-contentful-paint: Sätter en varningströskel för Largest Contentful Paint (LCP) på 2500 ms.cumulative-layout-shift: Sätter en varningströskel för Cumulative Layout Shift (CLS) på 0.1.total-blocking-time: Sätter en varningströskel för Total Blocking Time (TBT) på 500 ms.categories:performance: Sätter en varningströskel för den övergripande prestandakategorins poäng på 0.9.categories:accessibility: Sätter en feltröskel för den övergripande tillgänglighetskategorins poäng på 0.8.
Assertions-nivåer:
off: Inaktiverar assertionen.warn: Visar en varning om assertionen misslyckas.error: Får Lighthouse CI-körningen att misslyckas om assertionen misslyckas.
Anpassa assertions:
Du kan anpassa assertions för att möta dina specifika behov. Till exempel kanske du vill sätta striktare trösklar för kritiska prestandamått eller inaktivera assertions som inte är relevanta för din applikation.
Välja ett uppladdningsmål för Lighthouse CI
Alternativet upload.target i din lighthouserc.js-fil specificerar var Lighthouse CI-resultaten ska laddas upp. Målet temporary-public-storage är bekvämt för testning och utveckling, men det är inte lämpligt för produktionsmiljöer eftersom datan inte är beständig.
Här är några alternativa uppladdningsmål:
- Lighthouse CI Server: Den rekommenderade metoden för produktionsmiljöer är att använda Lighthouse CI-servern. Lighthouse CI-servern erbjuder en beständig lagringslösning för dina Lighthouse CI-resultat, samt ett användargränssnitt för att visa och analysera din data. Den kan distribueras till olika molnleverantörer eller hostas på din egen infrastruktur.
- Google Cloud Storage: Du kan ladda upp dina Lighthouse CI-resultat till en Google Cloud Storage-bucket. Detta är en kostnadseffektiv och skalbar lösning för att lagra din data.
- Amazon S3: I likhet med Google Cloud Storage kan du ladda upp dina Lighthouse CI-resultat till en Amazon S3-bucket.
Konfigurera Lighthouse CI-servern:
Att sätta upp Lighthouse CI-servern innebär följande steg:
- Installera Lighthouse CI-servern: Du kan installera Lighthouse CI-servern med npm eller yarn:
- Konfigurera databasen: Lighthouse CI-servern kräver en databas för att lagra sin data. Du kan använda en mängd olika databaser, inklusive PostgreSQL, MySQL och SQLite. Konfigurera databasanslutningsinställningarna i
.env-filen. - Starta Lighthouse CI-servern: Starta Lighthouse CI-servern med kommandot
lhci server. - Konfigurera Lighthouse CI CLI att använda servern: Uppdatera din
lighthouserc.js-fil för att använda Lighthouse CI-servern som uppladdningsmål:
npm install -g @lhci/server
yarn global add @lhci/server
module.exports = {
ci: {
collect: {
url: ['http://localhost:3000']
},
assert: {
preset: 'lighthouse:recommended'
},
upload: {
target: 'lhci',
serverBaseUrl: 'http://your-lhci-server.com',
token: 'YOUR_LHCI_TOKEN'
},
}
};
Ersätt http://your-lhci-server.com med webbadressen till din Lighthouse CI-server och YOUR_LHCI_TOKEN med åtkomsttoken för ditt projekt.
Bästa praxis för att använda Lighthouse CI
För att få ut det mesta av Lighthouse CI, följ dessa bästa praxis:
- Kör Lighthouse CI vid varje kodändring: Integrera Lighthouse CI i din CI/CD-pipeline för att köra granskningar vid varje kodändring. Detta hjälper dig att fånga prestandaregressioner tidigt.
- Sätt prestandabudgetar: Definiera prestandabudgetar för att säkerställa att din webbplats håller sig inom acceptabla prestandatrösklar.
- Övervaka prestandatrender: Spåra din webbplats prestanda över tid för att identifiera trender och mäta effekten av dina optimeringar.
- Prioritera optimeringsinsatser: Fokusera på att optimera de mest kritiska prestandamåtten först.
- Använd verklig data: Använd data från verkligheten för att informera dina optimeringsinsatser. Du kan till exempel använda Google Analytics för att identifiera de sidor som oftast besöks av dina användare.
- Testa på riktiga enheter: Testa din webbplats på riktiga enheter för att säkerställa att den presterar bra under verkliga förhållanden.
- Granska Lighthouse CI-resultat regelbundet: Se till att regelbundet granska Lighthouse CI-resultaten och vidta åtgärder för att åtgärda eventuella prestandaproblem som identifieras.
- Optimera bilder: Optimera dina bilder för att minska deras filstorlek utan att kompromissa med kvaliteten. Verktyg som ImageOptim (macOS), TinyPNG och ImageKit är användbara för detta.
- Minifiera CSS och JavaScript: Minifiera dina CSS- och JavaScript-filer för att minska deras storlek. Verktyg som UglifyJS och CSSNano kan hjälpa till med detta.
- Utnyttja webbläsarcache: Utnyttja webbläsarens cache för att minska antalet anrop som din webbplats gör till servern.
- Använd ett Content Delivery Network (CDN): Använd ett CDN för att distribuera din webbplats innehåll till servrar runt om i världen. Detta kan förbättra laddningstiderna för användare på olika geografiska platser. Tjänster som Cloudflare och Amazon CloudFront är populära CDN:er.
- Skjut upp bilder utanför skärmen: Implementera lazy loading för bilder som inte är omedelbart synliga på skärmen. Detta kan avsevärt förbättra den initiala sidladdningstiden. Attributet
loading="lazy"kan användas för enkel lazy loading. - Eliminera render-blockerande resurser: Identifiera och eliminera resurser som blockerar renderingen av din sida. Detta innebär ofta att man infogar kritisk CSS (inlining) och skjuter upp icke-kritisk CSS och JavaScript.
- Minska exekveringstiden för JavaScript: Profilera din JavaScript-kod för att identifiera och optimera långsamma funktioner. Tekniker som code splitting och tree shaking kan hjälpa till att minska mängden JavaScript som behöver laddas ner och exekveras.
Avancerade Lighthouse CI-tekniker
När du är bekväm med grunderna i Lighthouse CI kan du utforska några avancerade tekniker för att ytterligare förbättra din prestandaövervakning:
- Anpassade Lighthouse-granskningar: Du kan skapa anpassade Lighthouse-granskningar för att testa för specifika prestandaproblem som är relevanta för din applikation.
- Konfiguration av Headless Chrome: Konfigurera Headless Chrome för att använda specifika enhetsemuleringar eller nätverksstrypningsinställningar.
- Integration med övervakningsverktyg: Integrera Lighthouse CI med dina befintliga övervakningsverktyg (t.ex. New Relic, Datadog) för att få en mer heltäckande bild av din webbplats prestanda.
- Visuell regressionstestning: Kombinera Lighthouse CI med verktyg för visuell regressionstestning för att upptäcka visuella förändringar som kan påverka prestandan.
Lighthouse CI för globala målgrupper: Att tänka på för internationella webbplatser
När du använder Lighthouse CI för webbplatser som riktar sig till en global publik, tänk på följande:
- Testa från flera platser: Serverns svarstider kan variera avsevärt beroende på användarens plats. Använd ett CDN (Content Delivery Network) och överväg att köra Lighthouse CI-granskningar från olika geografiska regioner för att få en mer exakt bild av prestandan för dina internationella användare. Vissa CI/CD-leverantörer erbjuder alternativ för att specificera den geografiska platsen för runnern.
- Ta hänsyn till nätverksförhållanden: Nätverkshastigheter och latens varierar kraftigt över hela världen. Simulera olika nätverksförhållanden under dina Lighthouse CI-granskningar för att förstå hur din webbplats presterar under olika begränsningar. Lighthouse låter dig strypa nätverksanslutningen och simulera långsammare anslutningar som 3G.
- Innehållslokalisering: Se till att ditt lokaliserade innehåll är korrekt optimerat. Detta inkluderar bildoptimering för olika språk och teckenuppsättningar, samt korrekt kodning för att undvika visningsproblem.
- Inläsning av typsnitt: Optimera inläsningen av typsnitt för olika språk. Överväg att använda font-display: swap för att förhindra att text är osynlig under tiden typsnittet laddas.
- Tredjepartsskript: Var medveten om tredjepartsskript, eftersom de kan påverka prestandan avsevärt, särskilt för användare i regioner med långsammare nätverksanslutningar. Granska prestandan för tredjepartsskript regelbundet och överväg att använda asynkron inläsning eller att själv hosta kritiska skript.
- Mobiloptimering: Mobilanvändning är utbredd i många delar av världen. Se till att din webbplats är optimerad för mobila enheter och att dina Lighthouse CI-granskningar inkluderar mobilspecifika tester.
Felsökning av vanliga Lighthouse CI-problem
Här är några vanliga problem du kan stöta på när du använder Lighthouse CI och hur du felsöker dem:
- Lighthouse CI misslyckas med "Timeout"-fel: Detta kan hända om din webbplats tar för lång tid att ladda eller om Lighthouse CI inte kan ansluta till din webbplats. Prova att öka timeout-värdet i din
lighthouserc.js-fil eller kontrollera din webbplats serverloggar för fel. - Lighthouse CI rapporterar inkonsekventa resultat: Lighthouse-resultat kan variera något mellan körningar på grund av nätverksförhållanden eller andra faktorer. Kör flera granskningar för att få ett mer stabilt genomsnitt.
- Lighthouse CI misslyckas med att ladda upp resultat: Kontrollera din
upload.target-konfiguration och se till att din Lighthouse CI-server är igång och tillgänglig. Verifiera också att du har rätt åtkomsttoken konfigurerad. - Lighthouse CI rapporterar oväntade prestandaregressioner: Undersök de kodändringar som gjordes innan regressionen upptäcktes. Använd Lighthouse CI-rapporterna för att identifiera de specifika prestandamått som har försämrats och fokusera dina optimeringsinsatser på dessa områden.
Slutsats
Frontend Lighthouse CI är ett kraftfullt verktyg för kontinuerlig prestandaövervakning av webbapplikationer. Genom att integrera Lighthouse CI i din CI/CD-pipeline kan du proaktivt identifiera och åtgärda prestandaproblem, vilket säkerställer att din webbplats levererar en optimal användarupplevelse. Kom ihåg att anpassa din konfiguration, assertionsregler och testplatser för globala målgrupper för att skapa den bästa möjliga upplevelsen för användare runt om i världen.
Genom att följa stegen och bästa praxis som beskrivs i den här guiden kan du avsevärt förbättra din webbplats prestanda, minska avvisningsfrekvensen, öka konverteringsgraden och i slutändan uppnå dina affärsmål. Börja implementera Lighthouse CI idag och lås upp den fulla potentialen hos dina webbapplikationer.