Core Web Vitals: uspějte v rychlostním testu Google

V roce 2021 Google oznámil, že Core Web Vitals jsou ranking faktory. Tři konkrétní metriky nyní přímo ovlivňují vaše pozice ve vyhledávání: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) a Interaction to Next Paint (INP). Weby se špatnými hodnotami se hůře umisťují. Weby s výbornými hodnotami získávají výhodu v pořadí. Pro moderní SEO je splnění Core Web Vitals nezbytné.

Důsledky jsou zásadní. Výkon už nelze ignorovat. Nemůžete postavit pomalý web a doufat v dobré pozice. Google jasně řekl, že na uživatelské zkušenosti záleží, a Core Web Vitals ji číselně vyjadřují. Optimalizace Core Web Vitals už není volitelná, je nutná pro konkurenceschopnou viditelnost ve vyhledávání.

Co jsou Core Web Vitals a proč jsou důležité

Core Web Vitals měří tři oblasti uživatelské zkušenosti: rychlost načítání (LCP), vizuální stabilitu (CLS) a odezvu (INP). Stránka Google Web Vitals podrobně popisuje každou metriku. Tyto tři metriky představují nejdůležitější aspekty toho, jak uživatelé váš web vnímají.

Google nasbíral biliony datových bodů od skutečných uživatelů, aby určil, které metriky mají největší váhu. Výsledkem jsou Core Web Vitals. Nejde o libovolné prahové hodnoty, ale o měření podložená daty, která ukazují, co dělá web rychlým a responzivním pro skutečné uživatele.

Oficiální oznámení Google vysvětluje, jak Core Web Vitals ovlivňují pozice ve vyhledávání. Google považuje Core Web Vitals za jeden z několika ranking faktorů. Kvalita a relevance obsahu jsou stále důležitější, ale dva stejně relevantní weby se seřadí podle výkonu v Core Web Vitals.

Largest Contentful Paint (LCP): měření rychlosti načítání

Largest Contentful Paint (LCP) měří, jak dlouho trvá, než se největší obsahový prvek na stránce stane pro uživatele viditelným. Může jít o obrázek, video, nadpis nebo textový blok. LCP měří okamžik, kdy uživatel vidí hlavní obsah a vnímá, že se stránka načetla.

Doporučení Google: LCP by mělo být pod 2.5 sekundy. Stránky s LCP pod 2.5 sekundy jsou považovány za „dobré“. Stránky s LCP mezi 2.5 a 4 sekundami potřebují zlepšení. Stránky s LCP nad 4 sekundy jsou „špatné“. Uživatelé, kteří zažijí LCP nad 3 sekundy, vnímají stránku jako pomalou. Uživatelé, kteří zažijí LCP nad 4 sekundy, stránku často opustí.

Běžné příčiny pomalého LCP: pomalá odezva serveru, CSS a JavaScript blokující vykreslení, neoptimalizované obrázky a velká písma, jejichž načtení trvá dlouho. LCP opravíte zrychlením serveru (snížením času do prvního bajtu, TTFB), odstraněním zdrojů blokujících vykreslení, odložením JavaScriptu, optimalizací a kompresí obrázků, použitím moderních formátů obrázků (WebP) a předběžným načtením kritických zdrojů.

PageSpeed Insights ukazuje vaše skóre LCP a nabízí konkrétní doporučení. Test spusťte na klíčových stránkách, doporučení seřaďte podle dopadu a nejdříve implementujte opravy s nejvyšším dopadem.

Cumulative Layout Shift (CLS): měření vizuální stability

Cumulative Layout Shift (CLS) měří neočekávané pohyby prvků stránky během jejího načítání. Když čtete článek a text náhle skočí dolů, protože se nad ním načetla reklama, jde o posun rozvržení. CLS vyjadřuje, jak moc se rozvržení stránky během načítání posouvá.

Doporučení Google: CLS by mělo být pod 0.1. Skóre CLS pod 0.1 je „dobré“. Skóre mezi 0.1 a 0.25 potřebuje zlepšení. Skóre nad 0.25 je „špatné“. I malé posuny se sčítají. CLS 0.15 znamená, že se prvky stránky během načítání celkem posunuly o 15 % výšky zobrazené části. Uživatelé to považují za otravné a zažívají frustraci.

