Lær, hvordan du implementerer Frontend Lighthouse CI for kontinuerlig ydeevneovervågning, der sikrer optimal hastighed og brugeroplevelse for dine webapplikationer.
Frontend Lighthouse CI: Kontinuerlig Ydeevneovervågning for Webapplikationer
I nutidens hurtige digitale landskab er et websites ydeevne altafgørende. Et langsomt eller dårligt optimeret website kan føre til frustrerede brugere, nedsat engagement og i sidste ende en negativ indvirkning på din virksomhed. Det er her, Lighthouse CI kommer ind i billedet. Denne guide vil føre dig igennem implementeringen af Lighthouse CI til kontinuerlig ydeevneovervågning, hvilket giver dig mulighed for proaktivt at identificere og løse ydeevneflaskehalse, før de påvirker dine brugere.
Hvad er Lighthouse CI?
Lighthouse CI er et open-source, automatiseret ydeevnetestværktøj, der problemfrit integreres i din Continuous Integration og Continuous Delivery (CI/CD) pipeline. Det udnytter Googles Lighthouse-revisionsværktøj til at levere handlingsorienterede indsigter i dit websites ydeevne, tilgængelighed, SEO og bedste praksis. Ved at inkorporere Lighthouse CI i din arbejdsgang kan du kontinuerligt overvåge dit websites ydeevne, spore forringelser og sikre, at enhver kodeændring bidrager til en bedre brugeroplevelse. Lighthouse CI er ikke bundet til en specifik cloud-udbyder og kan bruges med forskellige opsætninger. For eksempel kan det køre i en Docker-container på tjenester som Github Actions, Jenkins, CircleCI og mange flere.
Hvorfor bruge Lighthouse CI?
Implementering af Lighthouse CI tilbyder et væld af fordele:
- Tidlig Opdagelse af Ydeevneforringelser: Identificer ydeevneproblemer introduceret af nye kodeændringer, før de når produktion.
- Forbedret Website-ydeevne: Få handlingsorienterede indsigter i, hvordan du optimerer dit website for hastighed, tilgængelighed og SEO.
- Forbedret Brugeroplevelse: Lever et hurtigere og mere brugervenligt website, der fastholder besøgendes engagement.
- Reduceret Afvisningsprocent: Optimer indlæsningstider for at reducere brugerfrustration og forhindre dem i at forlade dit site.
- Øgede Konverteringsrater: Et hurtigere website fører typisk til højere konverteringsrater og forbedrede forretningsresultater.
- Automatiseret Ydeevnetest: Integrer ydeevnetest i din CI/CD-pipeline for kontinuerlig overvågning.
- Datadrevet Beslutningstagning: Baser dine optimeringsindsatser på konkrete ydeevnemålinger og indsigter.
- Langsigtet Ydeevnesporing: Overvåg dit websites ydeevne over tid for at identificere tendenser og måle effekten af dine optimeringer.
Nøglefunktioner i Lighthouse CI
- Automatiserede Audits: Kører Lighthouse-audits automatisk som en del af din CI/CD-proces.
- Ydeevnebudgetter: Sæt ydeevnebudgetter for at sikre, at dit website holder sig inden for acceptable ydeevnegrænser.
- Sporing af Forringelser: Sporer ydeevneforringelser over tid, hvilket giver dig mulighed for at identificere de kodeændringer, der forårsagede dem.
- Handlingsorienterede Indsigter: Leverer detaljerede rapporter med handlingsorienterede anbefalinger til, hvordan du forbedrer dit websites ydeevne.
- Tilpasselig Konfiguration: Konfigurer Lighthouse CI til at opfylde dine specifikke behov og krav.
- Integration med CI/CD-værktøjer: Integrerer problemfrit med populære CI/CD-værktøjer som Jenkins, CircleCI, GitHub Actions og GitLab CI.
- Open Source: Lighthouse CI er et open-source projekt, hvilket betyder, at det er gratis at bruge og ændre.
Opsætning af Lighthouse CI: En Trin-for-Trin Guide
Her er en omfattende guide til opsætning af Lighthouse CI for dit projekt:
1. Installer Lighthouse CI CLI
Først skal du installere Lighthouse CI command-line interface (CLI) globalt ved hjælp af npm eller yarn:
npm install -g @lhci/cli
yarn global add @lhci/cli
2. Konfigurer Lighthouse CI
Opret en lighthouserc.js-fil i roden af dit projekt for at konfigurere Lighthouse CI. Denne fil definerer de URL'er, der skal revideres, assertionsreglerne og andre konfigurationsmuligheder.
Her er et grundlæggende eksempel 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'
},
},
};
Forklaring:
collect.url: Angiver de URL'er, der skal revideres af Lighthouse. I dette eksempel reviderer vi startsiden og "om os"-siden på et website, der kører pålocalhost:3000. Husk at erstatte dette med de URL'er, der er relevante for *dit* projekt, hvilket kan inkludere staging-miljøer.assert.preset: Brugerlighthouse:recommended-forudindstillingen, som anvender et sæt foruddefinerede assertions baseret på Lighthouse's anbefalinger. Dette er et godt udgangspunkt, men du kan tilpasse disse assertions efter behov.upload.target: Konfigurerer, hvor Lighthouse CI-resultaterne vil blive uploadet.temporary-public-storageer nyttigt til test og udvikling, men for produktionsmiljøer vil du typisk ønske at bruge en mere vedvarende lagringsløsning (diskuteres senere).
3. Integrer Lighthouse CI i din CI/CD Pipeline
Det næste skridt er at integrere Lighthouse CI i din CI/CD-pipeline. De nøjagtige trin vil variere afhængigt af din CI/CD-udbyder, men den generelle proces indebærer at tilføje et script til din CI/CD-konfiguration, der kører Lighthouse CI-kommandoerne.
Eksempel med GitHub Actions:
Opret en fil ved navn .github/workflows/lighthouse-ci.yml i dit repository med følgende indhold:
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
Forklaring:
on.push.branches: Udløser workflowet ved pushes tilmain-branchen.on.pull_request: Udløser workflowet ved pull requests.jobs.lighthouse.runs-on: Angiver det operativsystem, der skal bruges til jobbet (Ubuntu i dette tilfælde).steps: Definerer de trin, der skal udføres i jobbet:actions/checkout@v3: Tjekker repository'et ud.actions/setup-node@v3: Opsætter Node.js.npm ci: Installerer afhængigheder.Run Lighthouse CI: Kører Lighthouse CI-kommandoerne:npm install -g @lhci/cli@0.11.x: Installerer Lighthouse CI CLI globalt. *Vigtigt*: Det anbefales altid at låse en specifik version.lhci autorun: Kører Lighthouse CI i "autorun"-tilstand, som automatisk indsamler audits, hævder ydeevnebudgetter og uploader resultaterne.
Vigtige Overvejelser for CI/CD-Integration:
- Serveropstart: Før du kører
lhci autorun, skal du sikre dig, at din webserver kører (f.eks.npm start). Du skal muligvis tilføje et trin til din CI/CD-konfiguration for at starte din server i baggrunden. - Databasemigreringer: Hvis din applikation er afhængig af en database, skal du sikre, at databasemigreringer køres som en del af din CI/CD-proces, *før* du kører Lighthouse CI.
- Miljøvariabler: Hvis din applikation kræver miljøvariabler, skal du sikre, at disse er korrekt konfigureret i dit CI/CD-miljø.
4. Kør Lighthouse CI
Nu, hver gang du pusher ændringer til main-branchen eller opretter en pull request, vil Lighthouse CI-workflowet køre automatisk. Resultaterne vil være tilgængelige i GitHub Actions-interfacet.
5. Se Lighthouse CI Resultater
Lighthouse CI-resultaterne vil blive uploadet til den placering, der er angivet i din lighthouserc.js-fil (f.eks. temporary-public-storage). Du kan få adgang til disse resultater ved at følge linket i CI/CD-outputtet. Disse resultater giver detaljerede oplysninger om dit websites ydeevne, tilgængelighed, SEO og bedste praksis.
Konfigurering af Assertions og Ydeevnebudgetter
Lighthouse CI giver dig mulighed for at konfigurere assertions og ydeevnebudgetter for at sikre, at dit website opfylder dine ydeevnemål. Assertions er regler, der kontrollerer specifikke ydeevnemålinger (f.eks. First Contentful Paint, Largest Contentful Paint) mod foruddefinerede tærskler. Ydeevnebudgetter definerer acceptable grænser for forskellige ydeevnemålinger.
Her er et eksempel på, hvordan du konfigurerer 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'
},
}
};
Forklaring:
first-contentful-paint: Sætter en advarselstærskel for First Contentful Paint (FCP) på 2000 ms.largest-contentful-paint: Sætter en advarselstærskel for Largest Contentful Paint (LCP) på 2500 ms.cumulative-layout-shift: Sætter en advarselstærskel for Cumulative Layout Shift (CLS) på 0.1.total-blocking-time: Sætter en advarselstærskel for Total Blocking Time (TBT) på 500 ms.categories:performance: Sætter en advarselstærskel for den samlede Performance-kategoriscore på 0.9.categories:accessibility: Sætter en fejltærskel for den samlede Accessibility-kategoriscore på 0.8.
Assertion-niveauer:
off: Deaktiverer assertionen.warn: Viser en advarsel, hvis assertionen fejler.error: Får Lighthouse CI-kørslen til at fejle, hvis assertionen fejler.
Tilpasning af Assertions:
Du kan tilpasse assertions til at opfylde dine specifikke behov. For eksempel kan du ønske at sætte strengere tærskler for kritiske ydeevnemålinger eller deaktivere assertions, der ikke er relevante for din applikation.
Valg af et Lighthouse CI Upload-Mål
Indstillingen upload.target i din lighthouserc.js-fil angiver, hvor Lighthouse CI-resultaterne vil blive uploadet. Målet temporary-public-storage er praktisk til test og udvikling, men det er ikke egnet til produktionsmiljøer, fordi dataene ikke er vedvarende.
Her er nogle alternative upload-mål:
- Lighthouse CI Server: Den anbefalede tilgang til produktionsmiljøer er at bruge Lighthouse CI-serveren. Lighthouse CI-serveren giver en vedvarende lagringsløsning til dine Lighthouse CI-resultater samt en brugergrænseflade til visning og analyse af dine data. Den kan implementeres hos forskellige cloud-udbydere eller hostes på din egen infrastruktur.
- Google Cloud Storage: Du kan uploade dine Lighthouse CI-resultater til en Google Cloud Storage-bucket. Dette er en omkostningseffektiv og skalerbar løsning til lagring af dine data.
- Amazon S3: Ligesom Google Cloud Storage kan du uploade dine Lighthouse CI-resultater til en Amazon S3-bucket.
Opsætning af Lighthouse CI Server:
Opsætning af Lighthouse CI-serveren involverer følgende trin:
- Installer Lighthouse CI Server: Du kan installere Lighthouse CI-serveren ved hjælp af npm eller yarn:
- Konfigurer Databasen: Lighthouse CI-serveren kræver en database til at gemme sine data. Du kan bruge en række databaser, herunder PostgreSQL, MySQL og SQLite. Konfigurer databaseforbindelsesindstillingerne i
.env-filen. - Start Lighthouse CI Server: Start Lighthouse CI-serveren ved hjælp af
lhci server-kommandoen. - Konfigurer Lighthouse CI CLI til at bruge Serveren: Opdater din
lighthouserc.js-fil til at bruge Lighthouse CI-serveren som upload-må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'
},
}
};
Erstat http://your-lhci-server.com med URL'en til din Lighthouse CI-server og YOUR_LHCI_TOKEN med adgangstokenet til dit projekt.
Bedste Praksis for Brug af Lighthouse CI
For at få mest muligt ud af Lighthouse CI, følg disse bedste praksis:
- Kør Lighthouse CI ved Hver Kodeændring: Integrer Lighthouse CI i din CI/CD-pipeline for at køre audits ved hver kodeændring. Dette vil hjælpe dig med at fange ydeevneforringelser tidligt.
- Sæt Ydeevnebudgetter: Definer ydeevnebudgetter for at sikre, at dit website holder sig inden for acceptable ydeevnegrænser.
- Overvåg Ydeevnetendenser: Spor dit websites ydeevne over tid for at identificere tendenser og måle effekten af dine optimeringer.
- Prioriter Optimeringsindsatser: Fokuser på at optimere de mest kritiske ydeevnemålinger først.
- Brug Data fra den Virkelige Verden: Brug data fra den virkelige verden til at informere dine optimeringsindsatser. For eksempel kan du bruge Google Analytics til at identificere de sider, der oftest besøges af dine brugere.
- Test på Rigtige Enheder: Test dit website på rigtige enheder for at sikre, at det fungerer godt under virkelige forhold.
- Gennemgå Regelmæssigt Lighthouse CI Resultater: Sørg for regelmæssigt at gennemgå Lighthouse CI-resultaterne og handle for at løse eventuelle ydeevneproblemer, der identificeres.
- Optimer Billeder: Optimer dine billeder for at reducere deres filstørrelse uden at gå på kompromis med kvaliteten. Værktøjer som ImageOptim (macOS), TinyPNG og ImageKit er nyttige til dette.
- Minificer CSS og JavaScript: Minificer dine CSS- og JavaScript-filer for at reducere deres størrelse. Værktøjer som UglifyJS og CSSNano kan hjælpe med dette.
- Udnyt Browser Caching: Udnyt browser caching for at reducere antallet af anmodninger, dit website sender til serveren.
- Brug et Content Delivery Network (CDN): Brug et CDN til at distribuere dit websites indhold til servere over hele verden. Dette kan forbedre indlæsningstider for brugere i forskellige geografiske placeringer. Tjenester som Cloudflare og Amazon CloudFront er populære CDN'er.
- Udskyd Offscreen-Billeder: Implementer lazy loading for billeder, der ikke er umiddelbart synlige på skærmen. Dette kan forbedre den indledende sideindlæsningstid betydeligt. Attributten
loading="lazy"kan bruges til simpel lazy loading. - Eliminer Render-Blokerende Ressourcer: Identificer og eliminer ressourcer, der blokerer gengivelsen af din side. Dette indebærer ofte at inline kritisk CSS og udskyde ikke-kritisk CSS og JavaScript.
- Reducer JavaScript-Udførelsestid: Profiler din JavaScript-kode for at identificere og optimere langsomtkørende funktioner. Teknikker som code splitting og tree shaking kan hjælpe med at reducere mængden af JavaScript, der skal downloades og udføres.
Avancerede Lighthouse CI-Teknikker
Når du er fortrolig med det grundlæggende i Lighthouse CI, kan du udforske nogle avancerede teknikker for yderligere at forbedre din ydeevneovervågning:
- Brugerdefinerede Lighthouse Audits: Du kan oprette brugerdefinerede Lighthouse-audits for at teste for specifikke ydeevneproblemer, der er relevante for din applikation.
- Headless Chrome Konfiguration: Konfigurer Headless Chrome til at bruge specifikke enhedsemuleringer eller netværksbegrænsningsindstillinger.
- Integration med Overvågningsværktøjer: Integrer Lighthouse CI med dine eksisterende overvågningsværktøjer (f.eks. New Relic, Datadog) for at få et mere omfattende billede af dit websites ydeevne.
- Visuel Regressionstest: Kombiner Lighthouse CI med visuelle regressionstestværktøjer for at opdage visuelle ændringer, der kan påvirke ydeevnen.
Lighthouse CI for Globale Målgrupper: Overvejelser for Internationale Websites
Når du bruger Lighthouse CI til websites, der henvender sig til globale målgrupper, skal du overveje følgende:
- Test fra Flere Lokationer: Serverens svartider kan variere betydeligt baseret på brugerens placering. Brug et CDN (Content Delivery Network) og overvej at køre Lighthouse CI-audits fra forskellige geografiske regioner for at få et mere præcist billede af ydeevnen for dine internationale brugere. Nogle CI/CD-udbydere tilbyder muligheder for at specificere den geografiske placering af runner'en.
- Tag Højde for Netværksforhold: Netværkshastigheder og latens varierer meget over hele kloden. Simuler forskellige netværksforhold under dine Lighthouse CI-audits for at forstå, hvordan dit website klarer sig under forskellige begrænsninger. Lighthouse giver dig mulighed for at begrænse netværksforbindelsen og simulere langsommere forbindelser som 3G.
- Indholdslokalisering: Sørg for, at dit lokaliserede indhold er korrekt optimeret. Dette inkluderer billedoptimering for forskellige sprog og tegnsæt samt korrekt kodning for at undgå visningsproblemer.
- Indlæsning af Skrifttyper: Optimer indlæsning af skrifttyper for forskellige sprog. Overvej at bruge font-display: swap for at forhindre, at tekst er usynlig under indlæsning af skrifttyper.
- Tredjeparts-Scripts: Vær opmærksom på tredjeparts-scripts, da de kan have en betydelig indvirkning på ydeevnen, især for brugere i regioner med langsommere netværksforbindelser. Revider ydeevnen af tredjeparts-scripts regelmæssigt og overvej at bruge asynkron indlæsning eller selv-hoste kritiske scripts.
- Mobiloptimering: Mobilbrug er udbredt i mange dele af verden. Sørg for, at dit website er optimeret til mobile enheder, og at dine Lighthouse CI-audits inkluderer mobil-specifikke tests.
Fejlfinding af Almindelige Lighthouse CI-Problemer
Her er nogle almindelige problemer, du kan støde på, når du bruger Lighthouse CI, og hvordan du fejlfinder dem:
- Lighthouse CI Fejler med "Timeout"-Fejl: Dette kan ske, hvis dit website tager for lang tid at indlæse, eller hvis Lighthouse CI ikke kan oprette forbindelse til dit website. Prøv at øge timeout-værdien i din
lighthouserc.js-fil eller tjek dit websites serverlogs for fejl. - Lighthouse CI Rapporterer Inkonsistente Resultater: Lighthouse-resultater kan variere en smule mellem kørsler på grund af netværksforhold eller andre faktorer. Kør flere audits for at få et mere stabilt gennemsnit.
- Lighthouse CI Kan Ikke Uploade Resultater: Tjek din
upload.target-konfiguration og sørg for, at din Lighthouse CI-server kører og er tilgængelig. Verificer også, at du har det korrekte adgangstoken konfigureret. - Lighthouse CI Rapporterer Uventede Ydeevneforringelser: Undersøg de kodeændringer, der blev foretaget, før forringelsen blev opdaget. Brug Lighthouse CI-rapporterne til at identificere de specifikke ydeevnemålinger, der er forringet, og fokuser dine optimeringsindsatser på disse områder.
Konklusion
Frontend Lighthouse CI er et kraftfuldt værktøj til kontinuerlig ydeevneovervågning af webapplikationer. Ved at integrere Lighthouse CI i din CI/CD-pipeline kan du proaktivt identificere og løse ydeevneproblemer og sikre, at dit website leverer en optimal brugeroplevelse. Husk at tilpasse din opsætning, assertionsregler og testlokationer for globale målgrupper for at skabe den bedst mulige oplevelse for brugere over hele verden.
Ved at følge trinene og de bedste praksis, der er beskrevet i denne guide, kan du markant forbedre dit websites ydeevne, reducere afvisningsprocenter, øge konverteringsrater og i sidste ende nå dine forretningsmål. Begynd at implementere Lighthouse CI i dag og frigør det fulde potentiale i dine webapplikationer.