De perfekta inställningarna för Chrome Network-panelen för att optimera Core Web Vitals

De perfekta inställningarna för Chrome Network-panelen för att optimera Core Web Vitals

Chrome DevTools Network-panelen är ett oumbärligt verktyg för webbutvecklare som vill optimera Core Web Vitals. Tyvärr är standardinställningarna inte de bästa för hastighetsoptimering. Genom att konfigurera rätt inställningar kan du noggrant simulera verkliga förhållanden och få bättre insikter i din webbplats prestanda. Den här guiden går igenom den ideala konfigurationen av Chrome DevTools Network-panelen för att analysera och förbättra dina Core Web Vitals-resultat.

Konfigurera Network-panelen

För att komma åt Network-panelen, öppna Chrome DevTools (F12 eller Ctrl+Shift+I) och klicka på fliken "Network".

Throttling

En av de viktigaste inställningarna för att optimera Core Web Vitals är nätverksbegränsning (throttling). Detta låter dig simulera olika nätverksförhållanden som dina användare kan uppleva.

Klicka på rullgardinsmenyn "No throttling" i Network-panelen. Välj "Fast 4g", "Slow 4g" eller "3G" för att simulera mobila nätverksförhållanden. Det bästa alternativet beror på din målgrupp. Om din målgrupp vanligtvis använder avancerade mobila enheter under snabba nätverksförhållanden, aktivera "Fast 4G". Om de typiska nätverksförhållandena är något sämre, välj "Slow 4G"  och annars spela det säkert och välj "3G"

Inaktivera cache

För att säkerställa att du testar din webbplats som en förstagångsbesökare skulle uppleva den: Markera kryssrutan "Disable cache" i Network-panelen.

Aktivera stora förfrågningsrader

Stora förfrågningsrader ger en mer omfattande vy av varje förfrågan. Den viktigaste nya informationen du får är:

• Kolumnen size visar nu den okomprimerade och komprimerade storleken på förfrågan.
• Kolumnen name ger information om sökvägen.
• Kolumnen priority visar dig den initiala och slutgiltiga fetch priority.

Aktivera skärmdumpar

När du aktiverar skärmdumpar kommer Chrome att ta skärmdumpar under sidladdningar. Varje skärmdump representerar en visuell förändring på sidan och kan användas för att förstå de olika faserna av sidladdning och identifiera Cumulative Layout Shift.

• Med Network-fliken i fokus, tryck Ctrl+F5 (Cmd+R på Mac) för att ladda om sidan.
  
• Chrome tar skärmdumpar under sidladdningsprocessen.
• Miniatyrbilder av dessa skärmdumpar visas under raden med kryssrutor i Network-panelen.

Skärmdumpsöversikten har några praktiska små funktioner som du kanske inte känner till ännu:

• Hovra över en skärmdump för att se när den togs. Detta indikeras av en gul vertikal linje i översiktsdiagrammet.
• Klicka på en skärmdumpsminiatyr för att filtrera bort förfrågningar som inträffade efter att skärmdumpen togs.
• Dubbelklicka på en miniatyr för att zooma in och se skärmdumpen mer detaljerat.

Aktivera de bästa nätverkskolumnerna

För att hitta Core Web Vitals-problem ger följande paneler dig användbar information. Högerklicka helt enkelt på valfritt kolumnnamn och välj dina önskade kolumner

Aktivera sedan följande kolumner som är viktiga för Core Web Vitals:

Aktivera dessa anpassade svarsrubriker:

Aktivera dessa anpassade svarsrubriker:

Slutresultatet:

Nu är det dags att ladda om sidan och se det nya och förbättrade nätverkssvaret i Chromes Network-flik. Det kommer att se ut ungefär så här och visar all information du behöver för att börja felsöka Core Web Vitals!