Google'i on võimatu täielikult õnnelikuks teha. Ma loobusin sellest juba ammu, kuigi on probleeme, mis vajavad lahendamist, näiteks CLS
Kumulatiivne paigutuse nihe Kumulatiivne paigutusnihe on paigutuse kumulatiivne muutus. See mõõdik on oluline, sest sellega analüüsitakse visuaalset stabiilsust ja külastajate ootamatute paigutusmuutuste sagedust.
Lühidalt öeldes mõõdab see lehekülje ülaosas olevate elementide mis tahes nihkumist laadimise ajal.
Madala CLS-i saavutamine aitab tagada, et lehekülg oleks silmale meeldiv ja väldib tüütuid liigutusi, mis võivad põhjustada lugeja silmist kaduma ja/või navigatsiooni olulise elemendi paigutamist.
Hea kasutajakogemus on hea, kui CLS ei ületa 0,1, kuni 0,25 peab see paranema ja sealt edasi loetakse see halvaks. Seda, nagu te vist juba teate, saab mõõta mitmel viisil. Kõige laialdasemalt kasutatakse PageSpeed Insights
Nagu on märgitud Core Web Vitals 'i dokumentatsioonis, võivad halva CLS-i põhjustada mitmesugused elemendid, näiteks tundmatute mõõtmetega pilt või video, kirjatüüp, mis kuvatakse suuremana või väiksemana kui selle alternatiiv, või kolmanda osapoole reklaam või vidin või animatsiooniefekt, mis muudab dünaamiliselt oma suurust.
Paradoksaalsel kombel on mõned elemendid, mis kipuvad CLS-i harja, Google Adsense'i reklaamid. Eriti kui kasutate automaatsete reklaamide bullet- ja/või ankurreklaamide kuvamiseks). On juhtumeid, kus nad isegi täielikult rikuvad laadimiskiiruse.
Kuidas tuvastada nihkeid Siin ongi asja tuum: mida täpselt me peame otsima ja kuidas me seda leiame? Noh, kõike, mis muudab suurust ja/või nihkub laadimise ajal.
Nüüd, kui me oleme Adsense'i probleemi parandamise püüdlustes, saame vaadata ülejäänud elemente, mis võivad CLS-i nuumada. Selleks on erinevaid võimalusi, siin on mõned.
Vaadates Kõige maalähedasem meetod on lihtne vaatlus, silma järgi. Kui nihkumine on märgatav, näete seda kohe, kuid on ka vähem märgatavaid liikumisi, mis nõuavad lähemat vaatlust.
Search Console'is GSC-s, jaotises "Top web metrics", saate CLS- ja LCP-probleemidega URL-ide nimekirja, et neid ükshaaval lähemalt uurida.
Kumulatiivne paigutuse nihke tõrje Cumulative Layout Shift Debugger
See Chrome'i inseneri tehtud tööriist on üks kõige kasulikumaid vahendeid CLS-i probleemide leidmiseks.
Kui suurem osa lehekülje tekstist on esile tõstetud, siis on tõenäoline, et teie kirjatüübid põhjustavad paigutuse muutusi.
Layout Shift GIF generaator Layout Shift GIF Generator
CLS visualiseerija Kuna see vahend on üks lihtsamaid, siis on see see, millega mul on õnnestunud tabada parimad nihked.
CLS Visualizer on
See deemonlik ikoon nihutas seda sisaldava ploki asukohta, mis oli navigeerimisel märkamatu. Kui te aktiveerite laienduse, näitab see teile CLS-mõõtmisi nimekirjas ja kui te klõpsate igal neist, ilmub selle elemendi animatsioon, mis seda põhjustab, punasena.
Tänu sellele laiendusele olen saavutanud paljudel lehekülgedel null CLS-i . Kuigi see võib olla nii palju asju, mis seda põhjustavad, et ma olen jätnud selle installeeritud, et vaadata url'id ilma kiirustamata.
Samalt autorilt on olemas palju täiuslikum Core Web Vitals Visualizer
Chrome Dev Tools pakub huvitavaid võimalusi, üks kõige kasulikumaid CLSiga tutvumiseks on võimalus vähendada ribalaiust, millega leht laetakse, et oleks selgelt näha, millal toimub kujunduse muutus ja millised elemendid sellele kaasa aitavad.
Selleks avage brauseris Chrome Dev Tools, tehke paremklõps/ülevaade oma veebisaidil ja otsige jaotises Network pildil näidatud Wifi ikooni ning selle kõrval leiate rippmenüü, kuhu saate lisada kohandatud kiiruse.
Looge uus profiil ja lisage 100 Kb või vähem, et testida seda "aegluubis".
Nüüd, kui surfate kiirusega, kui internet oli kiire, on teil palju lihtsam tuvastada, mis võib teile laadimise ajal probleeme tekitada.
Renderdamine Chrome'i arendustööriistade paigutuse nihkepiirkondades näete ka paigutuse muutusi, mis on sinise värviga esile tõstetud, kui navigeerite oma lehel reaalajas.
Need on sammud, millega aktiveerida disainimuudatuspiirkonnad:
Brauseri laiendusega Chrome'is saate paigaldada CLS Checker - Journey Further
Webpagetest Teine mõõtmissait, kus saab teha testi aadressil webpagetest.org
Video pauside tegemine lihtsustab väikeste nihete leidmist.
Kui te vaatate tähelepanelikult, siis nii menüüelemendid kui ka pealkiri ja tekstid on veidi paremale nihutatud, mis näib olevat kirjasuuruse ja/või paigutuse muutmine, kuid pealkirja kohal olev reklaamipind on juba reserveeritud, nii et see ei nihuta sisu allapoole. Probleemi lahendati, vähendades veidi H1-i suurust ja parandades kaasnevate tekstide pakkimist.
Aga see on teine asi, tegeleme reklaami käitumisega.
Lahendused reklaamblokkide aegade reserveerimiseks Otsides parimat ja kiireimat lahendust leidsin, et parim lahendus oli lisada minimaalne kõrgus väärtus wrapper (div) ümber iga reklaambloki, et reserveerida see ruum ja vältida kerimist pärast laadimist.
Tundub aga, et sellele CSS-omadusele viitamiseks ei piisa klassi kasutamisest, vaid tuleb kasutada ka mähise ID-d. Tundub, et Google AdSense JavaScript eemaldab mingil teadmata põhjusel minimaalse kõrguse direktiivid igast vanemobjektist. Neid ei eemaldata aga, kui CSS-i suunamiseks kasutatakse ID-d.
Seda selgitatakse siin üksikasjalikumalt Ad Inserter
Kohandatavate kuulutuste muutmine fikseeritud suuruseks Esimene asi oli lõpetada adaptiivsete reklaamblokkide kasutamine. Muutsin kõik plokid fikseeritud suurusega .
Seda otsust tuleb uurida ja hinnata iga juhtumi puhul eraldi.
Kuigi Google väidab, et kohandatavad reklaamid toovad rohkem tulu (ilmselt tänu võimalusele kuvada erinevaid suurusi), on see üsna elastne ja võib erineda vastavalt erinevatele stsenaariumidele. Kui valite kõige populaarsemad suurused, siis kuvatakse alati reklaame.
Suuruse optimeerimise väljalülitamine Kuigi plokid peaksid juba praegu olema fikseeritud suurusega, peaksite keelama võimaluse, mis võimaldab Google'il ise otsustada mobiilireklaamide suuruse üle. Selle valiku leiad Adsense'i administreerimisest jaotisest Ads/Global Settings .
Nii väldime üllatusi juhul, kui oleme jätnud mõne käsitsi paigutatud kuulutuse. Igal juhul ei tähenda see, et need on fikseeritud suurusega, et need ei ole enam reageerivad.
Reklaamipinna reserveerimine Ad Inserteriga Ad Inserter on minu arvates parim reklaamide haldamise plugin, mida saab kasutada isegi muu sisu lisamiseks.
Iga reklaami jaoks ruumi reserveerimiseks mine lihtsalt "Kuva" ja määra iga ploki laius ja kõrgus või ainult kõrgus.
Kui kasutate nende PRO-versiooni
Mõned kaalutlused Adsense'i jaoks ruumi reserveerimisel on omad puudused , kui reklaame ei saa kuvada, sest neid ei serveerita selles suuruses või teie saidi jaoks ei ole igal ajal reklaamijaid, võite saada reserveeritud ruumi suuruse tühja ruumi.
Ad Inserteris saate ainult serveripoolsete sisestuste puhul määrata kõrguse otse kohandatud CSS-koodiga .
Pange tähele, et reklaami kõrgus on määratud reklaamikoodiga . Adaptiivne reklaamikood saab määrata reklaami kõrguse vastavalt olemasolevale ruumile.
Mõned reklaamivõrgustikud (näiteks AdSense) võivad edastada ka reklaame, mis on väiksemad kui olemasolev ruum. Ploki kõrgus, nagu on määratletud Ad Inserteris, on sisestatud ploki kõrgus, st div-i kõrgus, mis seda ümbritsevad. See on reklaami jaoks reserveeritud ruum . Selle reserveerimisel võib juhtuda järgmist:
Kui reklaami kõrgus on sama suur kui reserveeritud ruumi kõrgus (ploki kõrgus), ei toimu kujunduse muutmist ja see ei mõjuta CLS-i. Kui reklaami kõrgus on suurem kui reserveeritud ruumi kõrgus (ploki kõrgus), on võimalik, et kujundus nihkub reklaami mahutamiseks allapoole ja mõjutab CLS-i. Kui reklaami kõrgus on väiksem kui reserveeritud ruumi kõrgus (ploki kõrgus), tekib reklaami alla tühi ruum, kuid paigutus ei muutu ega mõjuta CLS-i. Mõned reklaamikoodid, näiteks AdSense'i kohanduv reklaamikood, võivad peamiste konteinerite kõrguse tühistada . Sellisel juhul kirjutatakse ploki kõrgus üle ja seda ei rakendata.
Lühidalt öeldes, kui tegemist on kiireloomuliste CLS-probleemidega, mida tuleb lahendada kujunduse muutmise minimeerimise teel, on kõige kiirem variant kasutada võimaluse korral fikseeritud reklaami suurust.
Ja kui te olete selle juures, võite veenduda, et teil ei ole puuduvaid mõõtmeid piltidel, seda saab samuti erinevatel viisidel parandada. Mõned kiired ja lihtsad viisid on kasutada Perfmatters ( soovitan ) või WP Rocket
Või Litespeed Cache
Kui kõik läks hästi, peaksite CLS-i langust nägema paari tunni jooksul väliaruannetes ja paari päeva pärast PageSpeed Insights
