Övervakning och aviseringar för budgetar
Implementera automatiserade system för övervakning och aviseringar så att ni håller er inom de fastställda prestandabudgetarna.
Övervakning och aviseringar för budgetar är en gratis lektion i Optimering av webbprestanda och Lighthouse på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Optimering av webbprestanda och Lighthouse, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Optimering av webbprestanda och Lighthouse innehåller totalt 4 lektioner.
Varför övervaka prestandabudgetar?
Ni har lärt er att sätta prestandabudgetar. Men hur säkerställer ni att webbplatsen håller sig inom dessa gränser när den utvecklas? Det är här kontinuerlig övervakning och aviseringar kommer in!
Övervakning hjälper er att:
- Upptäcka regressioner tidigt: Identifiera prestandaförsämringar innan de påverkar användarna.
- Bevara kvaliteten: Säkerställa att nya funktioner inte oavsiktligt gör webbplatsen långsammare.
- Förbli konkurrenskraftiga: Hålla webbplatsen snabb och responsiv så att den motsvarar användarnas förväntningar.
Vad kan vi övervaka?
Prestandabudgetar handlar inte bara om sidans laddningstid. De kan gälla flera delar av webbplatsen:
- Resursstorlek: Den totala storleken på JavaScript-, CSS- eller bildpaket.
- Prestandapoäng: Lighthouse-resultat för bland annat prestanda och tillgänglighet.
- Tröskelvärden för mätvärden: Specifika Core Web Vitals, som Largest Contentful Paint (LCP) eller Cumulative Layout Shift (CLS).
- Antal förfrågningar: Antalet nätverksförfrågningar som sidan gör.
Kontinuerlig övervakning hjälper er att följa dessa värden mot de fördefinierade gränserna.
Budgetkontroller vid byggtid
Ett av de tidigaste tillfällena att kontrollera prestandabudgetar är under projektets byggprocess. Verktyg som Webpack, en populär paketerare för JavaScript-moduler, kan konfigureras för att visa varningar eller fel om vissa budgetar för resursstorlek överskrids.
Detta förhindrar att stora filer ens når driftsättningen och upptäcker problem innan de når användarna.
Webpack-prestandahintar
Webpack låter er definiera performance-hintar i konfigurationen. Dessa hintar utfärdar varningar eller genererar fel om paketen överskrider angivna storlekar.
Här är ett enkelt exempel i en webpack.config.js-fil:
module.exports = {
// ... other webpack config
performance: {
hints: 'warning', // Can be 'error' or false
maxAssetSize: 200 * 1024, // 200 KiB
maxEntrypointSize: 250 * 1024, // 250 KiB
assetFilter: function(assetFilename) {
return !/(\.map$|^favicon\.ico$)/.test(assetFilename);
}
}
};Kontinuerlig integrering (CI) för budgetar
För mer omfattande kontroller, särskilt av mätvärden som Lighthouse-resultat eller Core Web Vitals, kan ni integrera övervakning av prestandabudgetar i er pipeline för kontinuerlig integrering (CI).
En CI-pipeline kör automatiskt tester och bygger koden när ändringar skickas in. Genom att lägga till prestandakontroller kan ni:
- Automatisera granskningar: Köra Lighthouse eller andra verktyg vid varje kodändring.
- Stoppa byggen: Förhindra driftsättningar om prestandabudgetar överskrids.
- Få omedelbar återkoppling: Utvecklarna ser prestandaproblem direkt i sina pull requests.
Lighthouse CI-assertioner för budgetar
Lighthouse CI är ett utmärkt verktyg för att integrera prestandakontroller i er CI-pipeline. Det låter er definiera specifika assertioner (regler) som resultaten från Lighthouse-granskningen måste uppfylla.
Om en assertion misslyckas kan Lighthouse CI markera bygget som misslyckat. Det säkerställer att prestandan aldrig sjunker under en baslinje.
Så här kan ni definiera budgetar i en .lighthouserc.json-fil:
{
"ci": {
"collect": {
"url": "http://localhost:8080"
},
"assert": {
"assertions": {
"performance-score": ["error", {"minScore": 0.90}],
"interactive": ["error", {"maxNumericValue": 3000}],
"total-blocking-time": ["warn", {"maxNumericValue": 200}]
},
"budgets": [{
"resourceSizes": [
{"resourceType": "script", "budget": 170},
{"resourceType": "image", "budget": 250}
],
"resourceCounts": [
{"resourceType": "script", "budget": 10}
]
}]
}
}
}Typer av aviseringar
När en prestandabudget överskrids behöver Ni få veta det! Aviseringar kan ha olika former:
- Byggfel: Den mest direkta aviseringen, som stoppar distributionen tills felet är åtgärdat.
- Meddelanden: Meddelanden som skickas till teamets kommunikationskanaler (Slack, Microsoft Teams).
- E-postrapporter: Detaljerade sammanfattningar som skickas till specifika personer eller sändlistor.
- Varningar i instrumentpaneler: Visuella indikatorer i övervakningsinstrumentpaneler.
Målet är att göra prestandaproblem synliga och möjliga för teamet att åtgärda.
Konfigurera meddelandekanaler
Många CI/CD-plattformar och övervakningsverktyg erbjuder integrationer med populära kommunikationstjänster. Om till exempel granskningen i Lighthouse CI misslyckas kan Ni konfigurera Er pipeline så att den:
- Publicerar ett meddelande i en Slack-kanal.
- Skickar ett e-postmeddelande till utvecklingsteamet.
- Skapar ett ärende i ett projekthanteringsverktyg som Jira.
Dessa integrationer ser till att rätt personer omedelbart informeras när budgetar överskrids.
Aviseringar från övervakning av verkliga användare (RUM)
Byggtids- och CI-kontroller är proaktiva, medan övervakning av verkliga användare (RUM) ger insikter i faktiska användarupplevelser. RUM-verktyg samlar in prestandadata direkt från användarnas webbläsare.
Ni kan konfigurera RUM-aviseringar för:
- Core Web Vitals: Avisera om en viss andel användare upplever LCP eller CLS över Era tröskelvärden.
- Felfrekvenser: Meddela om JavaScript-fel ökar kraftigt och potentiellt påverkar prestandan.
- Geografisk prestanda: Avisera om användare i en viss region upplever långsamma laddningstider.
RUM-aviseringar hjälper Er att reagera på försämrad prestanda i verkliga situationer.
Snabb kontroll: övervakning av budget
Vilka av följande är effektiva sätt att övervaka och få aviseringar om överträdelser av prestandabudgeten?
Sammanfattning: håll Er inom budgeten
Utmärkt! Ni har lärt Er hur viktigt kontinuerlig övervakning och aviseringar är för att upprätthålla webbprestanda.
- Vi undersökte hur byggverktyg som Webpack kan upprätthålla storleksbudgetar.
- Vi såg hur CI/CD-pipelines, särskilt med verktyg som Lighthouse CI, automatiserar kontroller och stoppar byggen när budgetar överskrids.
- Vi gick igenom olika mekanismer för aviseringar, från byggfel till meddelanden.
- Slutligen berörde vi övervakning av verkliga användare (RUM) för prestandaaviseringar från verkliga situationer.
Genom att införa dessa strategier kan Ni se till att webbplatsen konsekvent uppfyller sina prestandamål.
Lär dig Optimering av webbprestanda och Lighthouse med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 12
- Lektioner
- 48
Vanliga frågor
Är lektionen ”Övervakning och aviseringar för budgetar” gratis?
Ja – hela texten till ”Övervakning och aviseringar för budgetar” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Optimering av webbprestanda och Lighthouse, kan Ni uppgradera till CoddyKit PRO. Kursen i Optimering av webbprestanda och Lighthouse innehåller totalt 4 lektioner.
Vad lär jag mig i ”Övervakning och aviseringar för budgetar”?
Implementera automatiserade system för övervakning och aviseringar så att ni håller er inom de fastställda prestandabudgetarna. Ni övar på Optimering av webbprestanda och Lighthouse med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Optimering av webbprestanda och Lighthouse?
Du behöver inga förkunskaper. Utbildningen i Optimering av webbprestanda och Lighthouse på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Övervakning och aviseringar för budgetar”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Optimering av webbprestanda och Lighthouse-lektionen?
Ja. Varje Optimering av webbprestanda och Lighthouse-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Fastställa prestandabudgetar
- Övervakning och aviseringar för budgetar
- Framväxande prestandatekniker
- Kommunicera prestanda till intressenter