De perfekte Chrome Network panel-indstillinger til optimering af Core Web Vitals

De perfekte Chrome Network Panel-indstillinger til optimering af Core Web Vitals

Chrome DevTools Network-panelet er et uundværligt værktøj for webudviklere, der sigter mod at optimere Core Web Vitals. Desværre er standardindstillingerne ikke de bedste til hastighedsoptimering. Ved at konfigurere de rigtige indstillinger kan du præcist simulere virkelige forhold og få bedre indsigt i din hjemmesides ydeevne. Denne guide vil lede dig gennem den ideelle opsætning af Chrome DevTools Network-panelet til analyse og forbedring af dine Core Web Vitals-scorer.

Konfigurering af Network-panelet

For at tilgå Network-panelet skal du åbne Chrome DevTools (F12 eller Ctrl+Shift+I) og klikke på fanen "Network".

Throttling

En af de vigtigste indstillinger til optimering af Core Web Vitals er netværks-throttling. Dette giver dig mulighed for at simulere forskellige netværksforhold, som dine brugere kan opleve.

Klik på rullemenuen "No throttling" i Network-panelet. Vælg "Fast 4G", "Slow 4G" eller "3G" for at simulere mobile netværksforhold. Den bedste mulighed afhænger af dit publikum. Hvis dit publikum typisk bruger avancerede mobilenheder under hurtige netværksforhold, skal du aktivere "Fast 4G". Hvis de typiske netværksforhold er noget dårligere, skal du vælge "Slow 4G", og ellers spil det sikkert og vælg "3G"

Deaktiver cache

For at sikre, at du tester din side, som en førstegangsbesøgende ville opleve den: Markér afkrydsningsfeltet "Disable cache" i Network-panelet.

Aktivér Big request Rows

Big request rows giver et mere omfattende overblik over hver anmodning. Den vigtigste nye information, det giver dig, er:

• Kolonnen size viser nu den ukomprimerede og komprimerede størrelse af anmodningen.
• Kolonnen name giver information om stien.
• Kolonnen priority viser dig den indledende og endelige fetch priority.

Aktivér skærmbilleder

Når du aktiverer skærmbilleder, vil Chrome tage skærmbilleder under sideindlæsninger. Hvert skærmbillede repræsenterer en visuel ændring på siden og kan bruges til at forstå de forskellige stadier af sideindlæsning og identificere Cumulative Layout Shift.

• Med Network-fanen i fokus, tryk Ctrl+F5 (Cmd+R på Mac) for at genindlæse siden.
  
• Chrome vil tage skærmbilleder under sideindlæsningsprocessen.
• Miniaturebilleder af disse skærmbilleder vises under rækken af afkrydsningsfelter i Network-panelet.

Skærmbilledeoversigten har nogle praktiske små funktioner, som du måske endnu ikke kender til:

• Hold musen over et skærmbillede for at se, hvornår det blev taget. Dette vil blive vist med en gul lodret linje på Overview-diagrammet.
• Klik på et skærmbilledminiature for at filtrere anmodninger, der opstod efter det skærmbillede blev taget.
• Dobbeltklik på et miniaturebillede for at zoome ind og se skærmbilledet mere detaljeret.

Aktivér de bedste netværkskolonner

For at finde Core Web Vitals-problemer vil følgende paneler give dig nyttig information. Højreklik blot på et vilkårligt kolonnenavn og vælg dine foretrukne kolonner

Aktivér derefter følgende kolonner, der har betydning for Core Web Vitals:

Aktivér disse brugerdefinerede svarheadere:

Aktivér disse brugerdefinerede svarheadere:

Det endelige resultat:

Nu er det tid til at genindlæse siden og se den nye og forbedrede netværksrespons i Chromes Network-fane. Det vil se nogenlunde sådan ud og viser al den information, du har brug for til at begynde at debugge Core Web Vitals!