Googlea on mahdotonta pitää täysin tyytyväisenä. Luovuin siitä jo kauan sitten, vaikka on asioita, joihin on puututtava, kuten CLS (Cumulative Layout Shift).
Kumulatiivinen asettelun muutos
Kumulatiivinen asettelusiirtymä on asettelun kumulatiivinen muutos. Tämä mittari on tärkeä, koska sillä analysoidaan visuaalista vakautta ja sitä, kuinka usein kävijät kokevat odottamattomia ulkoasun muutoksia.
Lyhyesti sanottuna se mittaa sivun yläosassa olevien elementtien siirtymistä latauksen aikana.
Matalan CLS-arvon saavuttaminen auttaa varmistamaan, että sivu miellyttää silmää, ja ehkäisee häiritseviä liikkeitä, jotka voivat johtaa siihen, että lukija menettää näkyvyyden ja/tai tärkeiden navigointielementtien sijainnin.
Käyttäjäkokemusta pidetään hyvänä, jos CLS-arvo ei ylitä 0,1:tä, 0,25:een asti on parannettavaa, ja siitä eteenpäin sitä pidetään huonona. Kuten oletan, että tiedät jo, tätä voidaan mitata useilla eri tavoilla. Yleisimmin käytetty on PageSpeed Insights.
Kuten Core Web Vitals-dokumentaatiossa todetaan, huono CLS voi johtua erilaisista elementeistä, kuten kuvasta tai videosta, jonka mitat ovat tuntemattomat, fontista, joka näkyy suurempana tai pienempänä kuin vaihtoehtoinen fontti, tai kolmannen osapuolen mainoksesta tai widgetistä tai animaatioefektistä, joka muuttaa dynaamisesti kokoaan.
Paradoksaalista kyllä, jotkut elementit, jotka yleensä harjaavat CLS:ää, ovat Google Adsense -mainoksia. Varsinkin jos käytät automaattisia mainoksia -vaihtoehtoa, joka antaa Googlen päättää kaikesta (ei suositella, automaattisia mainoksia kannattaa käyttää vain bullet- ja/tai ankkurimainosten näyttämiseen). On tapauksia, joissa ne jopa pilaavat latausnopeuden täysin.
Miten havaitaan siirtymä
Tässä on asian ydin: mitä meidän on tarkalleen ottaen etsittävä ja miten löydämme sen? Kaikkea, mikä muuttaa kokoa ja/tai siirtyy lastausvaiheessa.
Nyt, kun olemme yrittäneet korjata Adsense-ongelman, voimme tarkastella muita CLS:ää mahdollisesti lihottavia tekijöitä. Tähän on olemassa erilaisia tapoja, tässä on muutamia.
Katsomalla
Maalaismaisema menetelmä on yksinkertainen havainnointi silmämääräisesti. Jos siirtymä on havaittavissa, huomaat sen heti, mutta on olemassa vähemmän havaittavia liikkeitä, jotka vaativat tarkempaa tarkastelua.
Search Consolessa
GSC:n "Top web metrics" -kohdasta saat luettelon URL-osoitteista, joissa on CLS- ja LCP-ongelmia, ja voit tarkastella niitä tarkemmin yksi kerrallaan.
Kumulatiivinen asettelunsiirto Debugger
Cumulative Layout Shift Debugger on verkkosivusto, johon syötät url-osoitteen, jota haluat analysoida, ja se luo animoidun GIF-tiedoston, joka näyttää kaikki ulkoasun muutokset mobiili- ja työpöytäversiossa.
Tämä Chrome-insinöörin tekemä työkalu on yksi hyödyllisimmistä työkaluista CLS-ongelmien löytämiseen.
Jos suurin osa sivun tekstistä on korostettu, on todennäköistä, että fontit aiheuttavat asettelumuutoksia.
Asettelu Shift GIF Generator
Layout Shift GIF Generator on toinen verkkosivusto, joka tekee saman, se luo gif-kuvan, jossa on siirtymät mobiili- ja työpöytäversiota varten. Voit kokeilla sitä tulosten vertailemiseksi. Kunkin työkalun mittauksissa on aina pieniä eroja, ja saatat löytää yhdestä työkalusta sen, mitä toinen ei pysty näyttämään tai ei havaitse tiettynä ajankohtana.
CLS Visualizer
Koska tämä työkalu on yksi yksinkertaisimmista, olen onnistunut saamaan sillä parhaat siirtymät.
CLS Visualizer on erittäin hyödyllinen laajennus, joka nimensä mukaisesti auttaa sinua visualisoimaan sivun Cumulative Layout Shift -mittarin näyttämällä tarkalleen, mitkä elementit muuttuvat ja miten ne muuttuvat. Huomaa, että kyseessä on myös laboratoriotyökalu, joka tarjoaa tiedot laitteen, selaimen, näytön resoluution tai yhteystyypin perusteella.
Kun aktivoit laajennuksen, se näyttää CLS-mittaukset luettelossa, ja kun napsautat kutakin mittausta, sen aiheuttavan elementin animaatio näkyy punaisena.
Tämän laajennuksen ansiosta olen saavuttanut nolla CLS:ää monilla sivuilla. Vaikka se voi olla niin monia asioita, jotka aiheuttavat sen, että olen jättänyt sen asennettuna tarkistamaan url:t kiireettömästi.
Sivuston latausnopeuden muuttaminen Chrome Dev Tools -työkaluilla
Chrome Dev Tools tarjoaa mielenkiintoisia mahdollisuuksia, ja yksi hyödyllisimmistä CLS:n käytön kannalta on mahdollisuus vähentää kaistanleveyttä, jolla sivu latautuu, jotta näet selvästi, milloin suunnittelumuutos tapahtuu ja mitkä elementit siihen vaikuttavat.
Voit tehdä tämän avaamalla Chrome Dev Tools -selaimen ja klikkaamalla verkkosivua hiiren oikealla painikkeella ja etsimällä Network-kohdasta kuvassa näkyvän Wifi-kuvakkeen, jonka vieressä on pudotusvalikko, johon voit lisätä mukautetun nopeuden.
Luo uusi profiili ja lisää enintään 100 kilotavua testataksesi sitä "hidastettuna".
Kun surffaat nyt nopeudella, joka on peräisin ajalta, jolloin internet toimi nopealla tahdilla, sinun on paljon helpompi tunnistaa, mikä saattaa aiheuttaa ongelmia latauksen aikana.
Renderöinti
Chromen Dev Tools -työkalujen Layout Shift Regions -kohdassa voit myös nähdä asettelumuutokset sinisellä korostettuna, kun navigoit sivulla reaaliaikaisesti.
Nämä ovat vaiheet suunnittelun muutosalueiden aktivoimiseksi:
Etsi konsolista hakusanalla "Rendering" tai "rendering", jos sinulla on se englanniksi.
Merkitse Rendering regions -valintaruutu ja kaikki muut valintaruudut, joita haluat kokeilla.
Nyt kun navigoit sivulla, ulkoasumuutokset korostuvat sinisellä.
Selaimen laajennuksen avulla
Chromessa voit asentaa CLS Checker - Journey Further -laajennuksen ja testata kaikki ne URL-osoitteet, jotka ovat täynnä välimerkkejä. Lisäksi laajennus antaa vihjeitä punaisten merkintöjen muodossa ja näyttää luettelon elementeistä ja niiden kuluttamasta CLS:stä. Napsauttamalla "Toogle"-painiketta korostat kyseisen elementin. Minun tapauksessani, koska olin jo korjannut Adsense-mainosongelman, näkyy vain yksi.
Webpagetest
Toinen mittaussivusto, jossa voit tehdä testin osoitteessa webpagetest.org, ja voit nähdä sen tuottamat videot ja animoidut gifit.
Videon pysäyttäminen helpottaa pienten siirtymien löytämistä.
Jos katsot tarkkaan, sekä valikkokohdat että otsikko ja tekstit ovat siirtyneet hieman oikealle, mikä näyttää fontin koon ja/tai sijoittelun muutokselta, mutta otsikon yläpuolella oleva mainostila on jo varattu, joten se ei siirrä sisältöä alaspäin. Ongelma ratkaistiin pienentämällä H1-kohtaa hieman ja korjaamalla oheistekstien käärimistä.
Mutta se on eri asia, käsittelemme nyt mainosten käyttäytymistä.
Ratkaisut mainosblokkitilojen varaamiseen
Etsimällä parasta ja nopeinta ratkaisua löysin, että paras ratkaisu oli lisätä vähimmäiskorkeusarvo kääreeseen (div) jokaisen mainoslohkon ympärille, jotta tilaa voidaan varata ja välttää vieritys latauksen jälkeen.
Näyttää kuitenkin siltä, että ei riitä, että CSS-ominaisuuteen osoittava luokka on käytössä, vaan on myös käytettävä ID:tä kääreelle. Näyttää siltä, että jostain tuntemattomasta syystä Google AdSense JavaScript poistaa vähimmäiskorkeusohjeet kaikista vanhemmista objekteista. Niitä ei kuitenkaan poisteta, jos CSS-kohdistamiseen käytetään ID:tä.
Tämä selitetään tässä lyhyesti ja yksityiskohtaisemmin Googlen dokumentaatiossa. Koska tämä ratkaisu oli mielestäni hankala, koska minun piti tarkistaa kaikki lohkot, etsin vaihtoehtoa, kunnes löysin minulle sopivan ratkaisun, joka oli Ad Inserter. Nämä olivat vaiheet.
Mukautuvien mainosten vaihtaminen kiinteään kokoon
Ensimmäinen asia oli lopettaa mukautuvien mainosblokkien käyttö. Vaihdoin kaikki lohkot kiinteisiin kokoihin.
Tämä päätös on tutkittava ja arvioitava tapauskohtaisesti.
Vaikka Google väittääkin, että mukautettavat mainokset tuottavat enemmän tuloja (ilmeisesti siksi, että ne voidaan näyttää erikokoisina), tämä on melko joustava ja voi vaihdella eri tilanteiden mukaan. Jos valitset suosituimmat koot, näytät aina mainoksia.
Koon optimoinnin poistaminen käytöstä
Vaikka lohkoilla pitäisi olla jo nyt kiinteä koko, kannattaa poistaa käytöstä vaihtoehto, jonka avulla Google voi päättää mobiilimainosten koon itse. Tämä vaihtoehto löytyy Adsensen hallinnasta kohdasta Ads/Global Settings.
Näin vältymme yllätyksiltä, jos olemme jättäneet jonkin käsin laittamamme ilmoituksen. Joka tapauksessa se, että ne ovat kiinteän kokoisia, ei tarkoita, etteivät ne enää reagoi.
Varaa tilaa mainoksille Ad Inserterillä
Ad Inserter on mielestäni paras mainosten hallintaan tarkoitettu lisäosa, jota voidaan käyttää myös muun sisällön lisäämiseen.
Voit varata tilaa kullekin mainokselle menemällä kohtaan "Näyttö" ja määrittelemällä kunkin lohkon leveyden ja korkeuden.
Jos käytät heidän PRO-versiotaan, voit myös tarkistaa Lazy Load -ominaisuuden, joka myös yleensä lievittää CLS:ää hieman enemmän.
Joitakin näkökohtia
Adsense-tilan varaamisella on haittansa, jos mainoksia ei voida näyttää, koska niitä ei tarjoilla kyseisessä koossa tai sivustollesi ei ole mainostajia milloin tahansa, voit saada varatun tilan kokoisen tyhjän tilan.
Ad Inserterissä voit määrittää korkeuden suoraan mukautetun CSS-koodin avulla vain palvelinpuolen lisäyksiä varten.
Huomaa, että mainoksen korkeus määräytyy mainoskoodin mukaan. Adaptiivinen mainoskoodi voi asettaa mainoksen korkeuden käytettävissä olevan tilan mukaan.
Jotkin mainosverkostot (kuten AdSense) saattavat myös näyttää mainoksia, jotka ovat pienempiä kuin käytettävissä oleva tila. Lohkon korkeus, sellaisena kuin se on määritelty Ad Inserterissä, on lisätyn lohkon korkeus, eli sen ympäröivän div:n korkeus. Tämä on mainokselle varattu tila. Varattaessa sitä voi tapahtua seuraavaa:
- Jos mainoksen korkeus on sama kuin varatun tilan korkeus (korttelin korkeus), mainos ei muuta muotoilua eikä se vaikuta CLS-järjestelmään.
- Jos mainoksen korkeus on suurempi kuin varatun tilan korkeus (korttelin korkeus), mallia voidaan siirtää alaspäin, jotta mainos mahtuu mainokseen ja vaikuttaa CLS:ään.
- Jos mainoksen korkeus on pienempi kuin varatun tilan korkeus (lohkon korkeus), mainoksen alle jää tyhjä tila, mutta ulkoasu ei muutu eikä vaikuta CLS:ään.
Jotkin mainoskoodit, kuten AdSense-adaptiivinen mainoskoodi, saattavat ohittaa pääkonttien korkeuden. Tällöin lohkon korkeus ylikirjoitetaan, eikä sitä sovelleta.
Lyhyesti sanottuna, kun on kyse kiireellisistä CLS-ongelmista, jotka on ratkaistava minimoimalla suunnittelumuutokset, nopein vaihtoehto on käyttää kiinteitä mainoskokoja aina kun mahdollista.
Samalla voit varmistaa, ettei kuvista puutu mittoja, ja tämäkin voidaan korjata eri tavoin. Joitakin nopeita ja helppoja tapoja on käyttää Perfmattersia ( plugin, jota suosittelen) tai WP Rocketia (molemmat maksullisia).
Tai Litespeed Cache -lisäosaa, jos isännöit blogiasi Litespeed-palvelimella.
Jos kaikki meni hyvin, sinun pitäisi nähdä CLS:n laskevan muutaman tunnin kuluessa kenttäraporteissa ja muutaman päivän kuluessa PageSpeed Insightsin laboratorioraporteissa.
