Každý, kdo provozuje webové stránky WordPress, se nemůže vyhnout pohledu na Core Web Vitals společnosti Google. Zejména jedna ze tří metrik stojí za bližší pohled: Největší obsahový obraz hraje důležitou roli nejen pro dobu načítání, ale také pro vaše hodnocení v Googlu. Pokud chcete vědět, co se za touto metrikou skrývá a jak můžete svou Největší obsahovou barvu zlepšit , jste na správném místě. V tomto článku objasníme všechny důležité otázky a prozradíme, jaká opatření mohou provozovatelé webových stránek přijmout, aby dosáhli dobrých hodnot.

Jaký je největší obsahový nátěr? 

Po vyvolání webové stránky trvá obvykle jen několik sekund, než se v prohlížeči zcela nastaví. Během této doby probíhá řada pro návštěvníka neviditelných procesů. Největší obsahová barva (LCP ) se vztahuje k jedné z posledních událostí před úplným načtením webové stránky: popisuje, jak dlouho trvá, než je největší prvek na stránce zcela načten a viditelný . Obvykle se jedná o blok textu, obrázek nebo video.

Největší obsahový obraz je tak jednou z nejdůležitějších metrik pro dobu načítání webových stránek. Společně se zpožděním prvního vstupu (FID) a kumulativním posunem rozvržení (CLS) je také jedním z nejvýznamnějších ukazatelů pro Základních životních údajů o webukteré společnost Google používá k hodnocení uživatelského komfortu (page experience).

Největší obsahová barva vs. první obsahová barva

Termín, který se také často používá v souvislosti s dobou načítání a výkonem webových stránek a může být snadno zaměněn, je First Contentful Paint (FCP). Pro lepší pochopení proto tyto dvě metriky ještě jednou výslovně rozlišujeme:

• Barva největšího obsahu měří, za jak dlouho se zcela načte největší prvek, tj. hlavní obsah stránky.
• Barva prvního obsahu označuje dobu, která uplyne, než se zobrazí první prvek na stránce - bez ohledu na to, jaký je jeho obsah.

Vaše LCP bude téměř vždy o něco vyšší než FCP, protože hlavní obsah obvykle není prvním načítaným prvkem.

Proč je důležitý největší obsahový nátěr?

Pravděpodobně se ptáte, proč byste se měli blíže podívat na největší obsahovou barvu? Máme pro vás dva dobré důvody. Oba pomohou vašim webovým stránkám (a vašemu podnikání) zviditelnit se a zvýšit míru konverze.

1. lepší uživatelská zkušenost

Největší obsah Paint je důležitým ukazatelem toho, jak ostatní vnímají vaše webové stránky. Zatímco návštěvníky obvykle nezajímá, jak dlouho trvá úplné načtení jednotlivých skriptů a prvků na stránce, zajímá je, jak dlouho jim trvá používání webu a zobrazení nejdůležitějšího obsahu. Záleží jim však na tom, jak dlouho jim trvá, než se na webu zorientují a zobrazí si nejdůležitější obsah.

Pokud optimalizujete své webové stránky tak, aby vaše LCP bylo co nejlepší (více o tom později), poskytnete svým návštěvníkům solidní uživatelský zážitek. Pokud je necháte čekat pět a více sekund na hlavní obsah webu, odejdou a budou hledat jinde. Zdaleka si tedy nestáhnou obsah, neodhlásí se k odběru, nepřihlásí se k odběru vašich kanálů, nekontaktují vás ani nekoupí vaše produkty.

2. optimalizované pozice ve službě Google

Obsah je a zůstává pro Google nejdůležitějším faktorem hodnocení. Pokud však dvě webové stránky dosahují stejně dobrých výsledků z hlediska obsahu, ta s lepším Core Web Vitals se v žebříčku posune nahoru. Je to proto, že tyto metriky jsou společností Google považovány za oficiální faktory hodnocení. Největší vliv na hodnocení má LCP: V hodnocení výkonnosti Google Lighthouse tvoří tato hodnota přibližně 25 procent.

