Ako optimalizovať Core Web Vitals:
Cumulative layout shift

Tento článok je vhodný SEO špecialistov a marketérov, ktorých zaujíma pokročilé SEO:

Ilustračné foto: Karolina Grabowska

Tak ako sme si už spomenuli v úvode predošlých článkov, spoločnosť Google začiatkom tohto roka predstavila implementáciu tzv. Core Web Vitals, ktorých cieľom je meranie kvality používateľského zážitku na ktorejkoľvek webovej stránke.

Každá z Core Web Vitals metrík:

1. Largest Contentful Paint (LCP)
2. First input delay (FID)
3. Cumulative layout shift (CLS)

predstavuje odlišný aspekt používateľskej skúsenosti. V nasledujúcich riadkoch článku nájdete užitočné informácie, ktoré vám pomôžu pri optimalizáciu druhej metriky – First input delay.

Cumulative layout shift

Metrika Cumulative layout shift (CLS) meria nestabilitu obsahu ako súčet všetkých skóre jednotlivých posunov rozloženia za každý neočakávaný posun rozloženia, ku ktorému dôjde počas celej životnosti stránky.

K neočakávanému pohybu obsahu stránky obvykle dochádza, pretože zdroje sa načítajú asynchrónne alebo sa prvky DOM (Document Object Model) dynamicky pridávajú na stránku nad existujúci obsah. Dôvodom môže byť obrázok alebo video s neznámymi rozmermi, písmo, ktoré sa vykresľuje väčšie alebo menšie ako jeho záložné riešenie, alebo reklama alebo widget tretej strany, ktoré dynamicky menia svoju veľkosť.

Najbežnejšie príčiny zlého CLS sú:

• Obrázky bez rozmerov
• Reklamy, embedy a prvky iframe bez rozmerov
• Dynamicky vložený obsah
• Webové písmo (fonty) spôsobujúce FOIT / FOUT
• Akcie čakajúce na odpoveď siete pred aktualizáciou DOM

1. Obrázky bez rozmerov

Osvedčený moderný postup – moderné prehliadače nastavujú predvolený pomer strán obrázkov na základe atribútov šírky a výšky obrázka, odporúčame ich manuálne nastaviť tak, aby sa predošlo posunom ich rozloženia. Vďaka CSS Working Group stačí vývojárom nastaviť šírku a výšku ako obvykle:

<!– set a 640:360 i.e a 16:9 – aspect ratio →
<img src=“puppy.jpg“ width=“640″ height=“360″ alt=“Puppy with balloons“ />

…a UA stylesheets všetkých prehliadačov pridávajú default aspect ratio na základe existujúcich atribútov šírky a výšky prvku:

img {
aspect-ratio: attr(width) / attr(height);
}

Praktická kalkulačka, na porozumenie pomeru strán – Aspect Ratio Calculator.

Viac o tejto téme nájdete TU.

Responzívne obrázky – na zaistenie toho, aby bolo možné nastaviť atribúty šírky a výšky obrázku, je dôležité aby mal obrázok rovnaký pomer strán.

<img
width=“1000″
height=“1000″
src=“puppy-1000.jpg“
srcset=“puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w“
alt=“Puppy with balloons“
/>

2. Reklamy, embedy a prvky iframe bez rozmerov

Reklamy – sú jedným z najväčších prispievateľov k zmenám rozloženia na webe. Reklamné siete a vydavatelia často podporujú veľkosti dynamických reklám. Veľkosť reklamy zvyšuje výkon / výnosy vďaka vyššej miere kliknutí a väčšiemu počtu konkurujúcich si reklám v aukcii.

To však môže viesť k neoptimálnemu používateľskému zážitku v dôsledku reklám, ktoré posúvajú viditeľný obsah, o ktorý máte záujem smerom dole na stránke.

Počas životného cyklu reklamy môže posun rozloženia nastať z rôznych dôvodov, najčastejšie napríklad keď:

• web vloží reklamný kontajner do modelu DOM,
• web zmení veľkosť reklamného kontajnera s kódom prvej strany,
• sa načíta knižnica s reklamou a zmení sa veľkosť kontajnera reklamy,
• reklama naplní kontajner a zmení veľkosť, ak má konečná reklama inú veľkosť.

Existujú však osvedčené postupy na zníženie reklamného posunu na webe, tie totiž môžu korigovať zmeny rozloženia pomocou:

