Výkon vašeho webu není jen o rychlosti, ale o tom, jak jej vnímají uživatelé. Core Web Vitals (CWV) jsou výkonnostní metriky Google, které měří uživatelskou zkušenost – od rychlosti načítání přes interaktivitu až po vizuální stabilitu. Zlepšení CWV může zvýšit vaše SEO rankingy, konverzní poměr i celkovou spokojenost uživatelů.
V tomto článku vám představíme 5 triků, jak zlepšit CWV:
- Zpoždění JS při interakci s uživatelem
- Líné načítání obrázků
- Chybějící atributy velikosti obrázků
- Odstranění nepoužívaného JS/CSS
- Osvědčené postupy INP
Co jsou to CWV?
Core Web Vitals (CWV) je sada metrik, které měří, jak rychle, responsivně a vizuálně stabilně váš web působí na uživatele. Jsou součástí Google signálů pro page experience, což z nich dělá přímý faktor ovlivňující úspěch vašeho webu ve výsledcích vyhledávání.
Existují čtyři hlavní metriky, které je potřeba znát.
Co je to LCP (Největší contentové vykreslení)?
LCP měří, jak dlouho trvá, než se na obrazovce uživatele načte největší viditelný prvek (např. video, obrázek nebo textový blok). Ideální hodnota je 2,5 sekundy nebo méně. Špatné LCP obvykle znamená problémy se serverovou latencí, render-blocking zdroji nebo neoptimalizovanými médii.
Co je to FCP (první contentové vykreslení)?
FCP označuje moment, kdy se na obrazovce poprvé zobrazí jakýkoli content (text, obrázek nebo canvas). To uživatelům dává jasný signál, že se stránka načítá. Čím dříve FCP nastane, tím rychleji uživatelé vnímají váš web jako rychlý.
Co je to CLS (kumulativní posun rozvržení)?
CLS měří vizuální stabilitu, tedy to, jak moc se content během načítání nečekaně posouvá. Typickým příkladem je situace, kdy se banner nebo obrázek náhle posune a uživatel omylem klikne na jiné tlačítko – něco, co už nejspíš zažil každý z nás. Hodnota CLS pod 0,1 je považována za dobrou.
Co je INP (Interakce s další barvou)?
INP měří, jak responsivně váš web působí při interakci uživatelů, například při kliknutí na tlačítko nebo rozbalení menu. Dobrá hodnota INP je méně než 200 milisekund. Jde o novou metriku, která nahrazuje FID (First Input Delay) a poskytuje komplexnější pohled na interaktivitu.
Tyto metriky společně představují reálný výkon a uživatelskou spokojenost. Jejich optimalizace je klíčová pro SEO i celkový user experience.
Jak zkontrolovat CWV
Než začnete CWV optimalizovat, musíte je změřit. Naštěstí Google nabízí několik nástrojů, které vám s tím pomohou.
PageSpeed Insights
PageSpeed Insights je standardní nástroj od Google pro hodnocení výkonu vašeho webu. Poskytuje jak laboratorní, tak reálná data – tedy informace o tom, jak si váš web vede na skutečných zařízeních i v kontrolovaných podmínkách. Získáte také konkrétní doporučení, která vám mohou výrazně ušetřit čas při řešení problémů.
Chrome User Experience Report (CrUX)
Pomocí CrUX Visualizeru získáte přístup k reálným uživatelským datům shromážděným od uživatelů Chrome. Kromě samotného výkonu vašeho webu můžete sledovat také výkonnostní trendy a porovnat je s průměry a standardy ve vašem odvětví.
Google Search Console
A pak je tu samozřejmě Google Search Console, kde přehled CWV ukazuje, které URL mají špatný výkon na desktopu i mobilu. Podobné stránky se stejnými problémy seskupuje dohromady, což vám výrazně usnadní prioritizaci a plánování oprav.
Pravidelné spouštění těchto nástrojů vám umožní sledovat zlepšení a také odhalovat nové problémy, které se objevují, jak se váš web vyvíjí. Tyto nástroje jsou zdarma a existuje mnoho dalších — a také placené nástroje s širší nabídkou funkcí. Vyberte si ten, který nejlépe odpovídá vašim potřebám.
1. Zpoždění JS při interakci s uživatelem
Jedním z nejúčinnějších triků pro zlepšení metrik CWV je odložení spouštění JavaScriptu až do momentu, kdy uživatel skutečně interaguje se stránkou.
Mnoho webů načítá desítky JavaScriptových souborů okamžitě, ještě předtím, než uživatel vůbec scrolluje nebo na něco klikne. To zpomaluje LCP a negativně ovlivňuje INP, protože prohlížeč musí zpracovat veškerý kód hned na začátku.
Tím, že odložíte neesenciální JS až na interakci (například scroll nebo kliknutí), můžete výrazně zrychlit počáteční načítání stránky.
Odložením skriptů se hlavní content může vykreslit jako první, což působí rychleji jak na uživatele, tak na Google crawlers. Často jde o nejrychlejší způsob, jak zároveň zlepšit LCP, FCP i INP.
Avšak pozor! Přestože tento trik dokáže udělat zázraky, nejde o trvalé řešení. Ve skutečnosti jen zametáte problém pod koberec. JavaScript stále existuje a zůstává neoptimalizovaný. Pro dlouhodobou nápravu byste měli skripty refaktorovat nebo úplně odstranit ty, které nejsou potřeba. Pokud ale potřebujete rychlé zlepšení výkonu, je tohle jeden z nejlepších způsobů. Některé skripty jsou však nezbytné pro správné načtení stránky, takže je možná budete muset identifikovat a přidat na whitelist. Testování ve staging prostředí je skvělý a bezpečný způsob, jak si tuto funkci vyzkoušet.
2. Lazy loading obrázků
Obrázky jsou obvykle jedním z nejtěžších prvků na každé stránce. Lazy loading umožňuje prohlížečům odložit načítání obrázků, dokud se nepřiblíží ke zobrazení na obrazovce. To snižuje počáteční dobu načítání stránky i spotřebu dat, čímž zlepšuje LCP i FCP. Je to nutnost pro každý moderní web a výrazně vám zlepší vaše CWV.
V praxi jde jen o přidání atributu pro lazy loading do HTML tagu obrázku. Na WP existuje mnoho pluginů, které tuto funkci nabízejí.
Důležité upozornění: nelze používat lazy loading u obrázků, které se zobrazují above the fold (tedy v části viditelné ihned po načtení stránky). Jejich odložené načítání by je zbytečně zpomalilo a ve skutečnosti by zhoršilo váš LCP. Vždy testujte, aby se hero obrázky, bannery a veškerý above-the-fold content načítal okamžitě.
3. Chybí atributy velikosti obrázku
Neočekávané posuny layoutu patří mezi největší frustrace uživatelů a přímo ovlivňují váš CLS.
Když obrázek nemá definované atributy width a height, prohlížeč neví, kolik místa má rezervovat. Výsledkem je, že když se obrázek konečně načte, posune content dolů nebo do strany, což způsobí layout shift.
Naštěstí je to velmi snadné opravit — stačí zajistit, aby měly všechny obrázky uvedené rozměry, díky čemuž prohlížeč rezervuje potřebné místo a vy nebudete uživatele zbytečně frustrovat.
Pokud váš CLS zůstává vysoký i po doplnění velikostí obrázků, je dobré prověřit i další možné viníky, jako jsou dynamické reklamy, animace nebo vložené iframy.
4. Odstraňte nepoužívané JS a CSS
Je důležité plně pochopit, že pokaždé, když se stránka načítá, prohlížeč stáhne veškeré připojené CSS a JS soubory — i ty, které na dané stránce vůbec nemusí být použity.
To je poměrně běžný problém. Pravděpodobně máte v projektu spoustu kódu nebo částí kódu, které nejsou nutné k renderování konkrétní stránky, ale přesto se načítají a spotřebovávají cenné zdroje.
Tento zbytečný kód zvyšuje velikost stránky, zpomaluje vykreslování a zatěžuje šířku pásma. U větších webů mohou globální CSS nebo JS soubory snadno dosahovat stovek kilobajtů, přestože jednotlivé stránky využívají jen malou část z nich.
Řešením je zajistit, aby se načítal pouze kód, který je pro danou stránku skutečně potřeba. Existují různé WordPress pluginy, které s tím mohou pomoci, ale správná implementace vyžaduje trpělivost a určitou úroveň dovedností. Jde však o jednu z nejúčinnějších dlouhodobých strategií pro udržení zdravých CWV skóre.
5. Nejlepší postupy INP
Jak již bylo zmíněno, INP měří, jak responsivně váš web působí při interakci uživatele. Prakticky jde o čas mezi okamžikem, kdy uživatel klikne na tlačítko, a momentem, kdy na toto kliknutí stránka zareaguje.
Jedním z častých viníků je tlačítko pro souhlas s cookies. Když uživatel přijme cookies, mnoho webů okamžitě spustí lavinu tracking skriptů a analytických tagů, které se provedou naráz a krátce prohlížeč zaseknou. To způsobí nárůst hodnoty INP a vede ke špatné uživatelské zkušenosti.
Aby se tomu předešlo, můžete zvážit odložení skriptů, které nejsou potřeba okamžitě, a přidat atributy async nebo defer u externích skriptů. A nakonec, a to je zásadní, ujistěte se, že používáte různé tracking nástroje pouze pro nezbytné obchodní účely. Pokud data nevyužíváte, daný nástroj odstraňte. Nástroje typu heatmap jsou například extrémně náročné — a přestože jsou užitečné, ve skutečnosti vám stačí jen vzorek dat, abyste byli schopni vyvodit závěry.
Správným řízením toho, jak, kdy a zda se skripty načítají, zajistíte plynulejší interaktivitu a zlepšíte jak hodnotu INP, tak celkovou spokojenost uživatelů.
Proč na technickém SEO záleží
Optimalizace CWV není jen technické cvičení — je to zásadní součást silného SEO základu. Technické SEO zajišťuje, že váš web je rychlý, snadno procházený a přístupný jak uživatelům, tak vyhledávačům. Bez něj mohou i skvělý content a kvalitní backlinky podávat slabší výsledky, protože Google klade velký důraz na uživatelskou zkušenost jako součást svého ranking systému.
Technical SEO vám umožňuje získat maximální přínos ze všech ostatních SEO aktivit a zajistí, že plně využijete potenciál svého contentu i link buildingovému úsilí.
Představte si technical SEO jako základy domu. Pokud jsou slabé, všechno, co na nich postavíte — bez ohledu na to, jak skvělé to je — se časem začne hroutit.
Jakmile máte výkon webu optimalizovaný, je čas posílit jeho viditelnost. A právě zde vstupují do hry Search Royals. Silný backlinkový profil v kombinaci se špičkovým CWV výkonem je ideální recept na přední ranking ve vyhledávání. Ozvěte se nám ještě dnes a začněte budovat svou autoritu a růst svého podnikání.
