Googlea on mahdotonta pitää täysin tyytyväisenä. Luovuin siitä jo kauan sitten, vaikka on asioita, joihin on puututtava, kuten CLS
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 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
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
CLS Visualizer Koska tämä työkalu on yksi yksinkertaisimmista, olen onnistunut saamaan sillä parhaat siirtymät.
CLS Visualizer on
Tuon demonikuvakkeen sijainti siirtyi sen sisältävän lohkon kohdalta, mikä oli navigoinnissa huomaamatonta. 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.
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:
Selaimen laajennuksen avulla Chromessa voit asentaa CLS Checker - Journey Further
Webpagetest Toinen mittaussivusto, jossa voit tehdä testin osoitteessa webpagetest.org
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ä yksityiskohtaisemmin Ad Inserter
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
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 ( suosittelen ) tai WP Rocketia
Tai Litespeed Cache
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
