
Core Web Vitals je soubor ukazatelů pro měření kvality uživatelského prostředí na webových stránkách. Google je započítává jako signály pro hodnocení, a proto jsou důležité i pro (vícejazyčné) SEO. Pokud je zanedbáte, riskujete, že se vám návštěvníci i vyhledávače vyhnou.
Abyste se tomuto scénáři vyhnuli, dozvíte se v tomto příspěvku vše, co potřebujete vědět o zlepšení těchto metrik na svých vícejazyčných webových stránkách. Vysvětlíme vám, co jsou Core Web Vitals, jak otestovat aktuální výkonnost vašeho webu a krok za krokem vám poradíme, jak jednotlivé metriky na vašem webu zlepšit.
Jak již bylo zmíněno, služba Core Web Vitals měří uživatelskou zkušenost s webovými stránkami. Všechny nějakým způsobem souvisejí s rychlostí načítání a interaktivitou webových stránek. Tyto metriky zavedla společnost Google v roce 2020 a staly se součástí jejího vyhledávacího algoritmu. Pojďme si je projít jednu po druhé.
První z nich je Largest Contentful Paint (LCP). Měří dobu, za kterou se stránka načte, než se stane zobrazitelnou a použitelnou. Určuje to tak, že zjišťuje největší obsahový prvek webové stránky, kterým je často obrázek nebo textový blok, a okamžik, kdy se stane viditelným pro návštěvníky.

Tento interval se měří v sekundách a používá se jako skóre LCP. Společnost Google definovala několik mezních bodů, které určují, jakého času by měl váš web dosáhnout.

Jak vidíte výše, dobrým výsledkem je až 2,5 sekundy nabití prvku LCP. Doba do 4 sekund je přijatelná, ale měla by se zlepšit, a cokoli nad tuto dobu považuje Google za příliš dlouhé.
Tato další metrika sleduje stabilitu rozvržení webové stránky během jejího načítání, což znamená, jak velký pohyb se projeví, když se na stránce objeví nové prvky. Nazývá se kumulativní posun rozložení (Cumulative Layout Shift, CLS).
Proč na tom záleží?
Vysoká míra CLS může narušit interakci uživatele s vaším webem. Kromě toho, že jednoduše nevypadá dobře, může také způsobit, že ztratí své místo na stránce kvůli pohybujícímu se textu nebo že omylem klikne na nesprávný prvek, protože se posune v nesprávný okamžik.
CLS se vypočítá na základě toho, jak moc se rozložení při načítání pohybuje a jak velké tyto pohyby jsou. Tyto dva poměry se navzájem vynásobí a získá se skóre.

Skóre CLS nižší než 0,1 je dobré; do 0,25 je třeba zlepšení a cokoli nad touto hodnotou je nepřijatelné.
Jedna poznámka: Pohyb stránky do 500 ms od interakce uživatele se stránkou (například kliknutí) neovlivní vaše skóre CLS. Ty jsou považovány za záměrné.
Interaction to Next Paint neboli INP je nejnovějším přírůstkem metrik Core Web Vitals. V březnu 2024 nahradí jedno z původních měření - First Input Delay (FID).
Obě tyto metody sledují dobu mezi interakcí návštěvníka s prvkem stránky a rychlostí jeho reakce. Čím rychlejší reakce, tím samozřejmě lépe.
Zatímco funkce First Input Delay se zabývá pouze první interakcí návštěvníka, funkce Interaction to Next Paint sleduje všechny interakce se stránkou během návštěvy a zobrazuje nejhorší skóre. Tímto způsobem získáte přesnější obrázek o odezvě stránky.
Jaké je dobré skóre INP?
Doba do 200 ms je dobrá a do 500 ms je přiměřená; cokoli nad tuto dobu bude mít negativní dopad na hodnocení vašeho webu společností Google.

Jakmile víte, co přesně Core Web Vitals jsou, další logickou otázkou je, jak zjistíte, jak si váš web stojí? Nejjednodušší způsob, jak to zjistit, je použít nástroj pro testování rychlosti, jako je PageSpeed Insights.

Jednoduše zadejte adresu URL své webové stránky a spusťte test. Po dokončení se dozvíte nejen to, zda vaše webové stránky prošly hodnocením Core Web Vitals, ale také hodnoty pro každý z uvedených datových bodů.