Pevné základní webové vitální údaje - a zejména pevný LCP - vám tedy mohou pomoci dosáhnout lepšího umístění ve vyhledávačích.

Jak změřit největší obsahovou barvu

LCP můžete měřit různými způsoby. Dobrým výchozím bodem jsou nástroje společnosti Google: Google Search Console, Google PageSpeed Insights a Lighthouse. WebPageTest navíc nabízí dobré možnosti pokročilé analýzy.

Vyhledávací konzole Google

Konzola Google Search Console poskytuje přehled o výkonu celého webu. Informace o základních webových ukazatelích najdete na levém navigačním panelu. Pokud kartu otevřete, zobrazí se vám grafický přehled vašich adres URL a můžete poměrně rychle zjistit, které adresy URL jsou problematické. Na ty se pak můžete v dalším kroku podívat podrobněji.

Pokud nemáte pro své webové stránky nastavenou službu Google Search Console, můžete všechny informace získat také prostřednictvím služby Lighthouse nebo PageSpeed Insights.

Google PageSpeed Insights

Kromě čistých hodnot LCP vám Google PageSpeed Insights poskytuje také užitečné tipy a rady, jak vylepšit Největší obsahový obraz. Google vám také sdělí, který konkrétní prvek byl pro test použit. Takže hned vidíte, kde můžete začít s optimalizací.

Nástroj můžete použít ve třech jednoduchých krocích:

1. Volejte PageSpeed Insights na.
2. Zadejte adresu URL stránky, kterou chcete zkontrolovat.
3. Spusťte test kliknutím na tlačítko Analyse.

Google vám pak na první pohled zobrazí všechny hlavní webové ukazatele, a to jak pro počítače, tak pro mobilní zařízení. Určitě byste si měli prohlédnout obě verze.

Chcete-li najít prvek Největší obsahová barva, přejděte na stránce s výsledky do části Diagnostika. Tam je v části Největší prvek Contentful Paint uveden největší prvek v zobrazení.

Pozor: Prvek se může lišit pro mobilní zařízení a stolní počítače. Proto byste i zde měli vždy zkontrolovat obojí.

Maják

Pomocí aplikace Lighthouse můžete testovat a analyzovat LCP ve vlastním prohlížeči. Nástroj je již integrován do vývojářských nástrojů Google Chrome.

Takto postupujete v prohlížeči:

1. Otevřete adresu URL, kterou chcete zkontrolovat (nejlépe v okně inkognito).
2. Otevřete Nástroje pro vývojáře Chrome (DevTools). Nejrychleji to uděláte tak, že kliknete pravým tlačítkem myši kdekoli na stránce a v otevřené nabídce kliknete na položku Prozkoumat .
3. Pak přejděte do nástrojů pro vývojáře a vyberte kartu Lighthouse.
4. Vyberte, zda se má LCP testovat pro zobrazení na počítači nebo na mobilním zařízení. V části Kategorie stačí zaškrtnout položku Výkon.
5. Spusťte analýzu kliknutím na Generovat zprávu.

Test trvá 15 až 20 sekund v závislosti na webové stránce. Poté můžete všechny hodnoty zobrazit a vyhodnotit a například je také porovnat s výsledky z konzoly pro vyhledávání (pokud jste ji nastavili).

WebPageTest

WebPageTest je obzvláště užitečný, pokud chcete test konfigurovat individuálně a jít hlouběji do analýzy výkonu. Zde můžete v rozšířených možnostech definovat také metriky, jako je umístění testu, rychlost připojení nebo samotné zařízení.

Výsledky jsou také o něco komplexnější: nástroj WebPageTest vám přesně ukáže, jak se vaše webové stránky načítají, které prvky se načítají a jak rychle to celé probíhá. Kromě hodnot LCP obsahuje zpráva také mnoho dalších metrik - včetně vodopádového diagramu. Co přesně to je a jak jej správně analyzovat, se dozvíte v našem článku Optimalizace WordPressu: Jak analyzovat svůj web za 7 sekund.

