Lær hvordan du implementerer Frontend Lighthouse CI for kontinuerlig ytelsesovervåking, og sikrer optimal hastighet og brukeropplevelse for dine nettapplikasjoner.
Frontend Lighthouse CI: Kontinuerlig ytelsesovervåking for nettapplikasjoner
I dagens raske digitale landskap er ytelsen til et nettsted avgjørende. Et nettsted som laster sakte eller er dårlig optimalisert kan føre til frustrerte brukere, redusert engasjement, og til slutt ha en negativ innvirkning på virksomheten din. Det er her Lighthouse CI kommer inn. Denne guiden vil veilede deg gjennom implementeringen av Lighthouse CI for kontinuerlig ytelsesovervåking, slik at du proaktivt kan identifisere og løse ytelsesflaskehalser før de påvirker brukerne dine.
Hva er Lighthouse CI?
Lighthouse CI er et åpen kildekode, automatisert verktøy for ytelsestesting som integreres sømløst i din pipeline for kontinuerlig integrasjon og kontinuerlig levering (CI/CD). Det benytter Googles revisjonsverktøy Lighthouse for å gi handlingsrettet innsikt i nettstedets ytelse, tilgjengelighet, SEO og beste praksis. Ved å innlemme Lighthouse CI i arbeidsflyten din, kan du kontinuerlig overvåke nettstedets ytelse, spore regresjoner og sikre at hver kodeendring bidrar til en bedre brukeropplevelse. Lighthouse CI er ikke knyttet til én spesifikk skyleverandør og kan brukes med forskjellige oppsett. For eksempel kan det kjøre inne i en Docker-container på tjenester som Github Actions, Jenkins, CircleCI og mange flere.
Hvorfor bruke Lighthouse CI?
Implementering av Lighthouse CI gir en rekke fordeler:
- Tidlig oppdagelse av ytelsesregresjoner: Identifiser ytelsesproblemer introdusert av nye kodeendringer før de når produksjon.
- Forbedret nettstedytelse: Få handlingsrettet innsikt i hvordan du kan optimalisere nettstedet ditt for hastighet, tilgjengelighet og SEO.
- Forbedret brukeropplevelse: Lever et raskere og mer brukervennlig nettsted som holder besøkende engasjert.
- Redusert fluktfrekvens: Optimaliser lastetider for å redusere brukerfrustrasjon og forhindre dem i å forlate nettstedet ditt.
- Økte konverteringsrater: Et raskere nettsted fører vanligvis til høyere konverteringsrater og forbedrede forretningsresultater.
- Automatisert ytelsestesting: Integrer ytelsestesting i din CI/CD-pipeline for kontinuerlig overvåking.
- Datadrevet beslutningstaking: Baser optimaliseringsarbeidet ditt på konkrete ytelsesmålinger og innsikt.
- Langsiktig ytelsessporing: Overvåk nettstedets ytelse over tid for å identifisere trender og måle effekten av optimaliseringene dine.
Nøkkelfunksjoner i Lighthouse CI
- Automatiserte revisjoner: Kjører Lighthouse-revisjoner automatisk som en del av din CI/CD-prosess.
- Ytelsesbudsjetter: Sett ytelsesbudsjetter for å sikre at nettstedet ditt holder seg innenfor akseptable ytelsesterskler.
- Regresjonssporing: Sporer ytelsesregresjoner over tid, slik at du kan identifisere kodeendringene som forårsaket dem.
- Handlingsrettet innsikt: Gir detaljerte rapporter med handlingsrettede anbefalinger om hvordan du kan forbedre nettstedets ytelse.
- Tilpassbar konfigurasjon: Konfigurer Lighthouse CI for å møte dine spesifikke behov og krav.
- Integrasjon med CI/CD-verktøy: Integreres sømløst med populære CI/CD-verktøy som Jenkins, CircleCI, GitHub Actions og GitLab CI.
- Åpen kildekode: Lighthouse CI er et åpen kildekode-prosjekt, noe som betyr at det er gratis å bruke og endre.
Sette opp Lighthouse CI: En steg-for-steg guide
Her er en omfattende guide for å sette opp Lighthouse CI for prosjektet ditt:
1. Installer Lighthouse CI CLI
Først må du installere Lighthouse CI kommandolinjegrensesnitt (CLI) globalt ved hjelp av npm eller yarn:
npm install -g @lhci/cli
yarn global add @lhci/cli
2. Konfigurer Lighthouse CI
Opprett en lighthouserc.js-fil i roten av prosjektet ditt for å konfigurere Lighthouse CI. Denne filen definerer URL-ene som skal revideres, påstandsreglene ('assertion rules') og andre konfigurasjonsalternativer.
Her er et grunnleggende 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: Spesifiserer URL-ene som skal revideres av Lighthouse. I dette eksempelet reviderer vi hjemmesiden og "om oss"-siden til et nettsted som kjører pålocalhost:3000. Husk å erstatte dette med URL-ene som er relevante for *ditt* prosjekt, som kan inkludere staging-miljøer.assert.preset: Brukerlighthouse:recommended-forhåndsinnstillingen, som anvender et sett med forhåndsdefinerte påstander basert på Lighthouse sine anbefalinger. Dette er et godt utgangspunkt, men du kan tilpasse disse påstandene etter behov.upload.target: Konfigurerer hvor Lighthouse CI-resultatene skal lastes opp.temporary-public-storageer nyttig for testing og utvikling, men for produksjonsmiljøer vil du vanligvis bruke en mer permanent lagringsløsning (diskutert senere).
3. Integrer Lighthouse CI i din CI/CD-pipeline
Neste steg er å integrere Lighthouse CI i din CI/CD-pipeline. De nøyaktige trinnene vil variere avhengig av din CI/CD-leverandør, men den generelle prosessen innebærer å legge til et skript i CI/CD-konfigurasjonen din som kjører Lighthouse CI-kommandoene.
Eksempel med GitHub Actions:
Opprett en fil med navnet .github/workflows/lighthouse-ci.yml i ditt repository med følgende innhold:
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: Utløser arbeidsflyten ved 'push' tilmain-grenen.on.pull_request: Utløser arbeidsflyten ved 'pull requests'.jobs.lighthouse.runs-on: Spesifiserer operativsystemet som skal brukes for jobben (Ubuntu i dette tilfellet).steps: Definerer trinnene som skal utføres i jobben:actions/checkout@v3: Sjekker ut repositoryet.actions/setup-node@v3: Setter opp Node.js.npm ci: Installerer avhengigheter.Run Lighthouse CI: Kjører Lighthouse CI-kommandoene:npm install -g @lhci/cli@0.11.x: Installerer Lighthouse CI CLI globalt. *Viktig*: Det anbefales alltid å låse en spesifikk versjon.lhci autorun: Kjører Lighthouse CI i "autorun"-modus, som automatisk samler inn revisjoner, verifiserer ytelsesbudsjetter og laster opp resultatene.
Viktige hensyn for CI/CD-integrasjon:
- Serveroppstart: Før du kjører
lhci autorun, sørg for at webserveren din kjører (f.eks.npm start). Du må kanskje legge til et trinn i CI/CD-konfigurasjonen for å starte serveren din i bakgrunnen. - Databasemigreringer: Hvis applikasjonen din er avhengig av en database, sørg for at databasemigreringer kjøres som en del av CI/CD-prosessen *før* du kjører Lighthouse CI.
- Miljøvariabler: Hvis applikasjonen din krever miljøvariabler, sørg for at disse er riktig konfigurert i CI/CD-miljøet ditt.
4. Kjør Lighthouse CI
Nå, hver gang du pusher endringer til main-grenen eller oppretter en 'pull request', vil Lighthouse CI-arbeidsflyten kjøre automatisk. Resultatene vil være tilgjengelige i GitHub Actions-grensesnittet.
5. Se Lighthouse CI-resultater
Lighthouse CI-resultatene vil bli lastet opp til stedet spesifisert i lighthouserc.js-filen din (f.eks. temporary-public-storage). Du kan få tilgang til disse resultatene ved å følge lenken som er oppgitt i CI/CD-utdataene. Disse resultatene gir detaljert informasjon om nettstedets ytelse, tilgjengelighet, SEO og beste praksis.
Konfigurere 'assertions' og ytelsesbudsjetter
Lighthouse CI lar deg konfigurere 'assertions' (påstander) og ytelsesbudsjetter for å sikre at nettstedet ditt oppfyller ytelsesmålene dine. Påstander er regler som sjekker spesifikke ytelsesmålinger (f.eks. First Contentful Paint, Largest Contentful Paint) mot forhåndsdefinerte terskler. Ytelsesbudsjetter definerer akseptable grenser for ulike ytelsesmålinger.
Her er et eksempel på hvordan du konfigurerer påstander 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: Setter en advarselsterskel for First Contentful Paint (FCP) på 2000 ms.largest-contentful-paint: Setter en advarselsterskel for Largest Contentful Paint (LCP) på 2500 ms.cumulative-layout-shift: Setter en advarselsterskel for Cumulative Layout Shift (CLS) på 0.1.total-blocking-time: Setter en advarselsterskel for Total Blocking Time (TBT) på 500 ms.categories:performance: Setter en advarselsterskel for den samlede Ytelseskategoripoengsummen på 0.9.categories:accessibility: Setter en feilterskel for den samlede Tilgjengelighetskategoripoengsummen på 0.8.
Påstandsnivåer (Assertion Levels):
off: Deaktiverer påstanden.warn: Viser en advarsel hvis påstanden mislykkes.error: Får Lighthouse CI-kjøringen til å mislykkes hvis påstanden mislykkes.
Tilpasse påstander:
Du kan tilpasse påstander for å møte dine spesifikke behov. For eksempel kan du ønske å sette strengere terskler for kritiske ytelsesmålinger eller deaktivere påstander som ikke er relevante for din applikasjon.
Velge et opplastingsmål for Lighthouse CI
upload.target-alternativet i din lighthouserc.js-fil spesifiserer hvor Lighthouse CI-resultatene skal lastes opp. temporary-public-storage-målet er praktisk for testing og utvikling, men det er ikke egnet for produksjonsmiljøer fordi dataene ikke er permanente.
Her er noen alternative opplastingsmål:
- Lighthouse CI Server: Den anbefalte tilnærmingen for produksjonsmiljøer er å bruke Lighthouse CI-serveren. Lighthouse CI-serveren gir en permanent lagringsløsning for dine Lighthouse CI-resultater, samt et brukergrensesnitt for å vise og analysere dataene dine. Den kan distribueres til ulike skyleverandører eller hostes på din egen infrastruktur.
- Google Cloud Storage: Du kan laste opp dine Lighthouse CI-resultater til en Google Cloud Storage-bøtte. Dette er en kostnadseffektiv og skalerbar løsning for å lagre dataene dine.
- Amazon S3: I likhet med Google Cloud Storage, kan du laste opp dine Lighthouse CI-resultater til en Amazon S3-bøtte.
Sette opp Lighthouse CI Server:
Å sette opp Lighthouse CI-serveren innebærer følgende trinn:
- Installer Lighthouse CI Server: Du kan installere Lighthouse CI-serveren ved hjelp av npm eller yarn:
- Konfigurer databasen: Lighthouse CI-serveren krever en database for å lagre dataene sine. Du kan bruke en rekke databaser, inkludert PostgreSQL, MySQL og SQLite. Konfigurer databasetilkoblingsinnstillingene i
.env-filen. - Start Lighthouse CI Server: Start Lighthouse CI-serveren ved hjelp av
lhci server-kommandoen. - Konfigurer Lighthouse CI CLI til å bruke serveren: Oppdater
lighthouserc.js-filen din til å bruke Lighthouse CI-serveren som opplastingsmå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'
},
}
};
Erstatt http://your-lhci-server.com med URL-en til din Lighthouse CI-server og YOUR_LHCI_TOKEN med tilgangstokenet for prosjektet ditt.
Beste praksis for bruk av Lighthouse CI
For å få mest mulig ut av Lighthouse CI, følg disse beste praksisene:
- Kjør Lighthouse CI ved hver kodeendring: Integrer Lighthouse CI i din CI/CD-pipeline for å kjøre revisjoner ved hver kodeendring. Dette vil hjelpe deg med å fange opp ytelsesregresjoner tidlig.
- Sett ytelsesbudsjetter: Definer ytelsesbudsjetter for å sikre at nettstedet ditt holder seg innenfor akseptable ytelsesterskler.
- Overvåk ytelsestrender: Spor nettstedets ytelse over tid for å identifisere trender og måle effekten av optimaliseringene dine.
- Prioriter optimaliseringsinnsatsen: Fokuser på å optimalisere de mest kritiske ytelsesmålingene først.
- Bruk virkelige data: Bruk virkelige data for å informere optimaliseringsinnsatsen din. For eksempel kan du bruke Google Analytics til å identifisere sidene som oftest besøkes av brukerne dine.
- Test på ekte enheter: Test nettstedet ditt på ekte enheter for å sikre at det yter godt under reelle forhold.
- Gå jevnlig gjennom Lighthouse CI-resultater: Sørg for å jevnlig gjennomgå Lighthouse CI-resultatene og iverksette tiltak for å løse eventuelle ytelsesproblemer som blir identifisert.
- Optimaliser bilder: Optimaliser bildene dine for å redusere filstørrelsen uten å ofre kvalitet. Verktøy som ImageOptim (macOS), TinyPNG og ImageKit er nyttige for dette.
- Minifiser CSS og JavaScript: Minifiser CSS- og JavaScript-filene dine for å redusere størrelsen. Verktøy som UglifyJS og CSSNano kan hjelpe med dette.
- Utnytt nettleser-caching: Utnytt nettleser-caching for å redusere antall forespørsler nettstedet ditt gjør til serveren.
- Bruk et innholdsleveringsnettverk (CDN): Bruk et CDN for å distribuere innholdet på nettstedet ditt til servere over hele verden. Dette kan forbedre lastetidene for brukere på forskjellige geografiske steder. Tjenester som Cloudflare og Amazon CloudFront er populære CDN-er.
- Utsett bilder utenfor skjermen ('Defer Offscreen Images'): Implementer 'lazy loading' for bilder som ikke er umiddelbart synlige på skjermen. Dette kan forbedre den innledende sidelastningstiden betydelig. Attributtet
loading="lazy"kan brukes for enkel 'lazy loading'. - Eliminer ressurskrevende ressurser ('Render-Blocking Resources'): Identifiser og eliminer ressurser som blokkerer gjengivelsen av siden din. Dette innebærer ofte å inline kritisk CSS og utsette ikke-kritisk CSS og JavaScript.
- Reduser JavaScript-kjøringstid: Profiler JavaScript-koden din for å identifisere og optimalisere funksjoner som kjører sakte. Teknikker som 'code splitting' og 'tree shaking' kan bidra til å redusere mengden JavaScript som må lastes ned og kjøres.
Avanserte Lighthouse CI-teknikker
Når du er komfortabel med det grunnleggende i Lighthouse CI, kan du utforske noen avanserte teknikker for å forbedre ytelsesovervåkingen ytterligere:
- Egendefinerte Lighthouse-revisjoner: Du kan lage egendefinerte Lighthouse-revisjoner for å teste for spesifikke ytelsesproblemer som er relevante for din applikasjon.
- Headless Chrome-konfigurasjon: Konfigurer Headless Chrome til å bruke spesifikke enhetsemuleringer eller nettverksstrupingsinnstillinger.
- Integrasjon med overvåkingsverktøy: Integrer Lighthouse CI med dine eksisterende overvåkingsverktøy (f.eks. New Relic, Datadog) for å få et mer helhetlig bilde av nettstedets ytelse.
- Visuell regresjonstesting: Kombiner Lighthouse CI med verktøy for visuell regresjonstesting for å oppdage visuelle endringer som kan påvirke ytelsen.
Lighthouse CI for globale målgrupper: Hensyn for internasjonale nettsteder
Når du bruker Lighthouse CI for nettsteder som retter seg mot globale målgrupper, bør du vurdere følgende:
- Test fra flere steder: Serversvartider kan variere betydelig basert på brukerens plassering. Bruk et CDN (Content Delivery Network) og vurder å kjøre Lighthouse CI-revisjoner fra forskjellige geografiske regioner for å få et mer nøyaktig bilde av ytelsen for dine internasjonale brukere. Noen CI/CD-leverandører tilbyr alternativer for å spesifisere den geografiske plasseringen til 'runner'-en.
- Ta hensyn til nettverksforhold: Nettverkshastigheter og latens varierer mye over hele verden. Simuler forskjellige nettverksforhold under dine Lighthouse CI-revisjoner for å forstå hvordan nettstedet ditt presterer under ulike begrensninger. Lighthouse lar deg strupe nettverkstilkoblingen, og simulere tregere tilkoblinger som 3G.
- Innholdslokalisering: Sørg for at ditt lokaliserte innhold er riktig optimalisert. Dette inkluderer bildeoptimalisering for forskjellige språk og tegnsett, og riktig koding for å unngå visningsproblemer.
- Font-innlasting: Optimaliser font-innlasting for forskjellige språk. Vurder å bruke font-display: swap for å forhindre at tekst er usynlig under font-innlasting.
- Tredjeparts-skript: Vær oppmerksom på tredjeparts-skript, da de kan påvirke ytelsen betydelig, spesielt for brukere i regioner med tregere nettverkstilkoblinger. Revider ytelsen til tredjeparts-skript regelmessig og vurder å bruke asynkron innlasting eller selv-hoste kritiske skript.
- Mobiloptimalisering: Mobilbruk er utbredt i mange deler av verden. Sørg for at nettstedet ditt er optimalisert for mobile enheter og at dine Lighthouse CI-revisjoner inkluderer mobilspesifikke tester.
Feilsøking av vanlige Lighthouse CI-problemer
Her er noen vanlige problemer du kan støte på når du bruker Lighthouse CI og hvordan du feilsøker dem:
- Lighthouse CI mislykkes med "Timeout"-feil: Dette kan skje hvis nettstedet ditt tar for lang tid å laste, eller hvis Lighthouse CI ikke klarer å koble til nettstedet ditt. Prøv å øke tidsavbruddsverdien i din
lighthouserc.js-fil eller sjekk serverloggene på nettstedet ditt for feil. - Lighthouse CI rapporterer inkonsekvente resultater: Lighthouse-resultater kan variere noe mellom kjøringer på grunn av nettverksforhold eller andre faktorer. Kjør flere revisjoner for å få et mer stabilt gjennomsnitt.
- Lighthouse CI klarer ikke å laste opp resultater: Sjekk din
upload.target-konfigurasjon og sørg for at din Lighthouse CI-server kjører og er tilgjengelig. Verifiser også at du har konfigurert riktig tilgangstoken. - Lighthouse CI rapporterer uventede ytelsesregresjoner: Undersøk kodeendringene som ble gjort før regresjonen ble oppdaget. Bruk Lighthouse CI-rapportene til å identifisere de spesifikke ytelsesmålingene som har forverret seg, og fokuser optimaliseringsinnsatsen din på disse områdene.
Konklusjon
Frontend Lighthouse CI er et kraftig verktøy for kontinuerlig ytelsesovervåking av nettapplikasjoner. Ved å integrere Lighthouse CI i din CI/CD-pipeline kan du proaktivt identifisere og løse ytelsesproblemer, og dermed sikre at nettstedet ditt leverer en optimal brukeropplevelse. Husk å tilpasse oppsettet, påstandsreglene og testlokasjonene for globale målgrupper for å skape den best mulige opplevelsen for brukere over hele verden.
Ved å følge trinnene og de beste praksisene som er skissert i denne guiden, kan du forbedre nettstedets ytelse betydelig, redusere fluktfrekvensen, øke konverteringsratene og til slutt nå dine forretningsmål. Begynn å implementere Lighthouse CI i dag og lås opp det fulle potensialet til dine nettapplikasjoner.