Jak povolit Benchmark HUD prohlížeče Chrome ke sledování metrik výkonu 13

Jak povolit Benchmark HUD prohlížeče Chrome ke sledování metrik výkonu

Vývojový tým Google Chrome nedávno přidal head-up displej (HUD), který vývojářům a uživatelům pomáhá sledovat metriky výkonu různých webových stránek. HUD sleduje metriky, které jsou součástí platformy Core Web Vitals společnosti Google, jako je Largest Contentful Paint (LCP), First Input Delay (FID) a Cumulative Layout Shift (CLS). Dnes se blíže podíváme na to, jak můžete povolit tento HUD v prohlížeči Chrome, co tyto metriky ve skutečnosti znamenají a jak to ovlivňuje váš web.

Povolit srovnávací HUD prohlížeče Chrome

Existují dva způsoby, jak zobrazit benchmarky Chrome jako head-up displej. HUD můžete buď povolit pomocí příznaku nové funkce v prohlížeči Chrome, nebo použít oficiální rozšíření Chrome.

Povolit srovnávací HUD prohlížeče Chrome pomocí příznaku funkce

Experimentální benchmark HUD společnosti Google v současné době existuje za příznakem funkce v nejnovějším Chrome Canary. V tomto článku jsem pro demonstraci použil Chrome Canary 89.0.4349.3. Pomocí těchto kroků můžete povolit HUD v Chromu pro Mac, Windows, Linux, Chrome OS a Android.

1. Otevřete Google Chrome Canary a navštivte chrome://flags. Ve vyhledávacím poli dostupném na této stránce vyhledejte „Zobrazit metriky výkonu v HUD“a vyberte možnost Povoleno. Alternativně můžete níže uvedenou adresu URL vložit do adresního řádku prohlížeče.

chrome://flags/#show-performance-metrics-hud

2. Po povolení příznaku restartujte prohlížeč. Teď budeš v pravém horním rohu si všimněte nového benchmarku HUD prohlížeče Chrome prohlížeče. HUD bohužel v tuto chvíli nepodporuje přetahování pro přemístění, takže jej můžete prohlížet na stejném místě.

verze příznaku funkce chrome hud

Povolte Chrome’s Benchmark HUD pomocí rozšíření Chrome

Pokud s Chrome Canary nejste ochotni žít na hraně, můžete si nainstalovat rozšíření Chrome vydané společností Google a získat místo toho podobný HUD. Postup je následující:

1. Otevřete Google Chrome a navštivte stránku Internetový obchod Chrome. Do vyhledávacího pole zadejte „Web Vitals“ a nainstalujte ten, který nabízí addyosmani. Případně můžete použijte tento odkaz přímo otevřít stránku rozšíření.

rozšíření web vitals pro Chrome

2. Po instalaci rozšíření uvidíte stejné metriky nabízené s příznakem funkce. Můžete použít kterýkoli z nich na základě svého pohodlí a preferencí. Vzhledem k tomu, že nyní neexistuje možnost rychle deaktivovat verzi s příznakem funkce, doporučuji použít rozšíření pro Chrome.

Ve vztahu :  Jak nahrávat obrazovku na iPhone

rozšíření web vitals pro Chrome po instalaci

Funkce prohlížeče Chrome Benchmark HUD

Benchmark HUD Chrome aktuálně nabízí následující funkce:

  • Největší obsahová barva (LCP)
  • Zpoždění prvního vstupu (FID)
  • Kumulativní změna rozložení (CLS)
  • Průměrný vypuštěný snímek (ADF)

Největší obsahová barva (LCP)

Největší obsahová barva (LCP) měří čas potřebný k vykreslení největšího obrázku nebo textového bloku v viditelné části webové stránky. Google doporučuje webové stránky mít LCP během prvních 2,5 sekund pro ideální uživatelský zážitek. LCP někde kolem 2,5 sekundy až 4 sekundy je považováno za průměr a trvání nad to se počítá jako špatné a může mít za následek špatné UX.

lcp metriky
Obrázek: Google

Společnost vyzývá vývojáře, aby udrželi LCP do 2,5 sekundy měřit 75. percentil načtení stránek napříč verzemi pro mobily a počítače. Zjednodušeně řečeno, vše, co musíte udělat, je zajistit, aby alespoň 75 procent zobrazení stránky splňovalo požadovaný práh dobré kvality, což je v tomto případě 2,5 sekundy.

Zpoždění prvního vstupu (FID)

Zatímco LCP bylo o rychlosti načítání, First Input Delay (FID) představuje odezvu webové stránky. Měří dobu od chvíle, kdy uživatel interaguje se stránkou, do doby, kdy se stránce podaří zahájit zpracování, aby reagovala na akci. To stojí za zmínku FID nezahrnuje celkovou dobu zpracování.

fid metriky
Obrázek: Google

V ideálních scénářích a hodnota FID webu by měla být menší než 100 milisekund. Rozsah mezi 100 milisekundami až 300 milisekundami vyžaduje zlepšení. Pokud čas překročí 300 milisekund, webová stránka je považována za stránku se špatným FID. Chcete-li si udržet dobré skóre FID, můžete použít stejný přístup k načítání stránky na 75. percentilu, který byl popsán výše.

Kumulativní změna rozložení (CLS)

Cumulative Layout Shift (CLS) zaznamenává všechny ty nepříjemné chvíle, kdy se obsah webové stránky náhle posune nahoru nebo dolů bez jakéhokoli varování. Jinými slovy, CLS měří vizuální stabilitu webu.

metriky cls

Podle společnosti Google dochází k posunům rozložení primárně, když jsou zdroje stránky načteny asynchronně nebo když jsou prvky DOM dynamicky přidávány na webovou stránku. Dobré skóre CLS je menší než 0,1. Skóre nad 0,25 se považuje za špatné. Můžete se dozvědět více o tom, jak se počítají skóre CLS právě tady.

Průměrný vypuštěný snímek (ADF)

Průměrný zahozený snímek (ADF), jak název napovídá, ukazuje procento vynechaných snímků, když uživatel interaguje s webovou stránkou. Nižší procento ADF povede k lepšímu výkonu, zatímco vysoké vynechané snímky mohou způsobit zpoždění a další problémy s výkonem. V době psaní tohoto článku je ADF k dispozici pouze ve verzi s příznakem funkce HUD.

Ke sledování výkonu webových stránek použijte Benchmark HUD prohlížeče Chrome

V příspěvku na blogu minulý měsíc Google oznámil své plány za signály hodnocení považujte Core Web Vitals – LCP, FID a CLS od května 2021. Pokud jste vlastníkem webu nebo vývojářem, nyní by bylo vhodné optimalizovat uživatelský dojem z vašeho webu pomocí Benchmark HUD prohlížeče Chrome, aby vás nadcházející aktualizace negativně neovlivnila. Další takové tipy najdete v našem článku tipů a triků pro Google Chrome.

Ve vztahu :  Tipy NYT Connections: jak vyhrát Connections každý den