# 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](https://developers.google.com/web/tools/lighthouse) - Omfattande granskningar - [GTmetrix](https://gtmetrix.com/) - Insikter om prestanda och optimering - [WebPageTest](https://www.webpagetest.org/) - Testning under verkliga förhållanden - [Pingdom](https://tools.pingdom.com/) - Global prestandaövervakning **Specialiserade analysverktyg:** - [Bundle Analyzer](https://bundlephobia.com/) - Analys av JavaScript-paketstorlek - [Bildoptimeringsverktyg](https://squoosh.app/) - Möjligheter till optimering av tillgångar - [Analys av säkerhetsrubriker](https://securityheaders.com/) - Säkerhetens påverkan på prestanda ## Format för leveranser Skapa en professionell rapport (2-3 sidor) som inkluderar: 1. **Sammanfattning** - Översikt över nyckelresultat och rekommendationer 2. **Metodologi** - Verktyg som användes och testmetod 3. **Nuvarande prestandabedömning** - Grundläggande mått och mätningar 4. **Identifierade problem** - Detaljerad problemanalys med stödjande data 5. **Rekommendationer** - Prioriterade förbättringsstrategier 6. **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](https://github.com/Azure/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.