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 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 Vitals kan 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 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,
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
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
Dæmonikonet havde en forskydning af placeringen af den blok, der indeholdt det, som ikke kunne ses i navigationen. 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.
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:
Med en browserudvidelse I Chrome kan du installere udvidelsen CLS Checker - Rejsen videre
Webpagetest Et andet målesite, hvor du kan lave en test på webpagetest.org
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 mere detaljeret Annonceindsætter
Æ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-version
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 anbefaler ) eller WP Rocket
Eller plugin'et Litespeed Cache
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
