Lighthouse är ett kraftfullt verktyg för att analysera och optimera prestandan av en webbplats. Här är en steg-för-steg-guide för att använda Lighthouse för Prestandaoptimering av din hemsida.
Om du kör Lighthouse med din webbläsare så ska du köra testet i ett Inkognitofönster och absolut inte inloggad.
- Öppna din webbplats i Chrome: Navigera till den sida du vill analysera.
- Öppna DevTools: Högerklicka på sidan och välj “Inspektera” eller tryck `Ctrl+Shift+I` (Windows/Linux) eller `Cmd+Opt+I` (Mac).
- Gå till Lighthouse-fliken: I DevTools-gränssnittet, klicka på fliken “Lighthouse”.
- Välj kategorier: För prestandaoptimering är “Performance” den viktigaste kategorin. Du kan också inkludera “Accessibility”, “Best Practices”, “SEO”, och “PWA” beroende på dina behov.
- Kör rapporten: Klicka på “Analysera sidhämtning”. Detta kommer att generera en detaljerad rapport om din webbplats prestanda.
Lighthouse ger en mängd olika mätvärden och rekommendationer. Här är några nyckelområden att fokusera på:
- Performance Score: Detta är ett övergripande mått på din sidas prestanda.
- First Contentful Paint (FCP): Tiden tills första innehållsdel visas.
- Speed Index: Hur snabbt innehållet på sidan visas visuellt.
- Largest Contentful Paint (LCP): Tiden tills största innehållsdel visas.
- Time to Interactive (TTI): Tiden tills sidan är fullt interaktiv.
- Total Blocking Time (TBT): Den totala tiden blockerad av långvariga uppgifter.
- Cumulative Layout Shift (CLS): Mått på visuella stabilitetsproblem.
Lighthouse ger specifika förslag för att förbättra prestandan. Några vanliga rekommendationer inkluderar:
- Reducera serverrespons tid (TTFB):
– Optimera backend-kod och databasfrågor.
– Använd en Content Delivery Network (CDN) för att minska latens. - Eliminera render-blockerande resurser:
– Minimera och kombinera CSS och JavaScript-filer.
– Använd “async” och “defer” för att ladda skript utan att blockera rendering. - Optimera bilder:
– Använd moderna bildformat som WebP.
– Komprimera bilder och använd responsiva bildstorlekar. - Aktivera textkomprimering:
– Använd gzip eller Brotli kompression på servern. Använd cache effektivt:
– Ställ in lämpliga cachekontroller för resurser. - Fördröj och ladda asynkront:
– Fördröj laddningen av tredjepartsskript och mindre viktiga resurser.
Låt oss anta att Lighthouse rapporterar att din Largest Contentful Paint (LCP) är för hög.
Här är några åtgärder du kan vidta:
- Förbättra serverns svarstid:
– Optimera din serverkonfiguration och databasfrågor. - Optimera bilder och media:
– Använd “lazy loading” för att ladda bilder när de kommer i vy.
– Komprimera och skala bilder korrekt.
– Använd moderna bildformat som WebP - Minifiera CSS och JavaScript:
– Kombinera och minifiera dina stilark och skript för att minska antalet HTTP-förfrågningar.
Om du kör Lighthouse med din webbläsare så ska du köra testet i ett Inkognitofönster.
Sammanfattning
Genom att följa dessa steg och rekommendationer kan du avsevärt förbättra prestandan på din webbplats, vilket i sin tur kan förbättra användarupplevelsen och SEO.