Pokud jsou k dispozici, získáte kombinaci výsledků z reálného života i z laboratoře. Patří sem i informace ze služby CrUX, kde společnost Google shromáždila údaje o uživatelích webových stránek ze svého prohlížeče Chrome. Pokud je nemá k dispozici, získáte pouze měření z aplikace Lighthouse, která je vypočítává ad hoc.
Dalšími nástroji, které vám mohou poskytnout informace o výkonu Core Web Vitals, jsou GTmetrix, WebPageTest nebo rozšíření Chrome Web Vitals.
Co tedy máte dělat, když vaše hodnoty nejsou tak hvězdné? Pojďme si o tom nyní promluvit.
Od této chvíle budeme postupně vysvětlovat, jak zlepšit jednotlivé metriky Core Web Vital na vašem vícejazyčném webu. Budeme se zabývat tím, jak to udělat ručně, spolu se snadným způsobem, jak to udělat pro uživatele WordPressu pomocí pluginu WP Rocket.
WP Rocket umožňuje lidem bez technických znalostí rychle a bez námahy implementovat sofistikovaná vylepšení výkonu. Je to snadno jeden z nejvýkonnějších a pro začátečníky nejpřívětivějších pluginů cache.
Začněme několika obecnými tipy, jak zajistit rychlé načítání webových stránek:
Výše uvedené tipy vytvoří dobrý základ pro obecně rychlý výkon, než se dostanete ke konkrétnějším opatřením.
Existují dvě hlavní možnosti, jak vylepšit Largest Contentful Paint: optimalizace rychlosti načítání stránek obecně (jak je popsáno výše) a zrychlení doručování prvků LCP.
Jaký je váš prvek LCP? PageSpeed Insights vám to řekne v části Diagnostika.

Ukládání do mezipaměti a komprese jsou dvě základní techniky pro zlepšení výkonu webu. První z nich znamená ukládání vykreslených dat stránky, aby se k nim návštěvníci dostali rychleji. Je to obzvláště účinné, pokud k pohonu svých webových stránek používáte WordPress.
Proč?
V systémech CMS, jako je WordPress, se stránky obvykle vytvářejí dynamicky z kódu PHP a obsahu staženého z databáze. Server je převede do dokumentů HTML a odešle do prohlížeče.
Ukládání do mezipaměti tento proces urychluje tím, že na server ukládá předem vykreslené verze HTML vašich webových stránek, takže je můžete odeslat přímo návštěvníkům. Tím se může eliminovat několikeré obcházení stránek při každé návštěvě a uživatelský zážitek je mnohem rychlejší a lepší.
Komprese je na druhou stranu stejná jako vytváření souborů zip, jen se neprovádí v domácím počítači, ale na serveru. Zmenšuje soubory, které tvoří webové stránky, aby se mohly rychleji stahovat a zobrazovat.
Chcete-li na serveru aktivovat ukládání do mezipaměti i kompresi, musíte upravit soubor .htaccess. Obsahuje důležité směrnice pro fungování webového serveru a obvykle jej najdete v kořenovém adresáři svých webových stránek.

Můžete do něj zkopírovat a vložit následující kód, který aktivuje obě výše uvedené techniky optimalizace rychlosti:
Oba úryvky kódu pocházejí od společnosti GTmetrix a fungují pro servery Apache. Návody pro jiné servery, jako je NGINX, najdete online, například v tomto návodu na KeyCDN.
Pokud se vám to zdá hrozivé, můžete toho dosáhnout pomocí výše zmíněného pluginu WP Rocket. Zde stačí plugin nainstalovat a aktivovat - automaticky implementuje kompresi i ukládání do mezipaměti, a to i pro mobilní zařízení.

Cokoli, co můžete udělat pro zefektivnění doručování a zpracování kódu vašich webových stránek, pomůže zlepšit Největší Contentful Paint na vašich vícejazyčných webových stránkách. Pojďme si projít několik dobrých možností, jak na to:
Pro ruční miniaturizaci můžete použít nástroje jako Minifier nebo Grunt. Optimalizace CSS a JavaScriptu obvykle znamená spoustu analýz toho, co blokuje načítání stránek. Nástroje pro testování rychlosti vás upozorní na problematické skripty.

Poté je na vás, abyste k nim ručně přidali značky defer a async. Vypadají takto:
Můžete také rozdělit některé části kódu tak, abyste nejprve načetli pouze to, co je nezbytné. O tom se více dozvíte níže, až budeme mluvit o optimalizaci INP.
Pokud chcete tyto procesy automatizovat, WP Rocket umí kód minifikovat, odstranit nepoužívané CSS, odložit JavaScript a načíst jej asynchronně pouhým zaškrtnutím několika políček.

Optimalizace obrázků znamená zmenšení velikosti vizuálů na webových stránkách bez snížení kvality. Jedná se o skvělé obecné zlepšení výkonu a zejména pomáhá zlepšit Largest Contentful Paint, protože obrázky často končí jako prvky LCP.
Jak můžete optimalizovat obrázky na svých stránkách?
Ke kompresi obrázků a jejich převodu do jiných formátů můžete použít nástroje, jako je TinyPNG. Něco jako Image Resizer je také může oříznout na libovolné rozměry, které potřebujete. Možnosti pro to najdete také ve WordPressu v části Nastavení > Média.