• Staticky vyhraďte miesto pre reklamný priestor,
  • naštýlujte elementy ešte predtým ako sa načíta knižnica s reklamami,
  • zabezpečte, aby sa posuny eliminovali rezerváciou veľkosti priestoru.
• Buďte opatrný pri umiestňovaní non-sticky reklám v hornej časti výrezu
• Vyhnite sa zbaleniu vyhradeného priestoru, ak sa v reklamnom priestore nezobrazí žiadna reklama, zobrazením zástupného symbolu.
• Eliminujte posuny vyhradením najväčšej možnej veľkosti pre reklamný priestor,
  • nevýhodou je, ak priestor vyplní menšia reklamná kreatíva, riskuje prázdne miesto v rámci vyhradenej plochy.
• Na základe historických údajov vyberte najpravdepodobnejšiu veľkosť reklamného priestoru.

Embeds a iframes – sú prvky, ktoré vám umožňujú vložiť na svoju stránku prenosný webový obsah (napr.: YouTube videá, Google mapy, príspevky na sociálnych sieťach,…).

Tieto vložky môžu mať niekoľko podôb:

• HTML fallback a JavaScript tag
• Inline HTML snippet
• iframe embed

Tieto vloženia často vopred nevedia, aký “veľký” embed bude (napr.: v prípade príspevku na sociálnej sieti – má vložený obrázok? Video? Viac riadkov textu?). Výsledkom je, že platformy ponúkajúce embedy nie vždy vyhradia dostatok priestoru pre svoj embed, čo pri konečnom načítaní môže spôsobiť zmeny v usporiadaní.

Ak tomu chcete predísť, môžete minimalizovať CLS predpočítaním dostatočného priestoru na vloženie pomocou zástupného symbolu alebo záložnej reklamy.

Príklad pracovného postup, ktorý môžete použiť na vloženie:

• získajte výšku svojho posledného embedu pomocou nástrojov pre vývojárov prehliadača
• použitie iframe tag, ktorý pre načítaný embed zemní veľkosť / rozmer embedu tak, aby bol rozmer presný

3. Dynamicky vložený obsah

Pravdepodobne ste už zaznamenali posuny rozloženia v dôsledku používateľského rozhrania, ktoré sa objaví v hornej alebo dolnej časti výrezu, keď sa pokúšate načítať web. Podobne ako v prípade reklám sa to často stáva pri banneroch a formulároch, ktoré posúvajú zvyšok obsahu stránky, ako napríklad:

• „Prihláste sa na odber nášho bulletinu!“
• „Súvisiaci obsah“
• „Nainštalujte si našu aplikáciu“
• „Oznámenie GDPR“

Ak potrebujete zobraziť tieto typy UI rozhrania, vyhradte si pre to vopred dostatok priestoru vo výreze (napr.: pomocou placeholder alebo Skeleton UI), aby to pri načítaní nespôsobilo posun obsahu na stránke .

Zhrnutie: Nevkladajte nový obsah nad existujúci obsah, pokiaľ nereagujete na interakciu používateľa. Týmto spôsobom zabezpečíte, že nedôjde k neočakávaným zmenám rozloženia.

4. Webové písmo (fonty) spôsobujúce FOIT / FOUT

Stiahnutie a vykreslenie webových písiem môže spôsobiť zmeny rozloženia dvoma spôsobmi:

• Záložné písmo je vymenené za nové písmo (FOUT – záblesk neštýlovaného textu)
• „Neviditeľný“ text sa zobrazuje, kým sa nevytvorí nové písmo (FOIT – záblesk neviditeľného textu)

Nasledujúce nástroje vám môžu pomôcť tento problém minimalizovať:

• Font-display vám umožňuje upraviť správanie pri vykresľovaní vlastných fontov s hodnotami ako auto, swap, block, fallback a voliteľné. Všetky tieto hodnoty (okrem voliteľných) môžu nanešťastie spôsobiť zmenu rozloženia jedným z vyššie uvedených spôsobov.
• Rozhranie API pre načítanie písma môže skrátiť čas potrebný na získanie potrebných fontov.

Od verzie prehliadača Chrome 83 môžeme odporučiť:

• Použitie <link rel = preload> na kľúčových webových písmach
• Použitie kombinácia <link rel = preload> a font-display: voliteľné

Viac informácií k tejto téme nájdete TU.

Potrebujete pomôcť s optimalizáciou webu pre Core Web Vitals? Napíšte nám!