Det er umulig å gjøre Google helt fornøyd. Jeg har gitt opp for lenge siden, selv om det finnes problemer som må løses, for eksempel CLS (Cumulative Layout Shift).
Kumulativ layoutforskyvning
Kumulativ layoutforskyvning er den kumulative endringen i layout. Dette målet er viktig fordi det analyserer visuell stabilitet og hvor ofte besøkende opplever uventede layoutendringer.
Kort fortalt måler den en eventuell forskyvning av elementene øverst på siden under innlasting.
En lav CLS bidrar til å gjøre siden behagelig for øyet og forhindrer irriterende bevegelser som kan føre til at leseren mister et viktig element i navigasjonen av syne og/eller plasserer det feil.
Det regnes som en god brukeropplevelse hvis CLS ikke overstiger 0,1, opp til 0,25 må det forbedres, og derfra regnes det som en dårlig score. Dette kan, som jeg antar at du allerede vet, måles på flere måter. Den mest brukte er PageSpeed Insights.
Som nevnt i Core Web Vitals-dokumentasjonen, kan en dårlig CLS være forårsaket av ulike elementer, for eksempel et bilde eller en video med ukjente dimensjoner, en font som vises større eller mindre enn alternativet, eller en tredjepartsannonse, widget eller animasjonseffekt som endrer størrelse dynamisk.
Paradoksalt nok er noen av elementene som har en tendens til å børste CLS, Google Adsense-annonser. Spesielt hvis du bruker alternativet for automatiske annonser og lar Google bestemme alt (anbefales ikke, det er best å bruke automatiske annonser bare for å vise kule- og / eller ankerannonser). Det er tilfeller der de til og med ødelegger lastehastigheten fullstendig.
Hvordan oppdage forskyvning
Her er det springende punktet: Hva er det egentlig vi må se etter, og hvordan finner vi det? Vel, alt som endrer størrelse og/eller forskyver seg under lasting.
Nå som vi er i full gang med å prøve å løse Adsense-problemet, kan vi ta en titt på resten av elementene som kan fete CLS. Det er forskjellige måter å gjøre dette på, her er noen få.
Ser på
Den mest rustikke metoden er enkel observasjon, med øyet. Hvis forskyvningen er merkbar, vil du se den umiddelbart, men det finnes mindre merkbare bevegelser som krever nærmere inspeksjon.
I søkekonsollen
I GSC, under "Top web metrics", kan du få en liste over nettadresser med CLS- og LCP-problemer for å se nærmere på dem én etter én.
Kumulativ Layout Shift Debugger
Cumulative Layout Shift Debugger er et nettsted der du skriver inn nettadressen du ønsker å analysere, og den lager en animert GIF som viser alle layoutendringene i mobil- og desktopversjonen.
Dette verktøyet, som er laget av en Chrome-ingeniør, er et av de mest nyttige verktøyene for å finne CLS-problemer.
Hvis det meste av teksten på siden er uthevet, er det sannsynligvis skriftene dine som forårsaker layoutendringene.
Layout Shift GIF Generator
Layout Shift GIF Generator er et annet nettsted som gjør det samme, det genererer en GIF med skift for mobil- og PC-versjonen. Du kan prøve det for å sammenligne resultatene. Det er alltid små forskjeller i målingene til hvert verktøy, og du kan finne noe i det ene verktøyet som det andre ikke kan vise eller ikke oppdager på et gitt tidspunkt.
CLS Visualizer
Dette verktøyet, som er et av de enkleste, er det jeg har klart å fange opp de beste forskyvningene med.
CLS Visualizer er en svært nyttig utvidelse som, som navnet antyder, hjelper deg med å visualisere Cumulative Layout Shift-målingen på siden ved å vise nøyaktig hvilke elementer som endres og hvordan de endres. Merk at dette også er et laboratorieverktøy som gir data basert på enhet, nettleser, skjermoppløsning eller tilkoblingstype.
Når du aktiverer utvidelsen, vises CLS-målingene i en liste, og når du klikker på hver av dem, vises animasjonen til elementet som forårsaker den, i rødt.
Takket være denne utvidelsen har jeg oppnådd null CLS på mange sider. Selv om det kan være så mange ting som forårsaker det at jeg har latt det være installert for å gjennomgå nettadresser uten hastverk.
Endre nettstedets lastehastighet med Chrome Dev Tools
Chrome Dev Tools byr på interessante muligheter, og en av de mest nyttige for å få grep om CLS er muligheten til å redusere båndbredden som siden lastes inn med, slik at du tydelig kan se når designendringen skjer og hvilke elementer som bidrar til den.
For å gjøre dette åpner du Chrome Dev Tools i nettleseren ved å høyreklikke/inspisere på nettstedet ditt, og i Nettverk ser du etter Wifi-ikonet som vises på bildet, og ved siden av det finner du en rullegardinmeny der du kan legge til en tilpasset hastighet.
Opprett en ny profil og legg til 100 Kb eller mindre for å teste den i "sakte film".
Nå som du surfer med en hastighet fra da internett gikk i et høyt tempo, vil du ha mye lettere for å identifisere hva som kan gi deg problemer under innlastingen.
Gjengivelse
I Layout Shift Regions i Chrome Dev Tools kan du også se layoutendringer uthevet i blått mens du navigerer på siden i sanntid.
Slik aktiverer du designendringsregionene:
Søk etter "Rendering" eller "rendering" i konsollen hvis du har den på engelsk.
Merk av i avmerkingsboksen Rendering regions og eventuelle andre avmerkingsbokser du ønsker å prøve.
Når du nå navigerer på siden, vil layoutendringene bli markert i blått.
Med en nettleserutvidelse
I Chrome kan du installere utvidelsen CLS Checker - Journey Further og teste alle nettadressene som er fulle av tegnsetting. I tillegg gir utvidelsen ledetråder i form av røde etiketter og viser deg listen over elementer og CLS de bruker. Ved å klikke på "Toogle" fremheves det aktuelle elementet. I mitt tilfelle, siden jeg allerede hadde løst Adsense-annonseproblemet, vises bare en.
Websidetest
Et annet målested der du kan gjøre en test på webpagetest.org, og du kan se videoene og de animerte gif-ene som genereres.
Når du setter videoen på pause, blir det lettere å finne små forskyvninger.
Hvis du ser nøye etter, er både menyelementene og tittelen og tekstene forskjøvet litt til høyre av det som ser ut til å være en endring i skriftstørrelse og/eller plassering, men annonseplassen over tittelen er allerede reservert, så den forskyver ikke innholdet nedover. Det ble løst ved å redusere H1 litt og fikse innpakningen av de tilhørende tekstene.
Men det er en annen sak, la oss heller se på hvordan annonsene oppfører seg.
Løsninger for reservasjon av annonseblokker
Da jeg lette etter den beste og raskeste løsningen, fant jeg ut at den beste løsningen var å legge til en minimumshøydeverdi i en innpakning (div) rundt hver av annonseblokkene for å reservere denne plassen og unngå rulling etter innlasting.
Det ser imidlertid ut til at det ikke er nok å bruke en klasse for å peke på denne CSS-egenskapen, men også å bruke en ID for innpakningen. Det ser ut til at Google AdSense JavaScript av en eller annen ukjent grunn fjerner direktivene for minimumshøyde fra ethvert overordnet objekt. De fjernes imidlertid ikke hvis en ID brukes til CSS-målretting.
Dette er forklart her i sammendrag og i mer detalj i Googles dokumentasjon. Ettersom jeg syntes denne løsningen var vanskelig, siden jeg måtte sjekke alle blokkene, fortsatte jeg å lete etter et alternativ til jeg fant det som fungerte for meg, nemlig Ad Inserter. Dette var trinnene.
Endring av tilpasningsdyktige annonser til fast størrelse
Det første jeg gjorde, var å slutte å bruke adaptive annonseblokker. Jeg endret alle blokkene til faste størrelser.
Denne avgjørelsen må utredes og vurderes i hvert enkelt tilfelle.
Selv om Google hevder at annonser som kan tilpasses genererer mer inntekter (åpenbart på grunn av muligheten til å vise forskjellige størrelser), er dette ganske elastisk og kan variere avhengig av ulike scenarier. Hvis du velger de mest populære størrelsene, vil du alltid vise annonser.
Deaktiver størrelsesoptimalisering
Selv om blokkene allerede skal ha en fast størrelse, bør du deaktivere alternativet som lar Google bestemme størrelsen på mobilannonser på egen hånd. Dette alternativet finner du i Adsense-administrasjonen under Annonser/Globale innstillinger.
På denne måten unngår vi overraskelser i tilfelle vi har glemt noen annonser som vi har plassert for hånd. Det at de har fast størrelse, betyr uansett ikke at de ikke lenger er responsive.
Reserver annonseplasser med Ad Inserter
Ad Inserter er etter min mening den beste plugin-modulen for annonsehåndtering, som til og med kan brukes til å legge til annet innhold.
For å reservere plass til hver annonse går du til "Display" og definerer bredde og høyde eller bare høyden på hver blokk.
Hvis du bruker PRO-versjonen, kan du også sjekke Lazy Load, som også har en tendens til å lindre CLS litt mer.
Noen betraktninger
Å reservere plass for Adsense har sine ulemper, der annonser ikke kan vises fordi de ikke vises i den størrelsen, eller det ikke er noen annonsører for nettstedet ditt til enhver tid, kan du få en tom plass på størrelse med den reserverte plassen.
I Ad Inserter kan du definere høyden direkte med tilpasset CSS-kode, men bare for innsettinger på serversiden.
Merk at høyden på annonsen defineres av annonsekoden. Den adaptive annonsekoden kan angi høyden på annonsen i henhold til den tilgjengelige plassen.
Noen annonsenettverk (for eksempel AdSense) kan også vise annonser som er mindre enn den tilgjengelige plassen. Blokkhøyden, som definert i Ad Inserter, er høyden på den innsatte blokken, dvs. høyden på div-en som omslutter den. Dette er plassen som er reservert for annonsen. Følgende kan skje når du reserverer den:
- Hvis høyden på reklamen er den samme som høyden på det reserverte arealet (blokkhøyde), vil det ikke være noen designendring, og det vil ikke påvirke CLS.
- Hvis høyden på reklamen er større enn høyden på den reserverte plassen (blokkhøyde), er det mulig at designet vil bli forskjøvet nedover for å få plass til reklamen og påvirke CLS.
- Hvis høyden på annonsen er mindre enn høyden på den reserverte plassen (blokkhøyde), vil du få et tomt område under annonsen, men layouten vil ikke endres og vil ikke påvirke CLS.
Noen annonsekoder, for eksempel AdSense adaptive annonsekode, kan overstyre høyden på hovedcontainerne. I slike tilfeller blir blokkhøyden overskrevet og vil ikke bli brukt.
Kort sagt, når det gjelder presserende CLS-problemer som må løses ved å minimere designendringer, er det raskeste alternativet å bruke faste annonsestørrelser når det er mulig.
Og mens du er i gang, kan du sørge for at du ikke har manglende dimensjoner i bildene, dette kan også løses på forskjellige måter. Noen raske og enkle måter er å bruke Perfmatters (plugin som jeg anbefaler) eller WP Rocket (begge betalt).
Eller Litespeed Cache-plugin hvis du hoster bloggen din på en Litespeed-server.
Hvis alt gikk bra, bør du se CLS-fallet i løpet av noen timer i feltrapportene og i løpet av noen dager i PageSpeed Insights-laboratorierapportene.
