6.8 KiB
Analysera en webbplats för prestanda
Uppgiftsöversikt
Prestandaanalys är en viktig färdighet för moderna webbutvecklare. I denna uppgift ska du genomföra en omfattande prestandaöversyn av en verklig webbplats, med hjälp av både webbläsarbaserade verktyg och tredjepartstjänster för att identifiera flaskhalsar och föreslå optimeringsstrategier.
Din uppgift är att tillhandahålla en detaljerad prestandarapport som visar din förståelse för principerna kring webbprestanda och din förmåga att effektivt använda professionella analysverktyg.
Uppgiftsinstruktioner
Välj en webbplats att analysera - välj ett av följande alternativ:
- En populär webbplats du använder ofta (nyhetssida, sociala medier, e-handel)
- En webbplats för ett open source-projekt (GitHub-sidor, dokumentationssidor)
- En lokal företagswebbplats eller portföljsida
- Ditt eget projekt eller tidigare kursarbete
Utför en analys med flera verktyg med minst tre olika metoder:
- Webbläsarens utvecklarverktyg - Använd Chrome/Edge Performance-fliken för detaljerad profilering
- Online-verktyg för granskning - Testa Lighthouse, GTmetrix eller WebPageTest
- Nätverksanalys - Undersök resursladdning, filstorlekar och begärandemönster
Dokumentera dina resultat i en omfattande rapport som inkluderar:
Analys av prestandamått
- Mätningar av laddningstid från flera verktyg och perspektiv
- Core Web Vitals-poäng (LCP, FID, CLS) och deras betydelse
- Resursuppdelning som visar vilka tillgångar som bidrar mest till laddningstiden
- Nätverksvattenfallsanalys som identifierar blockerande resurser
Identifiering av problem
- Specifika prestandaflaskhalsar med stödjande data
- Rotorsaksanalys som förklarar varför varje problem uppstår
- Användarpåverkansbedömning som beskriver hur problemen påverkar verkliga användare
- Prioriteringsrankning av problem baserat på allvarlighetsgrad och svårighet att åtgärda
Optimeringsrekommendationer
- Specifika, genomförbara förbättringar med förväntad påverkan
- Implementeringsstrategier för varje rekommenderad förändring
- Moderna bästa praxis som kan tillämpas (lazy loading, komprimering, etc.)
- Verktyg och tekniker för kontinuerlig prestandaövervakning
Forskningskrav
Förlita dig inte bara på webbläsarverktyg - utöka din analys med:
Tredjepartsgranskningsverktyg:
- Google Lighthouse - Omfattande granskningar
- GTmetrix - Insikter om prestanda och optimering
- WebPageTest - Testning under verkliga förhållanden
- Pingdom - Global prestandaövervakning
Specialiserade analysverktyg:
- Bundle Analyzer - Analys av JavaScript-paketstorlek
- Bildoptimeringsverktyg - Möjligheter till optimering av tillgångar
- Analys av säkerhetsrubriker - Säkerhetens påverkan på prestanda
Format för leveranser
Skapa en professionell rapport (2-3 sidor) som inkluderar:
- Sammanfattning - Översikt över nyckelresultat och rekommendationer
- Metodologi - Verktyg som användes och testmetod
- Nuvarande prestandabedömning - Grundläggande mått och mätningar
- Identifierade problem - Detaljerad problemanalys med stödjande data
- Rekommendationer - Prioriterade förbättringsstrategier
- Implementeringsplan - Steg-för-steg optimeringsplan
Inkludera visuella bevis:
- Skärmdumpar av prestandaverktyg och mått
- Diagram eller grafer som visar prestandadata
- Före/efter-jämförelser där det är möjligt
- Nätverksvattenfallsdiagram och resursuppdelningar
Bedömningskriterier
| Kriterier | Exemplariskt (90-100%) | Tillräckligt (70-89%) | Behöver förbättras (50-69%) |
|---|---|---|---|
| Analysdjup | Omfattande analys med 4+ verktyg med detaljerade mått, rotorsaksanalys och bedömning av användarpåverkan | Bra analys med 3 verktyg med tydliga mått och grundläggande problemidentifiering | Grundläggande analys med 2 verktyg med begränsat djup och minimal problemidentifiering |
| Verktygsmångfald | Använder webbläsarverktyg + 3+ tredjepartstjänster med jämförande analys och insikter från varje | Använder webbläsarverktyg + 2 tredjepartstjänster med viss jämförande analys | Använder webbläsarverktyg + 1 tredjepartstjänst med begränsad jämförelse |
| Problemidentifiering | Identifierar 5+ specifika prestandaproblem med detaljerad rotorsaksanalys och kvantifierad påverkan | Identifierar 3-4 prestandaproblem med bra analys och viss påverkningsmätning | Identifierar 1-2 prestandaproblem med grundläggande analys |
| Rekommendationer | Ger specifika, genomförbara rekommendationer med implementeringsdetaljer, förväntad påverkan och moderna bästa praxis | Ger bra rekommendationer med viss implementeringsvägledning och förväntade resultat | Ger grundläggande rekommendationer med begränsade implementeringsdetaljer |
| Professionell presentation | Välorganiserad rapport med tydlig struktur, visuella bevis, sammanfattning och professionell formatering | Bra organisation med vissa visuella bevis och tydlig struktur | Grundläggande organisation med minimal visuell bevisning |
Lärandemål
Genom att slutföra denna uppgift kommer du att visa din förmåga att:
- Tillämpa professionella verktyg och metoder för prestandaanalys
- Identifiera prestandaflaskhalsar med datadriven analys
- Analysera sambandet mellan kodkvalitet och användarupplevelse
- Rekommendera specifika, genomförbara optimeringsstrategier
- Kommunicera tekniska resultat i ett professionellt format
Denna uppgift förstärker de prestandakoncept som lärts ut i lektionen samtidigt som den bygger praktiska färdigheter som du kommer att använda under hela din karriär som webbutvecklare.
Ansvarsfriskrivning:
Detta dokument har översatts med hjälp av AI-översättningstjänsten Co-op Translator. Även om vi strävar efter noggrannhet, bör det noteras att automatiserade översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess ursprungliga språk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.