Jaká je dobrá hodnota LCP?

Google do značné míry určuje, jak se LCP hodnotí:

• Největší obsahová barva pod 2,5 sekundy je považována za dobrou a žádoucí.
• Hodnoty mezi 2,5 a 4 sekundami jsou stále uspokojivé, ale lze je optimalizovat.
• Pokud je hodnota LCP vyšší než 4 sekundy, je klasifikována jako špatná a měla by se rozhodně zlepšit.

Odkud pochází slabý LCP? 

Největší obsahový obraz každé webové stránky lze rozdělit na čtyři dílčí prvky, které dohromady dávají plný čas LCP:

• Doba do prvního bajtu (TTFB ): Jedná se o dobu od požadavku uživatele do první odpovědi serveru, tj. do prvního načteného bajtu dat. V ideálním případě by TTFB měl tvořit přibližně 40 % času LCP.
• Resource Load Delay: Hiermit ist die Verzögerung beim Laden der Ressourcen gemeint – also die Zeitspanne zwischen dem ersten Byte und dem Moment, in dem der Browser beginnt, das LCP-Element zu laden. Diese sollte so klein wie möglich (< 10 Prozent der vollen LCP-Zeit) sein.
• Doba načtení prostředku : Tato hodnota popisuje dobu potřebnou k načtení samotného prvku LCP. Protože se stejně jako v případě TTFB jedná o síťový požadavek, může i tento proces trvat přibližně 40 % celkového času LCP.
• Element Render Delay: Damit wird ausgedrückt, wie viel Zeit zwischen dem Ende des Ladevorgangs und dem vollständigen Rendern des LCP-Elements noch vergeht. Auch diese Verzögerung sollte so klein wie möglich (< 10 Prozent der vollen LCP-Zeit) sein.

Každý z těchto dílčích prvků je ovlivněn dalšími faktory - seznam možných příčin slabého LCP je tedy prakticky nekonečný. Většinou však za ní stojí jedna (nebo více) z následujících čtyř příčin:

• Váš server reaguje příliš pomalu (TTFB).
• JavaScript a CSS blokují načítání stránky (zpoždění načítání zdrojů).
• Na stránce máte mnoho velkých zdrojů nebo vizuálně náročného obsahu, jehož načítání trvá dlouho (doba načítání zdrojů).
• Vykreslování na straně klienta zajišťuje, že úplné zobrazení prvku LCP trvá déle (Element Render Delay).

Jak vylepšit největší obsahový obraz

Nyní víte, z čeho se skládá největší obsahová barva a co může způsobit její špatnou kvalitu. Pojďme se nyní podívat na to, co můžete udělat, pokud chcete zlepšit Largest Contentful Paint pro své webové stránky WordPress. Jedná se o nejdůležitější tipy a opatření:

Spolehněte se na rychlý hosting WordPress

Základem dobrého LCP je krátká doba nabíjení, přesněji krátký TTFB. Vysoce výkonný hosting může mít zásadní vliv. Zkontrolujte proto, zda vás váš současný hosting zbytečně nezpomaluje. Pokud ano, měli byste zvážit přechod na specializovaný spravovaný hosting WordPress, který je přizpůsoben vašim potřebám.

Pokud hostujete své webové stránky na adrese Raidboxes , můžete očekávat všestrannou infrastrukturu přizpůsobenou pro WordPress, která se vyplatí: Po přesunu na naše servery se weby WordPress obvykle načítají až čtyřikrát rychleji - bez jakékoli další optimalizace.

Povolení ukládání do mezipaměti

Pokud chcete, aby vaše webové stránky WordPress měly dobrou LCP a rychle se načítaly, není téměř žádný způsob, jak obejít slušnou mezipaměť WordPress. Ta zlepšuje dobu odezvy serveru tím, že často používané soubory ukládá do mezipaměti a příště je načte rychleji. Můžete k tomu použít buď doplněk, nebo zvolit hosting s cachováním na straně serveru, který nabízí například Raidboxes .

