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 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, 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
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
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
Táto ikona démona mala posunutú polohu bloku, ktorý ju obsahoval, čo bolo pri navigácii nepostrehnuteľné. 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.
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:
Pomocou rozšírenia prehliadača V prehliadači Chrome si môžete nainštalovať rozšírenie CLS Checker - Journey Further
Webpagetest Na webovej stránke webpagetest.org
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 podrobnejšie Ad Inserter
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
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 ( odporúčam ) alebo WP Rocket
Alebo doplnok Litespeed Cache
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
