De perfekte Chrome Network-panelinnstillingene for optimalisering av Core Web Vitals

De perfekte Chrome Network-panelinnstillingene for optimalisering av Core Web Vitals

Chrome DevTools Network-panelet er et uunnværlig verktøy for webutviklere som ønsker å optimalisere Core Web Vitals. Dessverre er standardinnstillingene ikke de beste for hastighetsoptimalisering. Ved å konfigurere de riktige innstillingene kan du nøyaktig simulere virkelige forhold og få bedre innsikt i nettstedets ytelse. Denne guiden tar deg gjennom det ideelle Chrome DevTools Network-paneloppsett for å analysere og forbedre dine Core Web Vitals-resultater.

Konfigurering av Network-panelet

For å få tilgang til Network-panelet, åpne Chrome DevTools (F12 eller Ctrl+Shift+I) og klikk på fanen "Network".

Throttling

En av de viktigste innstillingene for optimalisering av Core Web Vitals er nettverksbegrensning. Dette lar deg simulere ulike nettverksforhold som brukerne dine kan oppleve.

Klikk på rullegardinmenyen "No throttling" i Network-panelet. Velg "Fast 4g", "Slow 4g" eller "3G" for å simulere mobile nettverksforhold. Det beste alternativet avhenger av publikummet ditt. Hvis publikummet ditt vanligvis bruker avanserte mobilenheter under raske nettverksforhold, aktiver "Fast 4G". Hvis de typiske nettverksforholdene er noe dårligere, velg "Slow 4G"  og ellers er det tryggest å velge "3G"

Deaktiver hurtigbuffer

For å sikre at du tester nettstedet ditt slik en førstegangsbesøkende ville oppleve det: Merk av for "Disable cache" i Network-panelet.

Aktiver store forespørselsrader

Store forespørselsrader gir en mer omfattende visning av hver forespørsel. Den viktigste nye informasjonen dette gir deg er:

• Size-kolonnen vil nå vise den ukomprimerte og komprimerte størrelsen på forespørselen.
• Name-kolonnene vil gi informasjon om banen.
• Priority-kolonnen vil vise deg den opprinnelige og endelige fetch priority.

Aktiver skjermbilder

Når du aktiverer skjermbilder, vil Chrome ta skjermbilder under sideinnlastinger. Hvert skjermbilde representerer en visuell endring på siden og kan brukes til å forstå de ulike stadiene av sideinnlasting og identifisere Cumulative Layout Shift.

• Med Network-fanen i fokus, trykk Ctrl+F5 (Cmd+R på Mac) for å oppdatere siden.
  
• Chrome vil ta skjermbilder under sideinnlastingsprosessen.
• Miniatyrbilder av disse skjermbildene vil vises under raden med avmerkingsbokser i Network-panelet.

Skjermbilde-oversikten har noen praktiske små funksjoner som du kanskje ikke kjenner til ennå:

• Hold musepekeren over et skjermbilde for å se når det ble tatt. Dette indikeres av en gul vertikal linje på oversiktsdiagrammet.
• Klikk på et skjermbilde-miniatyrbilde for å filtrere ut forespørsler som skjedde etter at skjermbildet ble tatt.
• Dobbeltklikk på et miniatyrbilde for å zoome inn og se skjermbildet i mer detalj.

Aktiver de beste nettverkskolonnene

For å finne Core Web Vitals-problemer vil følgende paneler gi deg nyttig informasjon. Høyreklikk ganske enkelt på et kolonnenavn og velg de kolonnene du foretrekker

Aktiver deretter følgende kolonner som er viktige for Core Web Vitals:

Aktiver disse egendefinerte responshodene:

Aktiver disse egendefinerte responshodene:

Sluttresultatet:

Nå er det på tide å laste inn siden på nytt og se den nye og forbedrede nettverksresponsen i Chromes Network-fane. Det vil se omtrent slik ut og viser all informasjonen du trenger for å begynne å feilsøke Core Web Vitals!