Výkon webu není jen o tom, jak rychle se stránka načte. I když se obsah zobrazí během několika sekund, pomalá odezva tlačítek nebo nečekané posuny rozvržení mohou návštěvníky frustrovat a zhoršit jejich zážitek. Jak tedy zjistit, zda váš web funguje dobře? Core Web Vitals jsou klíčové metriky výkonu od Googlu, které měří rychlost načítání, interaktivitu a vizuální stabilitu. V tomto průvodci se dozvíte o třech metrikách Core Web Vitals, jejich doporučených prahových hodnotách a nástrojích, které můžete použít k měření a zlepšení výkonu svého webu.
Co jsou Core Web Vitals?
Core Web Vitals jsou sada metrik výkonu, které Google zavedl k měření důležitých aspektů uživatelského zážitku na webu. Tyto metriky se zaměřují na tři hlavní faktory: výkon načítání, interaktivitu a vizuální stabilitu. Jinými slovy pomáhají provozovatelům webů pochopit, jak rychle se stránka načte, jak plynule s ní mohou uživatelé pracovat a zda její obsah zůstává během načítání stabilní.
Výkon webu není jen o tom, jak rychle se stránka otevře. Web může svůj obsah načíst za krátkou dobu, ale pokud uživatelé musí čekat, než mohou kliknout na tlačítko, nebo pokud se rozvržení stránky nečekaně změní, celkový zážitek může být i tak špatný. Core Web Vitals pomáhají tyto problémy odhalit a poskytují měřitelné cíle pro zlepšení výkonu webu.
Google v současnosti používá tři metriky Core Web Vitals: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) a Cumulative Layout Shift (CLS). Každá metrika měří jinou část uživatelského zážitku, takže zlepšení jedné z nich nutně neznamená, že se zlepší i zbylé dvě.
Proč jsou Core Web Vitals důležité?
Web by měl svým návštěvníkům poskytovat plynulý a spolehlivý zážitek. Když se stránka načítá příliš dlouho, uživatelé mohou odejít dříve, než se dostanou k informacím, které potřebují. Podobně pokud tlačítka reagují pomalu nebo se prvky stránky nečekaně posouvají, návštěvníci mohou být frustrovaní a mít potíže s dokončením svých úkolů.
Core Web Vitals pomáhají provozovatelům webů tyto problémy identifikovat pomocí měřitelných dat o výkonu, místo aby se spoléhali jen na osobní dojmy. Vývojář může například otestovat web na výkonném počítači a zjistit, že se načítá rychle. Návštěvníci se staršími mobilními zařízeními nebo pomalejším internetovým připojením však mohou zažívat mnohem delší doby načítání.
Kvůli těmto rozdílům je sledování výkonu důležité. Analýzou dat Core Web Vitals mohou vývojáři zjistit, které části webu je třeba zlepšit, a ověřit, zda jejich optimalizační úsilí přináší očekávané výsledky.
Core Web Vitals jsou relevantní také pro optimalizaci pro vyhledávače (SEO). Google ve svých systémech hodnocení používá signály uživatelského zážitku ze stránky, dobré výsledky Core Web Vitals však vyšší pozice nezaručují. Relevantní obsah a mnoho dalších faktorů zůstávají důležité. Zlepšování těchto metrik by proto mělo být součástí širší strategie budování užitečného, přístupného a spolehlivého webu.
Jaké jsou tři metriky Core Web Vitals?
Každá metrika Core Web Vitals se zaměřuje na konkrétní aspekt výkonu webu. Pochopení toho, jak fungují, usnadňuje odhalení problémů s výkonem a výběr správných optimalizačních technik.
Co je Largest Contentful Paint (LCP)?
Largest Contentful Paint (LCP) měří, jak dlouho trvá, než se zobrazí největší obrázek nebo textový blok viditelný v úvodní oblasti zobrazení. Tato metrika pomáhá odhadnout, kdy se hlavní obsah stránky stane pro uživatele viditelným.
Představte si například, že návštěvník otevře článek na blogu. Pozadí stránky a navigační menu se mohou zobrazit téměř okamžitě, ale hlavní nadpis nebo úvodní obrázek se může načítat několik sekund. V takové situaci může mít návštěvník pocit, že se stránka stále načítá, i když jsou některé její prvky už viditelné. Dobrá hodnota LCP by měla být 2,5 sekundy nebo méně. Pokud se hodnota pohybuje mezi 2,5 a 4 sekundami, stránka potřebuje zlepšení. Hodnota LCP vyšší než 4 sekundy se považuje za špatnou.
LCP může ovlivnit několik faktorů, včetně pomalé odezvy serveru, velkých obrázků, CSS a JavaScriptu blokujících vykreslování a zpoždění při objevení hlavního obsahu.
Pro zlepšení LCP mohou provozovatelé webů podniknout následující kroky:
- Optimalizujte obrázky: Zmenšete velikost souborů obrázků a tam, kde je to vhodné, používejte moderní formáty jako WebP nebo AVIF.
- Zlepšete dobu odezvy serveru: Využívejte efektivní hostingové prostředky, cachování a síť pro doručování obsahu (CDN), pokud jsou pro daný web vhodné.
- Upřednostněte hlavní obsah: Zajistěte, aby prohlížeč dokázal důležité obrázky objevit přímo ve zdrojovém kódu HTML, a v případě potřeby upřednostněte jejich načítání.
- Omezte zdroje blokující vykreslování: Optimalizujte soubory CSS a JavaScript, které prohlížeči brání v zobrazení hlavního obsahu.
- Nepoužívejte lazy loading u obrázku LCP: Pokud bude obrázek pravděpodobně prvkem LCP, odložení jeho načítání může způsobit, že stránka bude působit pomaleji.
Tyto techniky mohou zkrátit dobu, po kterou uživatelé čekají na zobrazení hlavního obsahu. Nejúčinnější řešení však závisí na příčině zpoždění, proto je důležité stránku před provedením změn změřit.
Co je Interaction to Next Paint (INP)?
Interaction to Next Paint (INP) měří, jak pohotově web reaguje, když s ním uživatelé pracují. Hodnotí prodlevu mezi interakcí uživatele, například kliknutím na tlačítko nebo stisknutím klávesy, a další vizuální aktualizací, kterou prohlížeč zobrazí.
Vezměme si internetový obchod, kde návštěvník klikne na tlačítko Přidat do košíku. Pokud prohlížeči trvá znatelnou dobu, než košík aktualizuje, návštěvník si může myslet, že tlačítko nefungovalo, a kliknout znovu. To může způsobit zmatek a dokonce vést k duplicitním akcím.
INP pomáhá tyto typy problémů odhalit tím, že měří odezvu stránky během celé návštěvy uživatele. Na rozdíl od First Input Delay (FID), která měřila pouze prodlevu před tím, než prohlížeč začal zpracovávat první interakci, zohledňuje INP širší zážitek z interakcí po celou dobu života stránky. Dobrá hodnota INP je 200 milisekund nebo méně. Hodnoty vyšší než 200 milisekund a až do 500 milisekund potřebují zlepšení, zatímco hodnoty nad 500 milisekund se považují za špatné.
Častou příčinou špatné hodnoty INP je JavaScript, protože prohlížeč může muset spustit skripty dříve, než dokáže reagovat na vstup uživatele a zobrazit aktualizaci. Dlouho běžící úlohy mohou prohlížeči bránit v pohotovém zpracování interakcí.
Pro zlepšení INP mohou vývojáři využít několik technik:
- Omezte zbytečný JavaScript: Odstraňte nepoužívaný kód a nenačítejte skripty, které aktuální stránka nepotřebuje.
- Rozdělte dlouhé úlohy: Rozdělte velké úlohy JavaScriptu na menší, aby měl prohlížeč více příležitostí zpracovat interakce uživatele.
- Optimalizujte obsluhu událostí: Udržujte funkce související s interakcemi co nejjednodušší a nejefektivnější.
- Vyhněte se zbytečným aktualizacím DOM: Aktualizace příliš mnoha prvků najednou může prodloužit dobu vykreslování a zpozdit další vizuální aktualizaci.
- Omezte skripty třetích stran: Analytické nástroje, reklamní skripty a vložené služby mohou spotřebovávat výpočetní prostředky a ovlivňovat odezvu.
Zlepšení INP vyžaduje víc než jen zmenšení celkové velikosti souborů JavaScriptu. Vývojáři také musí rozumět tomu, kdy se skripty spouštějí a kolik práce musí prohlížeč po interakci vykonat.
Co je Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) měří vizuální stabilitu webové stránky. Zaměřuje se na nečekané změny pozice viditelných prvků během zobrazování stránky.
Představte si například, že návštěvník čte článek a najednou vidí, jak se text posune dolů, protože se nad ním objevila reklama. Pokud se návštěvník chystal kliknout na odkaz, nečekaný posun může způsobit, že klikne na jiný prvek. Tyto změny rozvržení mohou web ztížit používání, zejména na mobilních zařízeních, kde je viditelná plocha omezená. Dobrá hodnota CLS je 0,1 nebo méně. Hodnoty vyšší než 0,1 a až do 0,25 potřebují zlepšení, zatímco hodnoty nad 0,25 se považují za špatné.
Nečekané posuny rozvržení může způsobit několik běžných problémů. Vizuální stabilitu mohou ovlivnit obrázky bez definovaných rozměrů, dynamicky vkládané reklamy, později načítaný obsah i webová písma, která mění vzhled textu.
Ke zlepšení CLS mohou pomoci následující techniky:
- Nastavte rozměry obrázků: Uveďte šířku a výšku obrázků nebo použijte poměry stran v CSS, abyste potřebný prostor vyhradili ještě před načtením obrázku.
- Vyhraďte prostor pro reklamy: Vyčleňte pro reklamní kontejnery dostatek místa, aby se okolní obsah při zobrazení reklam neposouval.
- Nevkládejte obsah nad stávající obsah: Pokud je třeba zobrazit nové prvky, umístěte je tam, kde nečekaně neposunou obsah, který si uživatelé právě prohlížejí.
- Optimalizujte načítání písem: Používejte vhodné strategie načítání písem a záložní písma, abyste omezili nečekané změny v rozvržení textu.
- Používejte vhodné CSS animace: Pokud je to možné, upřednostňujte animace založené na vlastnostech jako transform a opacity před vlastnostmi, které způsobují změny rozvržení.
Je důležité si uvědomit, že ne každý posun rozvržení je škodlivý. Změna, ke které dojde přímo v reakci na interakci uživatele, může být očekávaná. CLS se zaměřuje na nečekanou vizuální nestabilitu a používá metodu hodnocení založenou na dopadu a vzdálenosti posunu rozvržení.
Jaké jsou doporučené prahové hodnoty Core Web Vitals?
Google stanovuje konkrétní prahové hodnoty, které provozovatelům webů pomáhají určit, zda jejich stránky nabízejí dobrý uživatelský zážitek. Tyto prahové hodnoty rozdělují výkon do tří kategorií: dobrý, potřebuje zlepšení a špatný.
Tyto prahové hodnoty pomáhají vývojářům hodnotit každou metriku zvlášť. Jediný test však nestačí k určení, zda web poskytuje dobrý zážitek konzistentně.
Google doporučuje hodnotit Core Web Vitals na 75. percentilu návštěv stránky, přičemž výsledky pro mobilní zařízení a desktop se posuzují odděleně. To znamená, že alespoň 75 % měřených návštěv by mělo u každé metriky splňovat hranici pro dobrý výsledek.
Předpokládejme například, že web má na 75. percentilu hodnotu LCP 2 sekundy. To znamená, že 75 % měřených návštěv stránky má LCP 2 sekundy nebo méně, což splňuje doporučenou prahovou hodnotu.
Web by se měl snažit splnit hranice pro dobrý výsledek u všech tří metrik, místo aby se soustředil jen na svůj nejlepší výsledek.
Jaké jsou nástroje pro měření Core Web Vitals?
Core Web Vitals lze měřit pomocí několika nástrojů od Googlu. Tyto nástroje pomáhají vývojářům pochopit, jak web funguje, a odhalit oblasti, které je třeba zlepšit.
PageSpeed Insights
PageSpeed Insights patří k nejužitečnějším nástrojům pro kontrolu Core Web Vitals. Poskytuje data od skutečných uživatelů, pokud jsou k dispozici, i laboratorní data shromážděná pomocí simulovaného testu. Nabízí také doporučení pro zlepšení výkonu stránky.
Google Search Console
Google Search Console obsahuje přehled Core Web Vitals, který ukazuje, které skupiny stránek poskytují dobrý uživatelský zážitek a které potřebují zlepšení. Využívá data z reálného provozu, aby provozovatelům webů pomohl odhalit problémy s výkonem na více stránkách.
Chrome DevTools a Lighthouse
Chrome DevTools a Lighthouse pomáhají vývojářům testovat výkon stránky v kontrolovaném prostředí. Dokážou odhalit problémy související se spouštěním JavaScriptu, načítáním obrázků, posuny rozvržení a dalšími faktory, které ovlivňují Core Web Vitals.
Jaký je rozdíl mezi daty z terénu a laboratorními daty?
Core Web Vitals lze hodnotit pomocí dvou typů dat: dat z terénu a laboratorních dat. Pochopení rozdílu pomáhá vývojářům správně interpretovat výsledky testů a zvolit vhodný přístup ke zlepšení výkonu webu.
Data z terénu
Data z terénu se shromažďují od skutečných uživatelů při procházení webu. Odrážejí reálné podmínky procházení, včetně různých zařízení, síťových připojení a interakcí uživatelů.
Tato data jsou obzvlášť užitečná pro zjištění, zda web v reálných situacích splňuje prahové hodnoty Core Web Vitals doporučené Googlem.
Laboratorní data
Laboratorní data se shromažďují v kontrolovaném testovacím prostředí pomocí nástrojů, jako je Lighthouse. Pomáhají vývojářům reprodukovat problémy s výkonem a zkoumat jejich možné příčiny.
Na rozdíl od dat z terénu laboratorní data nepředstavují každý reálný uživatelský zážitek. Web proto může v laboratorních testech a v měřeních od skutečných uživatelů dosahovat odlišných výsledků.
Jak zlepšit Core Web Vitals
Zlepšení Core Web Vitals vyžaduje identifikovat problémy, které ovlivňují rychlost načítání, interaktivitu a vizuální stabilitu. Správné řešení závisí na tom, která metrika vykazuje slabé výsledky.
Zlepšete Largest Contentful Paint (LCP)
Pro zlepšení LCP by se vývojáři měli zaměřit na co nejrychlejší načtení největšího viditelného obsahového prvku. Mezi běžná zlepšení patří optimalizace obrázků, výběr spolehlivé služby webhostingu, zkrácení doby odezvy serveru, zapnutí cachování a předcházení zbytečným zpožděním při načítání důležitých zdrojů.
Zlepšete Interaction to Next Paint (INP)
INP lze zlepšit omezením dlouho běžících úloh JavaScriptu a minimalizací zbytečné práce v hlavním vlákně. Vývojáři by také měli optimalizovat obsluhu událostí a nenutit prohlížeč vykonávat příliš mnoho práce poté, co uživatel klikne, ťukne nebo začne psát.
Zlepšete Cumulative Layout Shift (CLS)
Pro snížení CLS by vývojáři měli vyhradit prostor pro obrázky, videa, reklamy a další prvky ještě před jejich načtením. Nevkládejte nečekaně nový obsah nad stávající obsah a pro vizuální prvky používejte pokud možno konzistentní rozměry.
Závěrem
Core Web Vitals pomáhají vývojářům pochopit, jak uživatelé vnímají web z hlediska výkonu načítání, interaktivity a vizuální stability. Měřením LCP, INP a CLS mohou provozovatelé webů odhalit problémy s výkonem a upřednostnit zlepšení, díky nimž se jejich stránky budou snáze používat.
Pravidelné sledování, data od skutečných uživatelů a cílená optimalizace mohou webům pomoci dlouhodobě udržet dobré výsledky Core Web Vitals
Často kladené otázky
1. Jaký je rozdíl mezi daty z terénu a laboratorními daty?
Data z terénu pocházejí od skutečných uživatelů, kteří web navštěvují, zatímco laboratorní data se shromažďují v kontrolovaném testovacím prostředí. Data z terénu odrážejí skutečný uživatelský zážitek, kdežto laboratorní data pomáhají vývojářům problémy s výkonem reprodukovat a diagnostikovat.
2. Jak mohu zlepšit své výsledky Core Web Vitals?
Core Web Vitals můžete zlepšit optimalizací obrázků, omezením zbytečného JavaScriptu, zkrácením doby odezvy serveru, zapnutím cachování a předcházením nečekaným posunům rozvržení.
