Už ste niekedy prechádzali zoznamom produktov na stránke, aby ste boli prerušený načítaním reklamy a tlačením celej stránky nadol? Stačí povedať, že je to frustrujúca skúsenosť a v závislosti od situácie môže viesť k nesprávnemu kliknutiu, ktorého zvrátenie si vyžaduje drahocenný čas.
Ak sa vám to už niekedy stalo, potom už viete, aké to je stretnúť sa s Cumulative Layout Shift (CLS) ako používateľ. Ale čo to vlastne CLS je, prečo je to dôležité z pohľadu SEO, ako ho môžete merať a čo môžete urobiť, aby ste ten svoj zlepšili? Čítajte ďalej a zistite to a začnite optimalizovať CLS svojich stránok.
Čo je kumulatívna zmena rozloženia?
Aktualizáciu skúseností so stránkami od Googlu sme očakávali už mnoho mesiacov a nakoniec sme ju začali sprístupňovať v júli 2021. V snahe povzbudiť stránky, aby poskytovali čo najvýnimočnejšie používateľské prostredie, aktualizácia zaviedla celý rad nových signálov pre algoritmy Google zvážiť.
Medzi tie patrí Core Web Vitals, trio signálov, ktoré sa používajú na meranie rýchlosti a odozvy stránky. Tieto tri signály zahŕňajú:
- Largest Contentful Paint (LCP), ktorý meria, ako dlho trvá načítanie najväčšieho obsahového prvku stránky;
- Oneskorenie prvého vstupu (FID), ktoré meria čas, ktorý trvá, kým stránka zareaguje na prvú interakciu používateľa; a
- Cumulative Layout Shift (CLS), ktorý meria vizuálnu stabilitu.
Ale čo presne znamená vizuálna stabilita? Aby ste tomu porozumeli, spomeňte si, kedy ste naposledy prechádzali stránkou, len aby ste stratili svoje miesto, keď sa celé rozloženie pootočilo nahor alebo nadol. Možno to dokonca spôsobilo, že ste klikli na iné tlačidlo, než ste chceli, alebo vás to frustrovalo natoľko, že ste stránku úplne opustili.
Tento typ scenára je známy ako nestabilita rozloženia alebo posun rozloženiaa je to jeden z mnohých prvkov stránky, ktoré môžu spôsobiť neuspokojivý dojem používateľa. Takže keď hovoríme, že CLS meria vizuálnu stabilitu, myslíme tým, že vám povie, aké nestabilné je rozloženie vašej stránky. Čím nižšie je skóre CLS, tým lepšia je vaša používateľská skúsenosť.
Spoločnosť Google konkrétnejšie odporúča, aby sa stránky zamerali na skóre CLS 0,1 alebo menej:
Skóre 0,1–0,25 je v poriadku, ale malo by sa ďalej zlepšovať, zatiaľ čo skóre 0,25 alebo viac sa považuje za neštandardné a malo by sa čo najskôr opraviť.
Aký dôležitý je kumulatívny posun rozloženia?
Vzhľadom na nedávnu aktualizáciu skúseností so stránkami je jasné, že na kumulatívnom posune rozloženia záleží. Ale nakoľko je to dôležité?
Samotný Google klasifikoval CLS (a ďalšie dva Core Web Vitals) ako „dôležitú metriku zameranú na používateľa“. Inými slovami, to, či vaša stránka dosiahne alebo nedosiahne dobré skóre vo všetkých troch Core Web Vitals, priamo ovplyvní jej hodnotenie vo vyhľadávačoch. Preto je nevyhnutné udržiavať nízke skóre CLS v záujme zlepšenia pozícií SERP vašej lokality.
CLS je však dôležité aj z čisto používateľského hľadiska. Nemusíte brať naše slovo – vývojár softvéru Akamai Nic Jansma zistil, že keď sa skóre CLS stránky zvyšuje, rovnako aj miera odchodov:
Inými slovami, čím vyššie je vaše skóre Kumulatívnej zmeny rozloženia, tým je pravdepodobnejšie, že návštevníci kliknú na tlačidlo Späť a prejdú na stránku konkurenta.
Nízke skóre CLS teda nepomôže len prilákať používateľov na vašu stránku zvýšením jej hodnotenia, ale zvýši pravdepodobnosť, že sa na nej budú držať. Keď to viete, je ľahké pochopiť, prečo je systém CLS taký dôležitý na papieri aj v praxi.
Ako merať kumulatívny posun rozloženia
Ak chcete zistiť, ako sa meria CLS na vašej vlastnej lokalite, môžete tak urobiť tak, že sa pozriete buď na laboratórne údaje (tj údaje vygenerované prostredníctvom automatizovaných testov) alebo údaje z terénu (tj údaje zozbierané od skutočných používateľov). Ani jeden typ údajov nie je objektívne lepší ako druhý, ale najlepšie je použiť laboratórne aj terénne údaje, aby ste získali komplexné pochopenie vášho CLS.
Pre laboratórne údaje môžete použiť:
Napríklad takto to vyzerá, keď použijete WebPageTest na analýzu CLS lokality, ako sa zobrazuje na mobilných zariadeniach – tu môžeme vidieť, že iloveseo.com má skóre CLS nulu:
Pre údaje o poli môžete použiť:
Tu je napríklad to, čo má PageSpeed Insights povedať o CLS CNN a ďalších Core Web Vitals:
Čo spôsobuje kumulatívny posun rozloženia?
Nestabilita rozloženia je často spôsobená pomalým načítaním obsahu, ako sú napríklad reklamy tretích strán GIF z Advanced Ads tak dokonale ukazuje:
Ale to nie je jediný potenciálny vinník – vysoké skóre CLS môže byť spôsobené aj:
- nešpecifikované rozmery obrazu;
- nešpecifikované rozmery reklamy, vloženia a prvku iframe;
- nestabilné webové fonty; a
- dynamický obsah.
Ak vaše stránky zaznamenávajú vysoké CLS, budete musieť urobiť trochu pátrania, aby ste zistili, čo presne to spôsobuje. Dobrou správou však je, že keď to urobíte, existujú jasné kroky, ktoré môžete podniknúť na nápravu situácie a zabezpečiť, aby vaša používateľská skúsenosť bola čo najlepšia.
Ako zlepšiť kumulatívny posun rozloženia
V závislosti od konkrétnej príčiny vysokého skóre CLS vašej lokality vám môže pomôcť ktorákoľvek z nasledujúcich taktík alebo všetky z nich.
Zadajte rozmery obrázka
Zadanie presných rozmerov obrázkov na stránke nie je dôležité len pre účely optimalizácie obrázkov a rýchlosti stránky – môže tiež pomôcť udržať CLS na minime.
Ak pracujete priamo z kódu HTML stránky, všetko, čo musíte urobiť, je pridať jednoduché atribúty, ako je uvedené v Príklad W3Schools:
Môžete tiež pridať rozmery z v rámci WordPressalebo použite doplnok na urýchlenie procesu.
Zadajte rozmery reklamy, vloženia a prvku iframe
Obrázky nie sú jediným typom obsahu, ktorého rozmery by ste mali určiť – to isté platí aj pre reklamy, vložené prvky a prvky iframe.
Takto to napríklad vyzerá, keď zadáte veľkosť reklamy s pevnou veľkosťou podľa pokynov Google:
Minimalizujte nestabilitu písma
Ukazuje sa, že nie všetky písma sú vytvorené rovnako: existujú desktopové písma (tj tie, ktoré sú nainštalované priamo na vašom počítači a používajú sa v programoch, ako je Word), a potom sú webové fonty (tj tie, ktoré sú špeciálne navrhnuté na používanie a zobrazovanie na webových stránkach prostredníctvom CSS).
Aj keď sa typ písma, ktoré vaša stránka používa, môže zdať bezvýznamný, pravdou je, že ak obsahuje webové písma, môžu spôsobovať problémy s rozložením a narúšať používateľskú skúsenosť.
Ak sa chcete tomuto problému vyhnúť, môžete použiť font-displej deskriptor v CSS vašich stránok, použite Google Rozhranie pre načítanie fontov (API)pridajte predpätie HTML hodnotapridajte voliteľné hodnotu k font-displej deskriptor, alebo dokonca úplne upustiť od používania webových fontov.
Dynamický obsah používajte opatrne
Nie je ťažké pochopiť, prečo by ste mohli chcieť použiť dynamický obsah, tiež známy ako adaptívny obsah. Keďže sa mení na základe správania používateľov, môže poskytnúť mimoriadne pútavý zážitok, ktorý je prispôsobený každému jednotlivému návštevníkovi. Napríklad dynamický obsah môže zobraziť rôzne správy na základe polohy používateľa:
Ale je to práve schopnosť dynamického obsahu meniť sa, čo z neho robí hrozbu pre CLS. Ak sú používatelia napríklad v polovici stránky pri načítaní dynamického obsahu (napríklad pripomenutie položiek, ktoré majú stále v košíku), rozloženie stránky sa môže náhle zmeniť.
Jedným z možných riešení je vyčleniť priestor pre dynamický obsah namiesto toho, aby sa načítal chtiac-nechtiac. Ďalšou možnosťou je umožniť používateľom spustiť proces načítania (napríklad kliknutím na „načítať viac“), vďaka čomu budú mať kontrolu nad akýmikoľvek zmenami rozloženia.
Znížte CLS, aby ste zvýšili používateľskú skúsenosť
Pokiaľ ide o Cumulative Layout Shift, menej je určite viac. Našťastie jeho zníženie nie je žiadna veľká veda – pomocou ktorejkoľvek z priamočiarych metód, o ktorých sme tu diskutovali, môžete výrazne zmeniť používateľskú skúsenosť svojich stránok k lepšiemu.
Nakoniec vy (a vaše hodnotenie) určite budete mať prospech z úsilia o zníženie CLS, ktoré dnes implementujete. To platí bez ohľadu na to, či spoločnosť Google používa kumulatívny posun rozloženia ako faktor hodnotenia alebo nie.
Obrazové kredity
Snímky obrazovky od autora / september 2021
Rozšírené reklamy / december 2020
Nic Jansma / október 2020
Cloudflare / august 2021