Běžné příčiny vysokého CLS: reklamy, které se načítají asynchronně, obrázky bez určené šířky a výšky, vložené prvky (videa YouTube, widgety sociálních sítí), které se načítají asynchronně, a písma, která se náhle vymění. CLS opravíte uvedením rozměrů obrázků v HTML (atributy width a height), rezervováním prostoru pro reklamy ještě před jejich načtením, použitím font-display: swap v CSS pravidlech @font-face, aby se zabránilo trhání při výměně písma, a načítáním videí a vložených prvků synchronně nebo s předem vyhrazeným prostorem.

Každý obrázek na vašem webu by měl mít explicitně uvedenou šířku a výšku. Prohlížeči tak řeknete, kolik místa má před načtením obrázku rezervovat. Bez rozměrů prohlížeč neví, kolik místa rezervovat, a při příchodu obrázku dojde k posunu rozvržení.

Interaction to Next Paint (INP): měření odezvy

Interaction to Next Paint (INP) měří, jak rychle stránka reaguje na uživatelské interakce (kliknutí, klepnutí, vstup z klávesnice). INP je čas mezi okamžikem, kdy uživatel na stránce něco udělá, a okamžikem, kdy stránka na tuto akci vizuálně reaguje. Responzivní stránka reaguje v milisekundách. Nereagující stránka potřebuje sekundy.

Doporučení Google: INP by mělo být pod 200 milisekund. Skóre pod 200 ms je „dobré“. Skóre mezi 200 a 500 ms potřebuje zlepšení. Skóre nad 500 ms je „špatné“. Uživatelé očekávají okamžitou odezvu. INP 500 ms působí trudně. INP 1 sekunda působí jako rozbité.

Běžné příčiny špatného INP: náročný JavaScript blokující hlavní vlákno, velké skripty třetích stran, neefektivní obsluha událostí a nevyužívání requestIdleCallback. INP opravíte rozdělením dlouhých úloh JavaScriptu na menší části, odložením nekritického JavaScriptu, odstraněním nepoužívaných skriptů, optimalizací posluchačů událostí a použitím web workerů pro výpočetně náročné úkoly.

INP je často nejtěžší metrika Core Web Vitals k optimalizaci, protože vyžaduje znalost JavaScriptu. Pokud ve vašem týmu chybí zkušenosti s optimalizací JavaScriptu, zvažte najmutí konzultanta pro výkon nebo externí službu optimalizace výkonu.

Jak se Core Web Vitals měří

Core Web Vitals se měří dvěma způsoby: laboratorními a terénními daty. Laboratorní data pocházejí z nástrojů jako PageSpeed Insights a Lighthouse, které běží v kontrolovaném prostředí. Terénní data pocházejí od skutečných uživatelů, kteří váš web navštíví. Google upřednostňuje terénní data, protože odrážejí skutečnou uživatelskou zkušenost.

Vzdělávací cesta Google o výkonu vysvětluje rozdíl mezi laboratorními a terénními metrikami. Laboratorní data vám pomáhají najít problémy a testovat opravy. Terénní data ukazují výkon v reálném provozu. Můžete mít výborná laboratorní skóre a špatná terénní, pokud vaši skuteční uživatelé používají pomalé sítě nebo staré přístroje.

Google Search Console zobrazuje terénní data Core Web Vitals. Zpráva ukazuje měření skutečných uživatelů agregovaná z Chrome User Experience Report (CrUX). Pokud váš web nemá dostatek dat od skutečných uživatelů, Google místo toho poskytne laboratorní data z Lighthouse.

Referenční hodnoty a vyhovující skóre

Google definuje „dobré“ Core Web Vitals jako splnění 75. percentilu uživatelské zkušenosti. To znamená, že 75 % skutečných uživatelů zažije váš web na úrovni prahu nebo lépe. Prahové hodnoty jsou tyto:

LCP: 2.5 sekundy nebo méně. CLS: 0.1 nebo méně. INP: 200 milisekund nebo méně. Tyto prahové hodnoty byly vědecky ověřeny analýzou bilionů skutečných uživatelských interakcí. Stránky na těchto prahových hodnotách nebo nad nimi nabízejí dobrou uživatelskou zkušenost.

