Tabla de contenidos
Det er umuligt at holde Google tilfreds. Jeg opgav det for længe siden, selvom der er problemer, der skal løses, som f.eks CLS (kumulativ layoutforskydning).
Kumulativ layoutforskydning
Cumulative Layout Shift er den kumulative ændring i layoutet. Denne metrik er vigtig, fordi den analyserer visuel stabilitet og den hyppighed, hvormed besøgende oplever uventede layoutændringer.
Kort sagt måler det enhver forskydning af elementerne øverst på siden under indlæsning.
At opnå en lav CLS er med til at sikre, at siden er behagelig for øjet og forhindrer irriterende bevægelser, der kan resultere i, at læseren mister vigtige navigationselementer af syne og/eller position.
Det betragtes som en god brugeroplevelse, hvis CLS ikke overstiger 0,1, op til 0,25 skal det forbedres, og fra da af betragtes det som en dårlig score. Dette kan, som du sikkert ved, måles på flere måder. Den mest almindeligt anvendte er PageSpeed Insights.
Som det fremgår af dokumentationen til Core Web Vitalskan en dårlig CLS skyldes forskellige elementer som f.eks. et billede eller en video med ukendte dimensioner, en skrifttype, der vises større eller mindre end dens alternativ, eller en tredjepartsannonce eller widget eller animationseffekt, der ændrer størrelse dynamisk.
Paradoksalt nok er Google Adsense-annoncer nogle af de elementer, der har en tendens til at udviske CLS. Især hvis du bruger de automatiske annoncer og lader Google bestemme alt (anbefales ikke, det er bedst kun at bruge automatiske annoncer til at vise punkt- og/eller ankerannoncer). Der er tilfælde, hvor de endda ødelægger indlæsningshastigheden fuldstændigt.
Sådan opdager du forskydning
Her er sagens kerne: Hvad skal vi helt præcist kigge efter, og hvordan finder vi det? Jo, alt, hvad der ændrer størrelse og/eller forskydes under indlæsningen.
Nu, hvor vi er i fuld gang med at løse Adsense-problemet, kan vi se på resten af de elementer, der kan gøre CLS’en for tyk. Der er forskellige måder at gøre dette på, her er et par stykker.
Ved at kigge på
Den mest rustikke metode er simpel observation med øjet. Hvis bevægelsen er mærkbar, vil du se det med det samme, men der er mindre mærkbare bevægelser, der kræver en nærmere inspektion.
I Search Console
I GSC, under “Top Web Metrics”, kan du få en liste over URL’er med CLS- og LCP-problemer, som du kan bruge til at se nærmere på dem en efter en.
Fejlfinding af kumulativ layoutforskydning
Kumulativ Layout Shift Debugger, er en hjemmeside, hvor du indtaster den url, du vil analysere, og den opretter en animeret GIF, der viser alle layoutændringerne i mobil- og desktopversionen.
Dette værktøj, der er lavet af en Chrome-ingeniør, er et af de mest nyttige værktøjer til at finde CLS-problemer.
Hvis det meste af teksten på siden er fremhævet, er der gode chancer for, at det er dine fonte, der forårsager layoutændringerne.
GIF-generator til layoutskift
Layoutskift GIF-generator er en anden hjemmeside, der gør det samme, den genererer en gif med forskydningerne for mobil- og desktopversionen. Du kan prøve det for at sammenligne resultaterne. Der er altid små forskelle i målingerne af hvert værktøj, og du kan finde i et værktøj, hvad det andet ikke er i stand til at vise eller ikke opdager på et givet tidspunkt.
CLS Visualizer
Dette værktøj, som er et af de enkleste, er det, som jeg har formået at fange de bedste forskydninger med.
CLS Visualizer er en meget nyttig udvidelse, der, som navnet antyder, hjælper dig med at visualisere sidens Cumulative Layout Shift-metrik ved at vise dig præcis, hvilke elementer der forskyder sig, og hvordan de forskyder sig. Bemærk, at dette også er et laboratorieværktøj, der leverer data baseret på din enhed, browser, skærmopløsning eller forbindelsestype.
Når du aktiverer udvidelsen, vil den vise dig CLS-målingerne i en liste, og når du klikker på hver enkelt, vil animationen af det element, der forårsager det, blive vist i rødt.
Takket være denne udvidelse har jeg opnået nul CLS på mange sider. Selvom der kan være så mange ting, der forårsager det, har jeg ladet det være installeret for at gennemgå url’er uden hastværk.
Ændre indlæsningshastigheden med Chrome Dev Tools
Chrome Dev Tools tilbyder interessante muligheder, og en af de mest nyttige til at få styr på CLS er muligheden for at reducere den båndbredde, som siden indlæses med, så du tydeligt kan se, hvornår designændringen sker, og hvilke elementer der bidrager til den.
For at gøre dette skal du åbne Chrome Dev Tools i browseren med højreklik/inspektion på din hjemmeside og i Network kigge efter Wifi-ikonet, der vises på billedet, og ved siden af det finder du en dropdown, hvor du kan tilføje en brugerdefineret hastighed.
Opret en ny profil, og tilføj 100 Kb eller mindre for at teste den i “slowmotion”.
Når du nu surfer med en hastighed fra dengang, internettet kørte langsomt, bliver det meget lettere at identificere, hvad der kan give dig problemer under indlæsningen.
Gengivelse
I Layout Shift Regions i Chrome Dev Tools kan du også se layoutændringerne fremhævet med blåt, mens du surfer på din side i realtid.
Her er trinene til at aktivere Layout Shift Regions:
Søg efter “Rendering” i konsollen.
Marker afkrydsningsfeltet Layout Shift Regions og eventuelle andre afkrydsningsfelter, du vil prøve.
Når du nu browser på siden, vil layoutændringerne blive fremhævet med blåt.
Med en browserudvidelse
I Chrome kan du installere udvidelsen CLS Checker – Rejsen videre og teste alle de URL’er, der er fulde af tegnsætning. Derudover giver udvidelsen hints i form af røde etiketter og viser dig listen over elementer og den CLS, de bruger. Ved at klikke på “Toogle” fremhæves det pågældende element. I mit tilfælde, hvor jeg allerede havde løst problemet med Adsense-reklamen, var der kun én.
Webpagetest
Et andet målesite, hvor du kan lave en test på webpagetest.org og du kan se de videoer og animerede gifs, det genererer.
Hvis man sætter videoen på pause, er det lettere at finde små forskydninger.
Hvis man ser godt efter, er menupunkterne samt titlen og teksterne forskudt en smule mod højre af det, der ser ud til at være en ændring af skriftstørrelse og/eller placering, men annoncepladsen over titlen er allerede reserveret, så det forskyder ikke indholdet nedad. Det blev løst ved at formindske H1 en smule og rydde op i ombrydningen af den ledsagende tekst.
Men det er en anden sag, lad os nu se på, hvordan annoncerne opfører sig.
Løsninger til at reservere plads til annonceblokke
Da jeg ledte efter den bedste og hurtigste løsning, fandt jeg ud af, at den bedste løsning var at tilføje en minimumshøjdeværdi til en wrapper (div) omkring hver af annonceblokkene for at reservere den plads og undgå scrolling efter indlæsning.
Det ser dog ud til, at det ikke er nok at bruge en klasse til at pege på denne CSS-egenskab, men også at bruge et ID til indpakningen. Det ser ud til, at Google AdSense JavaScript af en eller anden ukendt grund fjerner direktiverne for minimumshøjde fra ethvert overordnet objekt. De fjernes dog ikke, hvis der bruges et ID til CSS-målretning.
Dette er forklaret her opsummeret og noget mere detaljeret i Googles dokumentation. Da jeg syntes, at denne løsning var besværlig, fordi jeg skulle tjekke alle blokkene, blev jeg ved med at lede efter et alternativ, indtil jeg fandt det, der fungerede for mig, nemlig Annonceindsætter. Dette var trinene.
Ændring af adaptive annoncer til fast størrelse
Den første ting var at stoppe med at bruge adaptive annonceblokke. Jeg ændrede alle blokke til faste størrelser.
Omkring denne beslutning er du nødt til at studere og evaluere din specifikke sag.
Selvom Google hævder, at de adaptive genererer flere indtægter (naturligvis på grund af muligheden for at kunne vise forskellige størrelser), er dette ret elastisk og kan variere i henhold til forskellige scenarier. Hvis du vælger de mest populære størrelser, vil du altid vise annoncer.
Deaktiver optimering af størrelse
Selvom det allerede er meningen, at blokkene skal have en fast størrelse, er det bedst at deaktivere den mulighed, der giver Google mulighed for selv at bestemme størrelsen på mobilannoncer. Denne mulighed kan findes i Adsense-administrationen under Annoncer/Globale indstillinger.
På den måde undgår vi overraskelser, hvis vi har overset en annonce, som vi har placeret manuelt. Under alle omstændigheder betyder det ikke, at de ikke længere er responsive, bare fordi de har en fast størrelse.
Reservering af plads til annoncer med Ad Inserter
Ad Inserter er, synes jeg, det bedste plugin til annoncehåndtering, som endda kan bruges til at tilføje andet indhold.
For at reservere plads til hver annonce skal du bare gå til “Display” og definere bredden og højden på hver blok.
Hvis du bruger dens pRO-versionversion, kan du også tjekke Lazy Load, som også har en tendens til at afhjælpe CLS lidt mere.
Nogle overvejelser
Atreservere plads til Adsense har sine ulemper, hvor annoncer ikke kan vises, fordi de ikke serveres i den størrelse, eller der ikke er nogen annoncører til dit websted på et tidspunkt, kan du få en tom plads på størrelse med den reserverede plads.
I Ad Inserter kan du, kun for indsættelser på serversiden, definere højden direkte med den Brugerdefineret CSS .
Bemærk, at annoncens højde defineres af annoncekoden. Koden til adaptive annoncer kan indstille højden på annoncen i henhold til den tilgængelige plads.
Nogle annoncenetværk (såsom AdSense) kan også vise annoncer, der er mindre end den tilgængelige plads. Blokhøjden, som defineret i Ad Inserter, er højden på den indsatte blok, dvs. den div, der omslutter den. Dette er den plads, der er reserveret til annon cen. Når du reserverer den, kan følgende ske:
- Hvis annoncens højde er den samme som højden på den reserverede plads (blokhøjde), vil der ikke ske nogen layoutændring, og det vil ikke påvirke CLS.
- Hvis annoncens højde er større end højden på den reserverede plads (blokhøjde), kan designet blive forskudt nedad for at rumme annoncen og påvirke CLS.
- Hvis annoncens højde er mindre end højden på den reserverede plads (blokhøjde), vil du få en tom plads under annoncen, men layoutet vil ikke ændre sig og vil ikke påvirke CLS.
Nogle annoncekoder, såsom AdSense adaptive annoncekode, kan tilsidesætte højden på hovedcontainerne. I dette tilfælde vil blokhøjden blive overskrevet og ikke blive anvendt.
Kort sagt, i tilfælde af et presserende behov for at løse CLS-problemer ved at minimere layoutændringer, er den hurtigste løsning at bruge faste annoncestørrelser, når det er muligt.
Og mens du er i gang, kan du sikre dig, at du ikke mangler dimensioner på billeder, dette kan også løses på en række måder. Nogle hurtige og nemme er at bruge Perfmatters (plugin, som jeg anbefaler) eller WP Rocket (begge mod betaling).
Eller plugin’et Litespeed Cache hvis du hoster din blog på en Litespeed-server.
Hvis alt er gået godt, vil du i løbet af et par timer se CLS falde i feltrapporterne og i løbet af et par dage i laboratorierapporterne på PageSpeed Insights laboratorierapporter.