Pokud používáte nejnovější verzi WordPressu (nebo novější než 5.4), měl by váš web mít ve výchozím nastavení povoleno líné načítání.
Pokud chcete automatické řešení, je tu Imagify. Je to jednoduchý plugin pro optimalizaci obrázků, který dobře spolupracuje s WP Rocket. Dokáže automaticky zpracovat vaše obrázky tak, aby byly lehčí a zároveň vyvážené z hlediska kvality a výkonu. Plugin převádí vaše vizuály do formátů WebP a Avif, mění velikost velkých obrázků a automaticky zobrazuje optimalizované verze na vašich webových stránkách WordPress.

Kromě toho WP Rocket nabízí líné načítání nejen pro obrázky, ale také pro pozadí CSS a vložená média, jako jsou videa. Navíc můžete z líného načítání vyloučit média, pokud to dává smysl.

Síť pro doručování obsahu (CDN) se skládá z několika vzájemně propojených počítačů umístěných v různých částech světa, které obsahují soubory vašich webových stránek. Jejím účelem je doručit je vašim návštěvníkům z místa, které je jim nejblíže, a to co nejrychleji. To je důležité zejména pro vícejazyčné webové stránky s mezinárodním publikem.
Z tohoto důvodu Weglot automaticky nastaví síť CDN, abyste mohli rychle doručit přeložený obsah po celém světě. Pokud nejste uživatelem služby Weglot , musíte se obvykle zaregistrovat do sítě CDN a nakonfigurovat ji pro svůj web. To se u jednotlivých poskytovatelů liší; zde jsou ukázkové pokyny.
Pokud chcete pomoci, WP Rocket má specializované doplňky pro Sucuri a Cloudflare, dvě populární řešení. Díky nim je konfigurace těchto sítí pro doručování obsahu pro vaše stránky rychlejší a jednodušší.

V nastavení CDN můžete povolit i jiné sítě zadáním názvu CNAME poskytovatele.

WP Rocket má také vlastní síť, nazvanou RocketCDN, kterou můžete automaticky nakonfigurovat přímo v pluginu. Kromě toho může WP Rocket díky své schopnosti zmenšovat soubory s kódem snížit provoz CDN a náklady.
Další na našem seznamu základních životních funkcí webu, které je třeba na vícejazyčném webu vylepšit, je CLS. Zde se dozvíte, jak můžete zajistit, abyste v tomto oddělení uspěli.
Jedním z největších faktorů špatného hodnocení CLS jsou často obrázky bez definovaných atributů výšky a šířky.
Pokud neuvedete, jak velký má být obrázek na konečné stránce, prohlížeč pro něj nemůže vyhradit správné množství místa. V důsledku toho, když se skutečná velikost liší od velikosti zástupného symbolu, obrázek najednou vyskočí a zatlačí vše pod sebou. To se může stát zejména u líně načtených médií, která se při prvním načtení stránky nezobrazí.
Prvním pravidlem optimalizace systému CLS je přidat k obrázkům definice výšky a šířky. Jak to uděláte?
V čistém HTML to vypadá jednoduše takto:
Pokud používáte editor bloků WordPress, měl by rozměry nastavit automaticky, ale konkrétní rozměry můžete definovat i při vytváření obsahu.

Kromě toho má WP Rocket možnost přidat chybějící deklarace šířky a výšky do mediálních souborů, pokud jste některé vynechali.

Stejné pravidlo jako výše platí i pro dynamický obsah, jako jsou vložené prvky nebo reklamy. I ty potřebují definici výšky a šířky, aby se nepohybovaly po zbytku rozvržení stránky.
Problémem je, že ne vždy můžete kontrolovat, jak velké tyto prvky budou, protože často pocházejí ze zdrojů třetích stran. V takovém případě je dobré provést alespoň odhad a rezervovat si místo. I když bude výsledný prvek nakonec větší, posun nebude tak výrazný, což povede k nižšímu skóre CLS.
Editor ve WordPressu také automaticky přidává šířku a výšku vloženého obsahu. Kromě toho, jak již bylo zmíněno, WP Rocket obsahuje možnost líného načítání vložených médií. Tím se automaticky rezervuje potřebný prostor pro jejich načtení.
Také písma mohou způsobit posuny v rozvržení, zejména pokud na webu používáte vlastní písma. Dva nejčastější problémy jsou následující:
Těmto problémům se můžete vyhnout pomocí následujících strategií:
Pokud používáte WP Rocket, je součástí pluginu možnost přednačíst soubory s písmy. Stačí zadat cestu, kde se nacházejí.

