Leer hoe u Frontend Lighthouse CI implementeert voor continue prestatiemonitoring, en zo een optimale snelheid en gebruikerservaring voor uw webapplicaties garandeert.
Frontend Lighthouse CI: Continue Prestatiemonitoring voor Webapplicaties
In het snelle digitale landschap van vandaag de dag zijn de prestaties van een website van het allergrootste belang. Een traag ladende of slecht geoptimaliseerde website kan leiden tot gefrustreerde gebruikers, verminderde betrokkenheid en uiteindelijk een negatieve impact op uw bedrijf. Dat is waar Lighthouse CI om de hoek komt kijken. Deze gids leidt u door de implementatie van Lighthouse CI voor continue prestatiemonitoring, zodat u proactief prestatieknelpunten kunt identificeren en aanpakken voordat ze uw gebruikers beïnvloeden.
Wat is Lighthouse CI?
Lighthouse CI is een open-source, geautomatiseerde tool voor prestatietesten die naadloos integreert in uw Continuous Integration en Continuous Delivery (CI/CD) pipeline. Het maakt gebruik van de Lighthouse-auditingtool van Google om bruikbare inzichten te bieden in de prestaties, toegankelijkheid, SEO en best practices van uw website. Door Lighthouse CI in uw workflow op te nemen, kunt u continu de prestaties van uw website monitoren, regressies volgen en ervoor zorgen dat elke codewijziging bijdraagt aan een betere gebruikerservaring. Lighthouse CI is niet gebonden aan één specifieke cloudprovider en kan worden gebruikt met verschillende setups. Het kan bijvoorbeeld draaien in een Docker-container op diensten zoals Github Actions, Jenkins, CircleCI en vele andere.
Waarom Lighthouse CI gebruiken?
Het implementeren van Lighthouse CI biedt een veelvoud aan voordelen:
- Vroege detectie van prestatieregressies: Identificeer prestatieproblemen die door nieuwe codewijzigingen worden geïntroduceerd voordat ze de productie bereiken.
- Verbeterde websiteprestaties: Krijg bruikbare inzichten over hoe u uw website kunt optimaliseren voor snelheid, toegankelijkheid en SEO.
- Verbeterde gebruikerservaring: Lever een snellere en gebruiksvriendelijkere website die bezoekers betrokken houdt.
- Verlaagd bouncepercentage: Optimaliseer laadtijden om frustratie bij gebruikers te verminderen en te voorkomen dat ze uw site verlaten.
- Verhoogde conversieratio's: Een snellere website leidt doorgaans tot hogere conversieratio's en betere bedrijfsresultaten.
- Geautomatiseerde prestatietesten: Integreer prestatietesten in uw CI/CD-pipeline voor continue monitoring.
- Data-gedreven besluitvorming: Baseer uw optimalisatie-inspanningen op concrete prestatiemetrieken en inzichten.
- Lange-termijn prestatietracking: Monitor de prestaties van uw website in de loop van de tijd om trends te identificeren en de impact van uw optimalisaties te meten.
Belangrijkste Kenmerken van Lighthouse CI
- Geautomatiseerde audits: Voert automatisch Lighthouse-audits uit als onderdeel van uw CI/CD-proces.
- Prestatiebudgetten: Stel prestatiebudgetten in om ervoor te zorgen dat uw website binnen aanvaardbare prestatiedrempels blijft.
- Regressietracking: Volgt prestatieregressies in de loop van de tijd, zodat u de codewijzigingen kunt identificeren die deze hebben veroorzaakt.
- Bruikbare inzichten: Biedt gedetailleerde rapporten met bruikbare aanbevelingen over hoe u de prestaties van uw website kunt verbeteren.
- Aanpasbare configuratie: Configureer Lighthouse CI om aan uw specifieke behoeften en vereisten te voldoen.
- Integratie met CI/CD-tools: Integreert naadloos met populaire CI/CD-tools zoals Jenkins, CircleCI, GitHub Actions en GitLab CI.
- Open Source: Lighthouse CI is een open-sourceproject, wat betekent dat het gratis te gebruiken en aan te passen is.
Lighthouse CI opzetten: Een Stapsgewijze Gids
Hier is een uitgebreide gids voor het opzetten van Lighthouse CI voor uw project:
1. Installeer de Lighthouse CI CLI
Eerst moet u de Lighthouse CI command-line interface (CLI) globaal installeren met npm of yarn:
npm install -g @lhci/cli
yarn global add @lhci/cli
2. Configureer Lighthouse CI
Maak een lighthouserc.js-bestand aan in de root van uw project om Lighthouse CI te configureren. Dit bestand definieert de URL's die moeten worden geaudit, de assertieregels en andere configuratieopties.
Hier is een basisvoorbeeld van een lighthouserc.js-bestand:
module.exports = {
ci:
{
collect: {
url: ['http://localhost:3000', 'http://localhost:3000/about']
},
assert: {
preset: 'lighthouse:recommended'
},
upload: {
target: 'temporary-public-storage'
},
},
};
Uitleg:
collect.url: Specificeert de URL's die door Lighthouse moeten worden geaudit. In dit voorbeeld auditen we de startpagina en de "over ons"-pagina van een website die draait oplocalhost:3000. Vergeet niet dit te vervangen door de URL's die relevant zijn voor *uw* project, wat ook staging-omgevingen kan omvatten.assert.preset: Gebruikt delighthouse:recommended-preset, die een set vooraf gedefinieerde asserties toepast op basis van de aanbevelingen van Lighthouse. Dit is een goed startpunt, maar u kunt deze asserties naar behoefte aanpassen.upload.target: Configureert waar de Lighthouse CI-resultaten zullen worden geüpload.temporary-public-storageis handig voor testen en ontwikkeling, maar voor productieomgevingen wilt u doorgaans een meer permanente opslagoplossing gebruiken (later besproken).
3. Integreer Lighthouse CI in uw CI/CD-pipeline
De volgende stap is het integreren van Lighthouse CI in uw CI/CD-pipeline. De exacte stappen variëren afhankelijk van uw CI/CD-provider, maar het algemene proces omvat het toevoegen van een script aan uw CI/CD-configuratie dat de Lighthouse CI-commando's uitvoert.
Voorbeeld met GitHub Actions:
Maak een bestand genaamd .github/workflows/lighthouse-ci.yml in uw repository met de volgende inhoud:
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
Uitleg:
on.push.branches: Triggert de workflow bij pushes naar demain-branch.on.pull_request: Triggert de workflow bij pull requests.jobs.lighthouse.runs-on: Specificeert het besturingssysteem dat voor de job wordt gebruikt (in dit geval Ubuntu).steps: Definieert de stappen die in de job moeten worden uitgevoerd:actions/checkout@v3: Checkt de repository uit.actions/setup-node@v3: Zet Node.js op.npm ci: Installeert afhankelijkheden.Run Lighthouse CI: Voert de Lighthouse CI-commando's uit:npm install -g @lhci/cli@0.11.x: Installeert de Lighthouse CI CLI globaal. *Belangrijk*: Het wordt altijd aanbevolen om een specifieke versie vast te zetten.lhci autorun: Voert Lighthouse CI uit in "autorun"-modus, die automatisch audits verzamelt, prestatiebudgetten controleert en de resultaten uploadt.
Belangrijke overwegingen voor CI/CD-integratie:
- Server opstarten: Zorg ervoor dat uw webserver draait (bijv.
npm start) voordat ulhci autorunuitvoert. Mogelijk moet u een stap aan uw CI/CD-configuratie toevoegen om uw server op de achtergrond te starten. - Databasemigraties: Als uw applicatie afhankelijk is van een database, zorg er dan voor dat databasemigraties worden uitgevoerd als onderdeel van uw CI/CD-proces *voordat* u Lighthouse CI uitvoert.
- Omgevingsvariabelen: Als uw applicatie omgevingsvariabelen vereist, zorg er dan voor dat deze correct zijn geconfigureerd in uw CI/CD-omgeving.
4. Voer Lighthouse CI uit
Nu, telkens wanneer u wijzigingen naar de main-branch pusht of een pull request aanmaakt, zal de Lighthouse CI-workflow automatisch worden uitgevoerd. De resultaten zijn beschikbaar in de GitHub Actions-interface.
5. Bekijk de Lighthouse CI-resultaten
De Lighthouse CI-resultaten worden geüpload naar de locatie die is gespecificeerd in uw lighthouserc.js-bestand (bijv. temporary-public-storage). U kunt deze resultaten openen door de link in de CI/CD-output te volgen. Deze resultaten bieden gedetailleerde informatie over de prestaties, toegankelijkheid, SEO en best practices van uw website.
Asserties en Prestatiebudgetten configureren
Met Lighthouse CI kunt u asserties en prestatiebudgetten configureren om ervoor te zorgen dat uw website uw prestatiedoelen haalt. Asserties zijn regels die specifieke prestatiemetrieken (bijv. First Contentful Paint, Largest Contentful Paint) controleren aan de hand van vooraf gedefinieerde drempels. Prestatiebudgetten definiëren aanvaardbare limieten voor verschillende prestatiemetrieken.
Hier is een voorbeeld van hoe u asserties configureert in uw lighthouserc.js-bestand:
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'
},
}
};
Uitleg:
first-contentful-paint: Stelt een waarschuwingsdrempel in voor First Contentful Paint (FCP) op 2000ms.largest-contentful-paint: Stelt een waarschuwingsdrempel in voor Largest Contentful Paint (LCP) op 2500ms.cumulative-layout-shift: Stelt een waarschuwingsdrempel in voor Cumulative Layout Shift (CLS) op 0.1.total-blocking-time: Stelt een waarschuwingsdrempel in voor Total Blocking Time (TBT) op 500ms.categories:performance: Stelt een waarschuwingsdrempel in voor de algehele prestatiecategorie-score op 0.9.categories:accessibility: Stelt een foutdrempel in voor de algehele toegankelijkheidscategorie-score op 0.8.
Assertieniveaus:
off: Schakelt de assertie uit.warn: Geeft een waarschuwing als de assertie mislukt.error: Laat de Lighthouse CI-run mislukken als de assertie mislukt.
Asserties aanpassen:
U kunt asserties aanpassen aan uw specifieke behoeften. U wilt bijvoorbeeld misschien strengere drempels instellen voor kritieke prestatiemetrieken of asserties uitschakelen die niet relevant zijn voor uw applicatie.
Een Lighthouse CI Upload-doel kiezen
De upload.target-optie in uw lighthouserc.js-bestand specificeert waar de Lighthouse CI-resultaten worden geüpload. Het temporary-public-storage-doel is handig voor testen en ontwikkeling, maar het is niet geschikt voor productieomgevingen omdat de gegevens niet persistent zijn.
Hier zijn enkele alternatieve upload-doelen:
- Lighthouse CI Server: De aanbevolen aanpak voor productieomgevingen is het gebruik van de Lighthouse CI-server. De Lighthouse CI-server biedt een persistente opslagoplossing voor uw Lighthouse CI-resultaten, evenals een gebruikersinterface voor het bekijken en analyseren van uw gegevens. Het kan worden geïmplementeerd bij verschillende cloudproviders of op uw eigen infrastructuur worden gehost.
- Google Cloud Storage: U kunt uw Lighthouse CI-resultaten uploaden naar een Google Cloud Storage-bucket. Dit is een kosteneffectieve en schaalbare oplossing voor het opslaan van uw gegevens.
- Amazon S3: Net als bij Google Cloud Storage kunt u uw Lighthouse CI-resultaten uploaden naar een Amazon S3-bucket.
De Lighthouse CI Server opzetten:
Het opzetten van de Lighthouse CI-server omvat de volgende stappen:
- Installeer de Lighthouse CI Server: U kunt de Lighthouse CI-server installeren met npm of yarn:
- Configureer de database: De Lighthouse CI-server vereist een database om zijn gegevens op te slaan. U kunt verschillende databases gebruiken, waaronder PostgreSQL, MySQL en SQLite. Configureer de databaseverbindingsinstellingen in het
.env-bestand. - Start de Lighthouse CI Server: Start de Lighthouse CI-server met het
lhci server-commando. - Configureer de Lighthouse CI CLI om de server te gebruiken: Werk uw
lighthouserc.js-bestand bij om de Lighthouse CI-server als upload-doel te gebruiken:
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'
},
}
};
Vervang http://your-lhci-server.com door de URL van uw Lighthouse CI-server en YOUR_LHCI_TOKEN door het toegangstoken voor uw project.
Best Practices voor het gebruik van Lighthouse CI
Volg deze best practices om het maximale uit Lighthouse CI te halen:
- Voer Lighthouse CI uit bij elke codewijziging: Integreer Lighthouse CI in uw CI/CD-pipeline om audits uit te voeren bij elke codewijziging. Dit helpt u om prestatieregressies vroegtijdig op te sporen.
- Stel prestatiebudgetten in: Definieer prestatiebudgetten om ervoor te zorgen dat uw website binnen aanvaardbare prestatiedrempels blijft.
- Monitor prestatietrends: Volg de prestaties van uw website in de loop van de tijd om trends te identificeren en de impact van uw optimalisaties te meten.
- Prioriteer optimalisatie-inspanningen: Richt u eerst op het optimaliseren van de meest kritieke prestatiemetrieken.
- Gebruik real-world data: Gebruik gegevens uit de echte wereld om uw optimalisatie-inspanningen te sturen. U kunt bijvoorbeeld Google Analytics gebruiken om te bepalen welke pagina's het vaakst door uw gebruikers worden bezocht.
- Test op echte apparaten: Test uw website op echte apparaten om ervoor te zorgen dat deze goed presteert onder reële omstandigheden.
- Controleer regelmatig de Lighthouse CI-resultaten: Zorg ervoor dat u de Lighthouse CI-resultaten regelmatig controleert en actie onderneemt om eventuele geïdentificeerde prestatieproblemen aan te pakken.
- Optimaliseer afbeeldingen: Optimaliseer uw afbeeldingen om hun bestandsgrootte te verkleinen zonder kwaliteitsverlies. Tools zoals ImageOptim (macOS), TinyPNG en ImageKit zijn hiervoor handig.
- Minify CSS en JavaScript: Minify uw CSS- en JavaScript-bestanden om hun grootte te verkleinen. Tools zoals UglifyJS en CSSNano kunnen hierbij helpen.
- Maak gebruik van browsercaching: Maak gebruik van browsercaching om het aantal verzoeken dat uw website naar de server doet te verminderen.
- Gebruik een Content Delivery Network (CDN): Gebruik een CDN om de inhoud van uw website te distribueren naar servers over de hele wereld. Dit kan de laadtijden voor gebruikers op verschillende geografische locaties verbeteren. Diensten als Cloudflare en Amazon CloudFront zijn populaire CDN's.
- Stel offscreen-afbeeldingen uit: Implementeer lazy loading voor afbeeldingen die niet onmiddellijk op het scherm zichtbaar zijn. Dit kan de initiële laadtijd van de pagina aanzienlijk verbeteren. Het attribuut
loading="lazy"kan worden gebruikt voor eenvoudige lazy loading. - Elimineer render-blocking resources: Identificeer en elimineer bronnen die het renderen van uw pagina blokkeren. Dit omvat vaak het inlinen van kritieke CSS en het uitstellen van niet-kritieke CSS en JavaScript.
- Verminder de uitvoeringstijd van JavaScript: Profileer uw JavaScript-code om traag lopende functies te identificeren en te optimaliseren. Technieken zoals code splitting en tree shaking kunnen helpen de hoeveelheid JavaScript die moet worden gedownload en uitgevoerd te verminderen.
Geavanceerde Lighthouse CI-technieken
Zodra u vertrouwd bent met de basisprincipes van Lighthouse CI, kunt u enkele geavanceerde technieken verkennen om uw prestatiemonitoring verder te verbeteren:
- Aangepaste Lighthouse-audits: U kunt aangepaste Lighthouse-audits maken om te testen op specifieke prestatieproblemen die relevant zijn voor uw applicatie.
- Headless Chrome-configuratie: Configureer Headless Chrome om specifieke apparaatemulaties of netwerkbeperkingsinstellingen te gebruiken.
- Integratie met monitoringtools: Integreer Lighthouse CI met uw bestaande monitoringtools (bijv. New Relic, Datadog) om een uitgebreider beeld te krijgen van de prestaties van uw website.
- Visuele regressietesten: Combineer Lighthouse CI met visuele regressietesttools om visuele veranderingen te detecteren die de prestaties kunnen beïnvloeden.
Lighthouse CI voor een wereldwijd publiek: Overwegingen voor internationale websites
Houd bij het gebruik van Lighthouse CI voor websites die zich richten op een wereldwijd publiek rekening met het volgende:
- Test vanaf meerdere locaties: De responstijden van de server kunnen aanzienlijk variëren afhankelijk van de locatie van de gebruiker. Gebruik een CDN (Content Delivery Network) en overweeg Lighthouse CI-audits uit te voeren vanuit verschillende geografische regio's om een nauwkeuriger beeld te krijgen van de prestaties voor uw internationale gebruikers. Sommige CI/CD-providers bieden opties om de geografische locatie van de runner te specificeren.
- Houd rekening met netwerkomstandigheden: Netwerksnelheden en latentie variëren wereldwijd sterk. Simuleer verschillende netwerkomstandigheden tijdens uw Lighthouse CI-audits om te begrijpen hoe uw website presteert onder verschillende beperkingen. Lighthouse stelt u in staat de netwerkverbinding te beperken, waardoor langzamere verbindingen zoals 3G worden gesimuleerd.
- Contentlokalisatie: Zorg ervoor dat uw gelokaliseerde inhoud correct is geoptimaliseerd. Dit omvat beeldoptimalisatie voor verschillende talen en tekensets, en de juiste codering om weergaveproblemen te voorkomen.
- Laden van lettertypen: Optimaliseer het laden van lettertypen voor verschillende talen. Overweeg het gebruik van font-display: swap om te voorkomen dat tekst onzichtbaar is tijdens het laden van lettertypen.
- Scripts van derden: Wees u bewust van scripts van derden, aangezien deze de prestaties aanzienlijk kunnen beïnvloeden, vooral voor gebruikers in regio's met langzamere netwerkverbindingen. Audit de prestaties van scripts van derden regelmatig en overweeg het gebruik van asynchroon laden of het zelf hosten van kritieke scripts.
- Mobiele optimalisatie: Mobiel gebruik is in veel delen van de wereld wijdverbreid. Zorg ervoor dat uw website is geoptimaliseerd voor mobiele apparaten en dat uw Lighthouse CI-audits mobiel-specifieke tests bevatten.
Probleemoplossing voor veelvoorkomende Lighthouse CI-problemen
Hier zijn enkele veelvoorkomende problemen die u kunt tegenkomen bij het gebruik van Lighthouse CI en hoe u ze kunt oplossen:
- Lighthouse CI mislukt met "Timeout"-fout: Dit kan gebeuren als uw website te langzaam laadt of als Lighthouse CI geen verbinding kan maken met uw website. Probeer de time-outwaarde in uw
lighthouserc.js-bestand te verhogen of controleer de serverlogs van uw website op fouten. - Lighthouse CI rapporteert inconsistente resultaten: Lighthouse-resultaten kunnen per run licht variëren als gevolg van netwerkomstandigheden of andere factoren. Voer meerdere audits uit om een stabieler gemiddelde te krijgen.
- Lighthouse CI kan resultaten niet uploaden: Controleer uw
upload.target-configuratie en zorg ervoor dat uw Lighthouse CI-server draait en toegankelijk is. Controleer ook of u het juiste toegangstoken heeft geconfigureerd. - Lighthouse CI rapporteert onverwachte prestatieregressies: Onderzoek de codewijzigingen die zijn doorgevoerd voordat de regressie werd gedetecteerd. Gebruik de Lighthouse CI-rapporten om de specifieke prestatiemetrieken te identificeren die zijn verslechterd en richt uw optimalisatie-inspanningen op die gebieden.
Conclusie
Frontend Lighthouse CI is een krachtig hulpmiddel voor continue prestatiemonitoring van webapplicaties. Door Lighthouse CI te integreren in uw CI/CD-pipeline, kunt u proactief prestatieproblemen identificeren en aanpakken, zodat uw website een optimale gebruikerservaring biedt. Vergeet niet uw setup, assertieregels en testlocaties aan te passen voor een wereldwijd publiek om de best mogelijke ervaring te creëren voor gebruikers over de hele wereld.
Door de stappen en best practices in deze gids te volgen, kunt u de prestaties van uw website aanzienlijk verbeteren, het bouncepercentage verlagen, de conversieratio's verhogen en uiteindelijk uw bedrijfsdoelen bereiken. Begin vandaag nog met de implementatie van Lighthouse CI en ontgrendel het volledige potentieel van uw webapplicaties.