Google však nevyžaduje, aby všechny vaše stránky prošly Core Web Vitals na 100 %. Pokud 75 % vašich stránek projde, je váš web považován za web s „dobrými“ Core Web Vitals celkově. Můžete tedy mít některé pomalejší stránky a stále projít, pokud je většina stránek s návštěvností rychlá.

Optimalizace každé metriky: praktické kroky

Pro optimalizaci LCP: nejdříve změřte TTFB (čas do prvního bajtu) pomocí PageSpeed Insights. Pokud je TTFB pomalé (nad 600 ms), je úzkým hrdlem váš server. Vylepšete hosting, optimalizujte backendový kód nebo použijte síť doručování obsahu (CDN). Pokud je TTFB dobré, ale LCP pomalé, blokuje vykreslení váš CSS nebo JavaScript. Odložte nekritický JavaScript a vložte kritické CSS pro obsah v horní části stránky.

Pro optimalizaci CLS: auditujte web kvůli prvkům, které se během načítání pohybují. K nalezení posouvajících se prvků použijte vývojářské nástroje prohlížeče. Přidejte atributy width a height ke každému obrázku. V CSS použijte font-display: swap. Rezervujte prostor pro reklamy, vložené prvky a dynamický obsah.

Pro optimalizaci INP: v kartě Performance vývojářských nástrojů Chrome najděte dlouhé úlohy JavaScriptu (úlohy trvající déle než 50 ms). Rozdělte dlouhé úlohy. Odložte nekritický JavaScript. Pro méně důležité práce použijte requestIdleCallback. Testujte na skutečných zařízeních, nejen na stolních počítačích.

Dlouhodobé sledování Core Web Vitals

Výkon Core Web Vitals sledujte v Google Search Console. Zpráva Core Web Vitals ukazuje metriky skutečných uživatelů vašeho webu a jejich srovnání s prahovými hodnotami Google. Stránky se řadí do kategorií Dobré, Potřebuje zlepšení nebo Špatné.

Nastavte upozornění na sledování. Pokud se vaše Core Web Vitals zhorší, musíte okamžitě zjistit příčinu. Mezi možné důvody patří: nové nasazení kódu, které přineslo neefektivitu, nové skripty třetích stran, změny obrázků nebo médií, nebo problémy s hostingem.

Sledujte mobil a počítač odděleně. Mobilní zařízení mají obvykle pomalejší procesory a sítě, takže Core Web Vitals bývají na mobilu horší než na počítači. U webů s výraznou mobilní návštěvností upřednostněte optimalizaci pro mobil.

Core Web Vitals a strategie SEO

Core Web Vitals jsou dnes základní ranking faktor, co do důležitosti srovnatelný se zpětnými odkazy a kvalitou obsahu. Weby se špatnými Core Web Vitals se pravděpodobně nebudou dobře umisťovat, bez ohledu na kvalitu obsahu. Optimalizace výkonu proto musí být součástí vaší SEO strategie, ne dodatečným nápadem.

Pokud soupeříte o pozice a vaši konkurenti mají lepší Core Web Vitals, mají výhodu v pořadí. Pokud je váš web pomalý a nereaguje, nemůžete vyhrát jen obsahem. Abyste soupeřili na rovnoprávné úrovni, musíte výkon konkurentů vyrovnat nebo překonat.

Závěr

Core Web Vitals jsou dnes nezbytné pro úspěch v SEO. Optimalizace LCP, CLS a INP přímo zlepšuje vaše pozice ve vyhledávání i uživatelskou zkušenost. Weby s výbornými Core Web Vitals předčí podobně relevantní weby se špatnými hodnotami. Není cesty kolem toho: pokud chcete přední pozice, musíte Core Web Vitals splnit.

Začněte spuštěním PageSpeed Insights na klíčových stránkách. Najděte své největší úzké hrdlo a opravte je jako první. Upřednostněte optimalizaci pro mobil. Výkon pravidelně sledujte v Google Search Console. Pomocí našeho auditu GEO SEO najděte problémy s Core Web Vitals napříč celým webem a sledujte zlepšení v čase.