Sådan aktiveres Chrome's benchmark-HUD for at spore præstationsmålinger

10. december 2020 Slået fra Af Mathias

Google Chromes udviklingsteam tilføjede for nylig en heads-up-skærm (HUD) til at hjælpe udviklere og brugere med at spore præstationsmålinger på forskellige websteder. HUD sporer målinger, der er en del af Googles Core Web Vitals-platform, såsom Largest Contentful Paint (LCP), First Input Delay (FID) og Cumulative Layout Shift (CLS). I dag vil vi se nærmere på, hvordan du kan aktivere denne HUD på Chrome, hvad disse målinger faktisk betyder, og hvordan det påvirker dit websted.

Aktivér Chromes benchmark-HUD

Der er to metoder til at se Chromes benchmarks som en head-up-skærm. Du kan enten aktivere HUD ved hjælp af det nye funktionsflag i Chrome eller bruge den officielle Chrome-udvidelse.

Indholdsfortegnelse + –

Artiklen fortsætter under annoncen

Aktivér Chrome’s benchmark H UD ved hjælp af funktionsflag

Googles eksperimentelle benchmark HUD findes i øjeblikket bag et funktionsflag i den nyeste Chrome Canary. I denne artikel har jeg brugt Chrome Canary 89.0.4349.3 til demonstration. Du kan følge disse trin for at aktivere HUD på Chrome på tværs af Mac, Windows, Linux, Chrome OS og Android.

1. Åbn Google Chrome Canary og besøg chrome: // flags. I søgefeltet, der er tilgængeligt på denne side, søger efter ‘Vis performance metrics in HUD’ , og vælg ‘Aktiveret’. Alternativt kan du indsætte nedenstående URL i din browsers adresselinje. krom: // flag / # show-performance-metrics-hud

Show performance metrics in HUD flag

2. Når du har aktiveret flag, skal du genstarte browseren. Du vil nu bemærke Chromes nye benchmark HUD i øverste højre hjørne i browseren. Desværre understøtter HUD ikke træk og slip for omplacering i øjeblikket, så du er tilbage med at se det samme sted.

Artiklen fortsætter under annoncen

Show performance metrics in HUD flag

Aktivér Chrome’s benchmark-HUD ved hjælp af Chrome-udvidelse

Hvis du ikke er villig til at leve i spidsen med Chrome Canary, kan du installere Chrome-udvidelsen frigivet af Google for at få en lignende HUD i stedet. Sådan gør du det:

Læs også  Sådan oprettes navne- og fotodeling i iMessage på iPhone og iPad

1. Åbn Google Chrome, og besøg Chrome Webshop. Skriv ‘Web Vitals’ i søgefeltet og installer den, der tilbydes af addyosmani. Alternativt kan du bruge dette link til direkte at åbne udvidelsens side.

web vitals chrome extension

Artiklen fortsætter under annoncen

2. Efter installation af udvidelsen ser du de samme metrics, der tilbydes med funktionsflagget. Du kan bruge en af disse baseret på din bekvemmelighed og præference. Da der ikke er nogen mulighed for hurtigt at deaktivere funktionens flagversion nu, vil jeg anbefale at bruge Chrome-udvidelsen.

web vitals chrome extension

Funktioner i Chromes Benchmark HUD

Chrome’s benchmark HUD tilbyder i øjeblikket følgende funktioner:

Artiklen fortsætter under annoncen
  • Største tilfredsstillende maling (LCP)

    • Største tilfredsstillende maling (LCP)

    Størst tilfredsstillende maling (LCP) måler det tager tid at gengive det største billede eller tekstblok i den synlige del af websiden . Google anbefaler, at websteder har LCP inden for de første 2,5 sekunder for en ideel brugeroplevelse. LCP et sted omkring 2,5 sekunder til 4 sekunder betragtes som gennemsnit og varighed ud over dette tæller som dårlig og kan resultere i dårlig UX.

    lcp metrics
    Billede: Google

    For at holde LCP inden for 2,5 sekunder opfordrer virksomheden udviklere til måle den 75. percentil af sideindlæsninger på tværs af mobil- og desktopversioner . For at sætte det på en enklere måde er alt, hvad du skal gøre, at sørge for, at mindst 75 procent af sidevisningerne overholder den krævede gode tærskel, som i dette tilfælde er 2,5 sekunder.

    Artiklen fortsætter under annoncen

    Første inputforsinkelse (FID)

    Mens LCP handlede om indlæsningshastighed, repræsenterer First Input Delay (FID) responsen på en webside . Det måler det tidspunkt, hvor en bruger interagerer med en side til det tidspunkt, siden det lykkes at starte behandlingen for at svare på handlingen. Det er værd at bemærke, at FID ikke inkluderer den samlede behandlingstid .

    fid metrics
    Billede: Google

    I ideelle scenarier, en websteds FID-værdi skal være mindre end 100 millisekunder . Området mellem 100 millisekunder og 300 millisekunder skal forbedres. Hvis tiden overstiger 300 millisekunder, anses websiden for at have en dårlig FID. Du kan følge den samme 75. percentil-tilgang til sidebelastning som beskrevet ovenfor for at opretholde en god FID-score.

    Kumulativ layout Skift (CLS)

    Kumulativ layoutskift (CLS) holder styr på alle de irriterende tider, hvor indholdet af et websted skiftes pludselig op eller ned uden nogen advarsel. Med andre ord måler CLS den visuelle stabilitet på et websted.

    cls metrics

    Artiklen fortsætter under annoncen

    Ifølge Google sker layoutskift primært, når ressourcer på siden indlæses asynkront, eller når DOM-elementer føjes dynamisk til en webside. En god CLS-score er mindre end 0,1. Resultater over 0,25 behandles som dårlige. Du kan lære mere om, hvordan CLS-scores beregnes lige her.

    Gennemsnitlig faldet ramme (ADF)

    Gennemsnitlig faldet ramme (ADF), som navnet antyder, viser procentdelen af rammer, der er faldet, når brugeren interagerer med websiden. Lavere ADF-procenter vil resultere i bedre ydeevne, mens højt faldne rammer kan forårsage forsinkelser og andre ydelsesproblemer. I skrivende stund er ADF kun tilgængelig på funktionsflagversionen af HUD.

    Brug Chromes benchmark-HUD til at spore webstedsydelse

    I et blogindlæg sidste måned annoncerede Google sine planer om at overvej Core Web Vitals – LCP, FID og CLS som rankingsignaler fra maj 2021 . Hvis du er en websiteejer eller en udvikler, ville det være et godt tidspunkt at optimere brugeroplevelsen på dit websted ved hjælp af Chrome’s Benchmark HUD for at undgå at blive negativt påvirket af den kommende opdatering. For flere sådanne tip, glem ikke at tjekke vores artikel om Google Chrome tip og tricks.

    Artiklen fortsætter under annoncen

KategoriGuides