Eliminace blokování vykreslování JavaScriptem a CSS

Každá webová stránka se skládá z prvků HTML, JavaScriptu a CSS. Ten řídí prezentaci webu, JavaScript je zodpovědný za dynamické prvky (např. animace nebo formuláře). Pokud jsou JavaScript a/nebo CSS načteny před prvkem LCP, ačkoli ještě nejsou potřeba, komplikují a zpomalují vykreslování.

Měli byste proto odstranit nepotřebný JavaScript a CSS a udržovat soubory co nejkompaktnější. Oba soubory můžete také přesunout dolů na stránku nebo skripty odložit, aby nebránily hlavnímu obsahu. Nejjednodušší způsob, jak to provést, je pomocí pluginů, jako je Autoptimize nebo WP Rocket.

Více informací o JavaScriptu a CSS najdete v našem článku o redukci CSS, HTML a JavaScriptu.

Optimalizovat obrázky

Čím větší jsou obrázky na vašich webových stránkách, tím větší je pravděpodobnost, že budou mít špatný LCP. Obrázky byste proto měli vždy co nejlépe komprimovat. Dbejte však na to, aby ztráta kvality nebyla příliš vysoká. Pokud dokážete určit, co je vaším prvkem LCP a jedná se o obrázek, můžete jeho velikost konkrétně zmenšit. Tímto způsobem potřebuje prohlížeč méně času na jeho stažení a vaše hodnota LCP se sníží.

Jaká je ideální velikost a v jakém formátu byste měli obrázky nahrávat, se dozvíte v článku Velikosti obrázků ve WordPressu: Jak fungují obrázky ve WordPressu a osvědčené postupy pro vaše webové stránky. Kromě toho v našem magazínu najdete také přehled 6 oblíbených pluginů pro kompresi obrázků.

Upřednostněte největší prvek

Největší prvek na stránce by měl být snadno k nalezení a měl by se načíst co nejdříve. Ve výchozím nastavení tomu tak ale obvykle není, například u obrázků. Pomocí atributu fetchpriority však můžete prohlížeči naznačit, že určité prvky by se měly načítat s vyšší prioritou.

Mohlo by to vypadat takto:

<img fetchpriority=“high“ src=“/path/to/hero-image.webp“>

(Poznámka: vložte tento příkaz do WordPressu jako blok "Kód" a vyberte HTML v možnostech bloku pro "Dlouhé oko"), pak bude vhodně naformátován.

Ale pozor: neměli byste upřednostňovat více než jeden nebo dva obrázky dopředu, jinak signál ztratí svůj účinek. Naopak můžete také snížit prioritu obrázků. To je užitečné například u obrázků v karuselových posuvnících, které jsou umístěny na začátku stránky, ale nejsou vidět přímo na začátku. Tím, že jim dáte nižší prioritu, uvolníte šířku pásma pro základní zdroje.

Závěr: Zlepšení doby odezvy a optimalizace kódu

Největší obsahová barva může být rozhodujícím faktorem, pokud jde o vaše hodnocení v Googlu a uživatelskou zkušenost. Proto stojí za to se na tuto metriku podívat blíže a porozumět jí.

Čím podrobněji pronikáte do Největší obsahové barvy, tím je vám jasnější, že existuje téměř nekonečné množství menších a větších šroubků, kterými můžete LCP optimalizovat. Některé z nich lze najít rychleji, jiné vyžadují hlubší technické znalosti. Tento článek proto poskytuje pouze první přehled a pro začátek se můžete soustředit na dvě věci:

1. Zrychlení doby odezvy serveru.
2. Optimalizujte kód svých webových stránek tak, aby se prvek LCP zobrazil co nejrychleji.

Nejdůležitějším faktorem pro dobu odezvy je váš hosting. S vysoce výkonným hostingem WordPress, jaký nabízíme na Raidboxes , se nemusíte obávat dlouhého čekání na odezvu serveru. Možná se tedy vyplatí přejít na jiný hosting.