Nie je možné, aby bol Google úplne spokojný. Už dávno som to vzdal, hoci existujú problémy, ktoré treba riešiť, napríklad CLS (kumulatívny posun rozloženia).
Kumulatívny posun rozloženia
Kumulatívny posun rozloženia je kumulatívna zmena rozloženia. Táto metrika je dôležitá, pretože analyzuje vizuálnu stabilitu a frekvenciu, s akou návštevníci zažívajú neočakávané zmeny rozloženia.
Stručne povedané, meria akýkoľvek posun prvkov v hornej časti stránky počas načítania.
Dosiahnutie nízkej hodnoty CLS pomáha zabezpečiť, aby stránka bola príjemná pre oči a zabraňuje nepríjemným pohybom, ktoré môžu spôsobiť, že čitateľ stratí z dohľadu a/alebo polohu dôležitého prvku navigácie.
Za dobrú používateľskú skúsenosť sa považuje, ak CLS nepresiahne hodnotu 0,1, do hodnoty 0,25 sa musí zlepšiť a od tejto hodnoty sa považuje za zlé skóre. Ako už predpokladám viete, toto sa dá merať viacerými spôsobmi. Najrozšírenejším je služba PageSpeed Insights.
Ako sa uvádza v dokumentácii k nástroju Core Web Vitals, zlý CLS môžu spôsobovať rôzne prvky, napríklad obrázok alebo video s neznámymi rozmermi, písmo, ktoré sa zobrazuje väčšie alebo menšie ako jeho alternatíva, alebo reklama tretej strany, widget alebo animačný efekt, ktorý dynamicky mení veľkosť.
Paradoxom je, že niektoré z prvkov, ktoré majú tendenciu otierať CLS, sú reklamy Google Adsense. Najmä ak používate možnosť automatických reklám, ktorá necháva o všetkom rozhodovať spoločnosť Google (neodporúča sa, najlepšie je používať automatické reklamy len na zobrazovanie odrážok a/alebo kotvových reklám). Existujú prípady, keď dokonca úplne zničia rýchlosť načítania.
Ako zistiť posun
Tu je podstata veci: čo presne máme hľadať a ako to nájdeme? Nuž, všetko, čo mení veľkosť a/alebo sa posúva počas zaťažovania.
Teraz, keď sme sa pokúsili vyriešiť problém Adsense, sa môžeme pozrieť na ostatné prvky, ktoré môžu CLS vykrmovať. Existujú rôzne spôsoby, ako to urobiť, tu je niekoľko z nich.
Pri pohľade na
Najjednoduchšou metódou je jednoduché pozorovanie od oka. Ak je posun nápadný, uvidíte ho okamžite, ale existujú aj menej nápadné pohyby, ktoré si vyžadujú bližšiu kontrolu.
V konzole vyhľadávania
V GSC môžete v časti "Top webové metriky" získať zoznam adries URL s problémami CLS a LCP a pozrieť sa na ne bližšie.
Kumulatívne ladenie posunu rozloženia
Cumulative Layout Shift Debugger je webová stránka, na ktorej zadáte url adresu, ktorú chcete analyzovať, a vytvorí sa animovaný GIF, ktorý zobrazí všetky zmeny rozloženia mobilnej a počítačovej verzie.
Tento nástroj, ktorý vytvoril inžinier spoločnosti Chrome, je jedným z najužitočnejších nástrojov na vyhľadávanie problémov so systémom CLS.
Ak je väčšina textu na stránke zvýraznená, je pravdepodobné, že zmeny rozloženia spôsobujú vaše písma.
Generátor GIF s posunom rozloženia
Layout Shift GIF Generator je ďalšia webová stránka, ktorá robí to isté, generuje gif s posunmi pre mobilnú a desktopovú verziu. Môžete si ho vyskúšať a porovnať výsledky. V meraniach jednotlivých nástrojov sú vždy mierne rozdiely a v jednom nástroji môžete nájsť to, čo druhý nástroj nie je schopný zobraziť alebo v danom čase nezistí.
Vizualizér CLS
Tento nástroj je jedným z najjednoduchších, a preto sa mi s ním podarilo zachytiť najlepšie posuny.
CLS Visualizer je veľmi užitočné rozšírenie, ktoré vám, ako už názov napovedá, pomôže vizualizovať metriku kumulatívneho posunu rozloženia stránky tým, že vám presne ukáže, ktoré prvky sa menia a ako sa menia. Všimnite si, že ide aj o laboratórny nástroj, ktorý poskytuje údaje na základe vášho zariadenia, prehliadača, rozlíšenia obrazovky alebo typu pripojenia.
Po aktivácii rozšírenia sa zobrazia merania CLS v zozname a po kliknutí na každé z nich sa animácia prvku, ktorý ho spôsobuje, zobrazí červenou farbou.
Vďaka tomuto rozšíreniu som na mnohých stránkach dosiahol nulový CLS. Hoci to môže byť toľko vecí, ktoré to spôsobujú, že som ho nechal nainštalované, aby som mohol bez náhlenia skontrolovať url.
Zmena rýchlosti načítania webu pomocou nástrojov Chrome Dev Tools
Nástroje Chrome Dev Tools ponúkajú zaujímavé možnosti, pričom jednou z najužitočnejších pri práci s CLS je možnosť znížiť šírku pásma, pri ktorej sa stránka načítava, aby ste jasne videli, kedy dochádza k zmene dizajnu a ktoré prvky sa na nej podieľajú.
Ak to chcete urobiť, otvorte v prehliadači Chrome Dev Tools a kliknite pravým tlačidlom myši na svoju webovú stránku a v časti Sieť vyhľadajte ikonu Wifi znázornenú na obrázku a vedľa nej nájdete rozbaľovaciu ponuku, do ktorej môžete pridať vlastnú rýchlosť.
Vytvorte nový profil a pridajte 100 Kb alebo menej, aby ste ho mohli otestovať v "spomalenom režime".
Pri surfovaní rýchlosťou z čias, keď internet bežal rýchlym tempom, teraz oveľa ľahšie zistíte, čo vám môže spôsobovať problémy pri načítavaní.
Vykresľovanie
V časti Oblasti posunu rozloženia v nástrojoch Chrome Dev Tools môžete tiež vidieť zmeny rozloženia zvýraznené modrou farbou počas prechádzania stránky v reálnom čase.
Toto sú kroky na aktiváciu oblastí zmeny dizajnu:
V konzole vyhľadajte položku "Rendering" alebo "rendering", ak ju máte v angličtine.
Začiarknite políčko Rendering regions (Regióny vykresľovania) a všetky ostatné políčka, ktoré chcete vyskúšať.
Teraz, keď sa budete pohybovať po stránke, zmeny rozloženia budú zvýraznené modrou farbou.
Pomocou rozšírenia prehliadača
V prehliadači Chrome si môžete nainštalovať rozšírenie CLS Checker - Journey Further a otestovať všetky adresy URL, ktoré sú plné interpunkčných znamienok. Okrem toho rozšírenie poskytuje nápovedy vo forme červených značiek a zobrazuje zoznam prvkov a CLS, ktoré spotrebúvajú. Kliknutím na položku "Toogle" sa príslušný prvok zvýrazní. V mojom prípade, keďže som už vyriešil problém s reklamou Adsense, sa zobrazí iba jeden.
Webpagetest
Na webovej stránke webpagetest.org môžete vykonať ďalší test a pozrieť si videá a animované gify, ktoré generuje.
Pozastavenie videa uľahčuje vyhľadávanie malých posunov.
Ak sa pozriete pozorne, položky ponuky, ako aj nadpis a texty sú posunuté trochu doprava, čo sa javí ako zmena veľkosti a/alebo umiestnenia písma, ale reklamný priestor nad nadpisom je už vyhradený, takže sa obsah neposunie nadol. Vyriešilo sa to tak, že sa trochu zmenšila veľkosť H1 a opravilo sa obtekanie sprievodných textov.
Ale to je iná záležitosť, venujme sa správaniu reklám.
Riešenia na rezerváciu slotov reklamných blokov
Pri hľadaní najlepšieho a najrýchlejšieho riešenia som zistil, že najlepším riešením je pridať minimálnu hodnotu výšky do obalu (div) okolo každého z reklamných blokov, aby sa vyhradil tento priestor a zabránilo sa posúvaniu po načítaní.
Zdá sa však, že na poukázanie na túto vlastnosť CSS nestačí použiť triedu, ale je potrebné použiť aj ID pre obal. Zdá sa, že z neznámeho dôvodu JavaScript služby Google AdSense odstraňuje smernice minimálnej výšky z akéhokoľvek nadradeného objektu. Neodstránia sa však, ak sa na zacielenie CSS použije ID.
Tento postup je stručne vysvetlený tu a podrobnejšie v dokumentácii spoločnosti Google. Keďže som toto riešenie považoval za otravné, pretože som musel kontrolovať všetky bloky, hľadal som alternatívu, až som našiel to, čo mi vyhovovalo, a to Ad Inserter. Toto boli kroky.
Zmena prispôsobiteľných reklám na pevnú veľkosť
Prvou vecou bolo prestať používať adaptívne reklamné bloky. Všetky bloky som zmenil na pevné veľkosti.
Toto rozhodnutie je potrebné preskúmať a posúdiť v každom jednotlivom prípade.
Hoci spoločnosť Google tvrdí, že prispôsobiteľné reklamy generujú vyššie príjmy (zrejme kvôli možnosti zobrazovať rôzne veľkosti), je to pomerne pružné a môže sa to líšiť podľa rôznych scenárov. Ak sa rozhodnete pre najpopulárnejšie veľkosti, reklamy sa vám budú zobrazovať vždy.
Zakázať optimalizáciu veľkosti
Hoci bloky už majú mať pevnú veľkosť, mali by ste vypnúť možnosť, ktorá umožňuje spoločnosti Google, aby sama rozhodovala o veľkosti mobilných reklám. Túto možnosť nájdete v administrácii Adsense v časti Reklamy/Globálne nastavenia.
Týmto spôsobom sa vyhneme prekvapeniam v prípade, že sme vynechali nejaký inzerát, ktorý sme vložili ručne. V každom prípade skutočnosť, že majú pevnú veľkosť, neznamená, že už nie sú citlivé.
Rezervácia reklamných plôch pomocou služby Ad Inserter
Ad Inserter je podľa mňa najlepší doplnok na správu reklám, ktorý sa dá použiť aj na pridávanie iného obsahu.
Ak chcete vyhradiť priestor pre jednotlivé reklamy, jednoducho prejdite do časti "Zobrazenie" a definujte šírku a výšku alebo len výšku každého bloku.
Ak používate ich verziu PRO, môžete tiež vyskúšať funkciu Lazy Load, ktorá tiež pomáha trochu viac zmierniť CLS.
Niektoré úvahy
Rezervácia priestoru pre Adsense má svoje nevýhody, keď sa reklamy nemôžu zobraziť, pretože sa neservírujú v tejto veľkosti alebo pre vašu stránku nie sú v danom čase žiadni inzerenti, môžete získať prázdne miesto vo veľkosti rezervovaného priestoru.
V aplikácii Ad Inserter môžete výšku definovať priamo pomocou vlastného kódu CSS, a to len v prípade vložených stránok na strane servera.
Všimnite si, že výška reklamy je definovaná kódom reklamy. Adaptívny kód reklamy môže nastaviť výšku reklamy podľa dostupného priestoru.
Niektoré reklamné siete (napríklad AdSense) môžu zobrazovať aj reklamy, ktoré sú menšie ako dostupný priestor. Výška bloku, ako je definovaná v aplikácii Ad Inserter, je výška vloženého bloku, t. j. výška divu, ktorý ho obklopuje. Ide o priestor vyhradený pre reklamu. Pri jeho vyhradení môže dôjsť k nasledujúcim situáciám:
- Ak je výška reklamy rovnaká ako výška vyhradeného priestoru (výška bloku), nedôjde k zmene dizajnu a nebude to mať vplyv na CLS.
- Ak je výška reklamy väčšia ako výška vyhradeného priestoru (výška bloku), dizajn sa môže posunúť smerom nadol, aby sa reklama zmestila a ovplyvnila CLS.
- Ak je výška reklamy menšia ako výška vyhradeného priestoru (výška bloku), pod reklamou sa zobrazí prázdne miesto, ale rozloženie sa nezmení a neovplyvní CLS.
Niektoré reklamné kódy, ako napríklad adaptívny reklamný kód AdSense, môžu potlačiť výšku hlavných kontajnerov. V takom prípade bude výška bloku prepísaná a nebude použitá.
Stručne povedané, v prípade naliehavých problémov CLS, ktoré je potrebné vyriešiť minimalizovaním zmien v dizajne, je najrýchlejšou možnosťou použiť pevné veľkosti reklám vždy, keď je to možné.
A keď už ste v tom, môžete sa uistiť, že vám v obrázkoch nechýbajú rozmery, čo sa dá tiež napraviť rôznymi spôsobmi. Niektoré rýchle a jednoduché spôsoby sú použitie Perfmatters ( plugin, ktorý odporúčam) alebo WP Rocket (oba sú platené).
Alebo doplnok Litespeed Cache, ak ste hostiteľom svojho blogu na serveri Litespeed.
Ak všetko prebehlo v poriadku, do niekoľkých hodín by ste mali vidieť pokles CLS v poľných správach a do niekoľkých dní v laboratórnych správach PageSpeed Insights.
