A Google-t elégedetté tenni lehetetlen. Én már régen feladtam, bár vannak olyan kérdések, amelyekkel foglalkozni kell, mint például a CLS
Halmozott elrendezéseltolódás A Cumulative Layout Shift az elrendezés halmozott változása. Ez a mérőszám azért fontos, mert elemzi vizuális stabilitás és azt, hogy a látogatók milyen gyakran tapasztalnak váratlan elrendezésváltozásokat.
Dióhéjban összefoglalva az oldal tetején lévő elemek bármilyen elmozdulását méri a betöltés során.
Az alacsony CLS elérése segít biztosítani, hogy az oldal kellemes legyen a szemnek , és megakadályozza a bosszantó mozgásokat, amelyek azt eredményezhetik, hogy az olvasó elveszítheti a fontos navigációs elemek látványát és/vagy pozícióját.
Jó felhasználói élménynek számít, ha a CLS nem haladja meg a 0,1-et, 0,25-ig javítani kell, onnantól kezdve pedig rossz eredménynek számít. Ezt, gondolom, Ön is tudja, többféleképpen lehet mérni. A leggyakrabban használt PageSpeed Insights
Amint azt a dokumentációban a Core Web Vitals dokumentációban olvasható, a rossz CLS-t különböző elemek okozhatják, például ismeretlen méretű kép vagy videó, az alternatívájánál nagyobb vagy kisebb betűtípus, vagy egy harmadik féltől származó hirdetés, widget vagy animációs effekt, amely dinamikusan változtatja a méretét.
Paradox módon néhány olyan elem, amely hajlamos a CLS-t ecsetelni, a Google Adsense hirdetések. Különösen, ha a automatikus hirdetések bullet és/vagy anchor hirdetések megjelenítésére használja). Vannak esetek, amikor ezek akár teljesen tönkreteszik a betöltési sebességet.
Hogyan lehet észlelni a sodródást Itt jön a dolog lényege: pontosan mit kell keresnünk és hogyan találjuk meg? Nos, mindent, ami betöltés közben méretváltozást és/vagy eltolódást mutat.
Most, hogy már javítani próbáljuk az Adsense-problémát, megnézhetjük a többi olyan elemet, amelyek hizlalhatják a CLS-t. Ennek többféle módja van, íme néhány.
Megnézzük A legrusztikusabb módszer az egyszerű megfigyelés, szemmel. Ha a mozgás észrevehető, akkor azonnal észreveszi, de vannak kevésbé észrevehető mozgások, amelyek közelebbi vizsgálatot igényelnek.
A Search Console-ban A GSC-ben a "Top Web Metrics" menüpont alatt kaphatsz egy listát a CLS- és LCP-problémákkal rendelkező URL-ekről, amelyek segítségével egyesével közelebbről is megnézheted őket.
Kumulatív elrendezéseltolódás hibakereső Kumulatív elrendezéseltolódás hibakereső,
Ez az eszköz, amelyet egy Chrome mérnök készített, az egyik leghasznosabb eszköz a CLS-problémák felkutatására.
Ha az oldalon a szöveg nagy része ki van emelve, akkor nagy valószínűséggel a betűtípusok okozzák az elrendezésváltozásokat.
Layout Shift GIF-generátor Layout Shift GIF-generátor
CLS Visualizer Ez az eszköz, mivel az egyik legegyszerűbb, az, amellyel a legjobb elmozdulásokat sikerült elkapnom.
CLS Visualizer
Az a démon ikon az azt tartalmazó blokk helyének eltolódását a navigációban észrevehetetlen volt. A bővítmény aktiválásakor a CLS-méréseket egy listában jeleníti meg, és ha mindegyikre rákattint, az azt okozó elem animációja piros színnel jelenik meg.
Ennek a bővítménynek köszönhetően számos oldalon sikerült elérnem a nulla CLS-t . Bár olyan sok minden okozhatja, hogy telepítve hagytam, hogy sietség nélkül felülvizsgálhassam az url-eket.
A Chrome Dev Tools érdekes lehetőségeket kínál, az egyik leghasznosabb, hogy rátegyük a kezünket erre a CLS dologra, az a lehetőség, hogy csökkenthetjük a sávszélességet, amivel az oldal betöltődik, így jól látható, hogy mikor történik a dizájnváltás és milyen elemek járulnak hozzá.
Ehhez nyisd meg a Chrome Dev Tools-t a böngészőben jobb klikk/inspect a weboldaladon, és a Hálózat menüpontban keresd meg a képen látható Wifi ikont, mellette pedig találsz egy legördülő ablakot, ahol megadhatod az egyéni sebességet.
Hozzon létre egy új profilt, és adjon hozzá 100 Kb vagy kevesebbet, hogy "lassítva" tesztelhesse.
Most már olyan sebességgel böngészve, amikor az internet még lassan futott, sokkal könnyebb lesz azonosítani, hogy mi okozhat problémát a betöltés során.
Renderelés A Chrome Dev Tools-ban a Layout Shift Regions (Elrendezésváltás régiók) menüpontban az oldal valós idejű böngészése közben is láthatod a kékkel kiemelt elrendezésváltozásokat.
A következők a lépések a Layout Shift Regions engedélyezéséhez:
Egy böngészőbővítménnyel A Chrome-ban telepítheti a bővítményt CLS Checker - Továbbutazás
Webpagetest Egy másik mérési oldal, ahol tesztet végezhetsz a webpagetest.org
A videó szüneteltetése megkönnyíti a kis elmozdulások megtalálását.
Ha jobban megnézed, a menüpontok, valamint a cím és a szövegek egy kicsit jobbra tolódnak, ami úgy tűnik, hogy a betűméret és/vagy a hely megváltoztatásával, de a cím feletti reklámhely már foglalt, így a tartalom nem tolódik lefelé. Ezt úgy oldottuk meg, hogy a H1-et egy kicsit kisebbre vettük, és rendbe tettük a kísérőszövegek csomagolását.
De ez már más tészta, most foglalkozzunk a hirdetések viselkedésével.
Megoldások a hirdetési blokkok helyének lefoglalására A legjobb és leggyorsabb megoldást keresve azt találtam, hogy a legjobb megoldás az volt, hogy minden egyes hirdetési blokk köré egy minimális magassági értéket adtam egy wrapperhez (div), hogy lefoglaljam ezt a helyet, és elkerüljem a betöltés utáni görgetést.
Úgy tűnik azonban, hogy nem elég egy osztályt használni, amely erre a CSS tulajdonságra mutat, hanem egy ID-t is kell használni a wrapperhez. Úgy tűnik, hogy a Google AdSense JavaScript valamilyen ismeretlen okból kifolyólag eltávolítja a minimális magassági irányelveket bármely szülőobjektumról. Nem távolítja el őket azonban, ha egy ID-t használ a CSS-célzáshoz.
Ez a következőképpen magyarázható itt részletesebben Ad Inserter
Az adaptív hirdetések megváltoztatása fix méretűre Az első dolog az adaptív hirdetési blokkok használatának megszüntetése volt. Az összes blokkot fix méretűre változtattam.
Erről a döntésről meg kell vizsgálni és ki kell értékelni a konkrét esetet.
Bár a Google azt állítja, hogy az adaptívak több bevételt generálnak (nyilván a különböző méretek megjelenítésének lehetősége miatt), ez elég rugalmas, és a különböző forgatókönyvek szerint változhat. Ha a legnépszerűbb méreteket választja, mindig hirdetéseket fog mutatni.
Méretoptimalizálás kikapcsolása Bár a blokkoknak már eleve fix mérettel kellene rendelkezniük, a legjobb, ha letiltod azt az opciót, amely lehetővé teszi a Google számára, hogy saját maga döntsön a mobilhirdetések méretéről. Ez az opció az Adsense adminisztrációban a Hirdetések/Globális beállítások menüpontban található.
Így elkerülhetjük a meglepetéseket, ha esetleg elnéztünk egy kézzel elhelyezett hirdetést. Mindenesetre az, hogy fix méretűek, még nem jelenti azt, hogy már nem reagálnak.
Helyfoglalás a hirdetések számára az Ad Inserterrel Az Ad Inserter szerintem a legjobb plugin a hirdetéskezeléshez, amely még egyéb tartalmak hozzáadására is használható.
Ahhoz, hogy helyet foglaljon az egyes hirdetéseknek, csak menjen a "Megjelenítés" menüpontba, és határozza meg az egyes blokkok szélességét és magasságát.
Ha használja a pRO verzióját
Néhány megfontolás AzAdsense számára történő helyfoglalásnak megvannak a maga hátrányai , ahol a hirdetések nem jeleníthetők meg, mert nem abban a méretben szolgálják ki őket, vagy egy bizonyos ponton nincsenek hirdetők az oldaladhoz, akkor a lefoglalt hely méretének megfelelő méretű üres területet kaphatsz.
Az Ad Inserterben, csak a szerveroldali beillesztések esetében, közvetlenül meghatározhatja a magasságot a Egyéni CSS .
Vegye figyelembe, hogy a hirdetés magasságát a hirdetés kódja határozza meg . Az adaptív hirdetések kódja a rendelkezésre álló helynek megfelelően állíthatja be a hirdetés magasságát.
Egyes hirdetési hálózatok (például az AdSense) a rendelkezésre álló helynél kisebb hirdetéseket is kiszolgálhatnak. Az Ad Inserterben meghatározott blokkmagasság a beillesztett blokk, azaz az azt körülölelő div magassága. Ez a hirdetés számára fenntartott hely . Foglalása során a következők történhetnek:
Ha a hirdetés magassága megegyezik a lefoglalt hely magasságával (blokkmagasság), akkor nem lesz elrendezésváltozás, és ez nem befolyásolja a CLS-t. Ha a hirdetés magassága nagyobb, mint a lefoglalt hely magassága (blokkmagasság), akkor a design a hirdetés elhelyezéséhez lefelé tolódhat, és ez hatással lehet a CLS-re. Ha a hirdetés magassága kisebb, mint a lefoglalt hely magassága (blokkmagasság), akkor a hirdetés alatt üres hely jelenik meg, de az elrendezés nem változik, és nem befolyásolja a CLS-t. Egyes hirdetési kódok, például az AdSense adaptív hirdetési kódja felülbírálhatja a fő konténerek magasságát . Ebben az esetben a blokk magassága felülírásra kerül, és nem kerül alkalmazásra.
Röviden, abban az esetben, ha a CLS-problémákat sürgősen a layout-változások minimalizálásával kell megoldani, a leggyorsabb megoldás a fix hirdetési méretek használata, amikor csak lehetséges.
És ha már itt tartunk, győződjünk meg arról, hogy a képeknél nem hiányoznak a méretek, ez szintén többféleképpen javítható. Néhány gyors és egyszerű megoldás a következő Perfmatters ajánlott plugin) vagy a WP Rocket
Vagy a plugin Litespeed Cache
Ha minden jól ment, néhány órán belül látni fogod a CLS csökkenését a helyszíni jelentésekben, és néhány napon belül a laborjelentésekben a PageSpeed Insights laboratóriumi jelentések