Mimochodem, součástí optimalizace písma pro vícejazyčné webové stránky je také použití písem, která jsou kompatibilní s různými abecedami. To platí zejména v případě, že na svých stránkách nabízíte jazyky RTL (psané zprava doleva).
Dynamickým obsahem rozumíme prvky, které se zobrazí po dokončení načítání stránky. Příkladem jsou líně načtené obrázky, bannery, formuláře atd.
Chcete-li, aby jejich dopad na vaše skóre CLS byl co nejmenší, řiďte se stejnými radami jako výše:
Mimochodem, Weglot je plně schopen překládat dynamický obsah. Nemusíte se tedy obávat, že by mu členové vašeho publika nerozuměli.
Nakonec si řekneme, jak můžete zajistit, aby váš INP byl v pořádku.
JavaScript je obvykle jedním z hlavních faktorů, pokud jde o problémy s Interakcí s Next Paint, zejména s takzvanými "dlouhými úlohami". To jsou úlohy JavaScriptu, jejichž dokončení trvá déle než 50 ms a které mohou blokovat schopnost prohlížeče zpracovávat interakce uživatele na stránce. Kromě toho může mít mnoho skriptů na webu obecně zhoršenou odezvu stránek.
O tom, jak můžete optimalizovat JavaScript, jsme již hovořili v části LCP. Pro INP je konkrétně důležité, abyste se na svých stránkách zabývali dlouhými úlohami. Pokud existují, najdete je ve vývojářských nástrojích Chrome. Jsou označeny malými červenými trojúhelníčky.

Zkuste je rozdělit na menší části, které se mohou načítat postupně, aniž by trvale blokovaly hlavní vlákno prohlížeče. Podrobné informace o tom najdete v tomto návodu na web.dev. Minifikace, odložení, asynchronizace a odstranění nepotřebného kódu také pomáhají udržet reakci prohlížeče na interakci s uživatelem.
Pokud používáte WP Rocket, plugin umožňuje podrobně nastavit, které soubory JavaScriptu chcete načítat později a které ne.

Vše, co platí pro JavaScript, platí i pro CSS. Stahování a zpracování souborů stylů může prohlížeč zaměstnat a zpozdit jeho reakci na vstup uživatele.
Zde můžete také použít nástroje pro testování rychlosti a najít nepoužívané CSS. Kromě toho můžete rozdělit listy stylů tak, aby se klíčové CSS načetlo jako první, nebo je vložit do řádku.
Jak již bylo zmíněno, WP Rocket má možnosti automatického odstranění nepoužívaného CSS.

O líném načítání pro optimalizaci obrázků jsme již hovořili. Může mít také pozitivní dopad na INP, protože uvolňuje prostředky prohlížeče pro reakci na vstup uživatele. Při jeho implementaci dbejte výše uvedených pokynů.
Mimochodem, pokud máte problémy s překladem líně načtených obrázků, Weglot ve výchozím nastavení překládá adresy URL obrázků přidané do atributů data-src nebo srcset. Pokud vaše líné načítání používá vlastní atributy, Weglot je nepřeloží z výroby - budete muset přidat filtr PHP, který je určen speciálně pro integraci s WordPressem.
Pokud používáte integraci Weglot JavaScript a/nebo stále nemůžete přeložit své obrázky, kontaktujte podporu pro více informací.
Core Web Vitals jsou důležitým ukazatelem kvality použitelnosti vícejazyčných webových stránek. Toto téma zajímá nejen návštěvníky, ale Core Web Vitals má také vliv na umístění ve vyhledávání. Z tohoto důvodu je optimalizace webu pro ně rozhodně něco, co byste měli brát vážně.
Jak jste pravděpodobně viděli výše, není to tak složité. Jde hlavně o to, aby se vaše webové stránky rychle načítaly a zůstaly během této doby stabilní a citlivé. K tomu můžete přijmout několik klíčových opatření, která jsme podrobně popsali výše.
Pokud máte pocit, že práce s kódem a soubory webových stránek je nad vaše síly, můžete se také rozhodnout pro řešení v podobě pluginu, jako je WP Rocket. Ten dokáže optimalizovat vaše stránky za vás, aniž byste potřebovali vývojářské nebo technické dovednosti, a spoustu práce za vás udělá ve výchozím nastavení.
Nejlepší způsob, jak pochopit sílu Weglot vyzkoušet si ho na vlastní kůži. Vyzkoušejte ho zdarma a bez jakýchkoli závazků.
Nejlepší způsob, jak pochopit sílu Weglot vyzkoušet si ho na vlastní kůži. Vyzkoušejte ho zdarma a bez jakýchkoli závazků.
Pokud ještě nejste připraveni propojit svůj web, je k dispozici demo webová stránka ve vašem ovládacím panelu.