TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan fikse kumulativt layoutskift i WordPress?

2

Google presser nettredaktører til å iverksette alle tiltak som trengs for å forbedre sidehastigheten. Sidehastigheten til nettstedet ditt måles basert på få parametere som du kan se i Google PageSpeed ​​Insights -verktøyet. Cumulative Layout Shift (CLS) er et av kriteriene for hastighetsmåling av Core Web Vital. Dette er en viktig faktor ikke bare for å forbedre hastigheten, men også for bedre brukeropplevelse. I denne artikkelen vil vi forklare forskjellige årsaker til CLS -problemet og hvordan du kan fikse kumulativ layoutskiftfeil i WordPress.

Hva er kumulativt layoutskift?

Før du leser videre, er det nødvendig å forstå hva som er CLS. Enkelt sagt er dette en endring i innholdsoppsett som forårsaker dårlig brukeropplevelse. For eksempel er du i ferd med å klikke på en knapp på en side, og plutselig lastes et bannerbilde over og trykker knappen ned. Til syvende og sist vil du ende opp med å klikke på bildet utilsiktet som kan ta deg til en annen side. Dette er en veldig dårlig brukeropplevelse, og Google har en god forklaring i denne artikkelen som du kan lese videre.

Relatert: Hvordan aktivere lasting av bilder i Google Chrome?

Kontrollerer kumulativ layoutskiftfeil

Åpne Google PageSpeed ​​Insights (PSI) -verktøyet og sjekk hastigheten på nettsiden din. Du kan sjekke feltdataene eller opprinnelsessammendraget for å bekrefte at det kumulative problemet med layoutskift eksisterer på nettstedet ditt. Du kan holde musepekeren over fremdriftslinjen for å finne den kumulative belastningsprosenten der problemet eksisterer på siden / nettstedet.

Hvordan fikse kumulativt layoutskift i WordPress?

Sjekk CLS -problem i PSI

For å finne elementene som forårsaker problemer, bla ned til diagnostikkdelen og sjekk under "Unngå store layoutskift". Her viser Google listen over elementer som forårsaker layoutskift på den testede siden.

Hvordan fikse kumulativt layoutskift i WordPress?

Unngå store layoutskift

Sjekk detaljer i Google Search Console

Du kan se sidens nettadresser med CLS -problem i Google Search Console -kontoen. Etter at du har logget deg på kontoen din, går du til delen "Core Web Vitals" under "Forbedringer". Du kan finne rapportene for både mobil og skrivebord for å se sidene med "CLS -problem: mer enn 0,25 (mobil) / (stasjonær)".

Hvordan fikse kumulativt layoutskift i WordPress?

CLS -problem i Google Search Console

Klikk på problemet for å se eksempeladressen på nettstedet ditt som er berørt av CLS -problemet og gjennomsnittlig CLS -tid. Google vil vurdere CLS som et problem i henhold til tabellen nedenfor:

GodTrenger forbedringDårlig
<0,1 s0,1 til 0,25 sek> 0,25 sek

Derfor må du målrette om å redusere CLS -tiden mindre enn 0,25 sekunder for å gjøre dette grønt/gult i PSI -verktøyet og fjerne feilene fra Search Console -kontoen din.

Løs kumulativ layoutskiftfeil i WordPress

Her er noen av faktorene som kan forårsake kumulativ layoutforsinkelse på WordPress -nettstedet. La oss forklare hvert problem og mulige løsninger i detalj.

1 Optimalisering av CSS -levering

Som du ser på skjermbildet ovenfor av "Unngå store layoutskift", er det første elementet "<div class =" row footer-row ">". Dette er overraskende, da det ikke er noen muligheter for å laste bunntekstseksjonen inn over bretteområdet. Etter å ha kontrollert forstod vi at dette skyldes alternativet "Optimaliser CSS -levering" aktivert med WP Rocket -plugin. Dette alternativet vil generere kritisk CSS og legge det inn i overskriftsseksjonen for å fjerne gjengivelsesblokkerende CSS. Imidlertid vil det føre til kumulativt layoutskifteproblem i mange tilfeller. Hvis du bruker WP Rocket eller en annen hurtigbuffer -plugin for å legge inn CSS i toppteksten, deaktiverer du dette alternativet og sjekker om det hjelper å forbedre CLS -forsinkelsen.

2 AdSense og andre reklameskript i ATF

Mange utgivere bruker Google AdSense eller et annet annonsenettverk for å tjene penger på innholdet på nettet. Du må sette inn et stykke JavaScript -annonsekode på nettsiden din for å vise annonser. Vanligvis må du sette inn annonsekoden ovenfor ATF -området (fold) for å øke annonsens synlighet og inntekt. Dette vil imidlertid direkte påvirke sideinnlastingshastigheten og skape en kumulativ layoutfeilfeil i Google PageSpeed ​​Insight (PSI) -verktøyet.

Etter at du har lastet inn fullstendig over brettet, begynner annonsen å laste inn og presse innholdet ned.

Hvordan fikse kumulativt layoutskift i WordPress?

Layoutskift på grunn av reklame

Det er få alternativer for å fikse dette problemet. Det ene er å utsette annonseskriptet i WordPress ved hjelp av plugins som WP Rocket. Dette vil imidlertid påvirke annonsevisningen og klikkfrekvensen og dermed redusere den totale inntekten.

Hvordan fikse kumulativt layoutskift i WordPress?

Forsink reklame JavaScript -kjøring

Det andre alternativet er å bruke annonser med fast bredde over bretteområdet som Google anbefaler. Dessverre gjør Google det også klart at bruk av fast bredde ikke er mulig med responsive eller flytende annonser.

Det er ikke mulig å reservere plass til disse plassene før du ber om annonseinnhold, og flytende annonser forårsaker alltid layoutendringer. For å dempe effekten av layoutskift når du arbeider med flytende annonsefelt, anbefaler vi følgende: Bruk kun væskestørrelsen for spor under brettet.

Google

Derfor oppsummert kan du ikke løse problemet med mindre du fjerner den eksterne annonsekoden fra ATF -området. Dette gjelder alle andre tredjepartskoder du har plassert i toppteksten på nettstedet ditt.

3 Bruk riktige bildedimensjoner

Dette ligner på å bruke fikset med annonser. Når du ikke har bildedimensjoner, vil nettlesere vente på at bildene skal lastes inn og skyve innholdet nedenfor som forårsaker layoutskiftproblem. Heldigvis er dette ikke et problem, ettersom WordPress automatisk vil legge til dimensjoner i bilder når de lastes opp via postredigerer. Du må imidlertid manuelt legge til høyde- og breddeparametere i img -taggen hvis du setter inn bilder manuelt ved hjelp av "Tilpasset HTML" -blokk, "Rediger som HTML" -funksjon eller logobildet. I tillegg definerer du fast bredde og høyde når du legger inn videoer og iframes fra tredjeparts nettsteder.

Hvordan fikse kumulativt layoutskift i WordPress?

Mangler bredde og høyde for bildet

4 fonter som forsinker innlasting av innhold

Hvert nettsted bruker fonter. Dette vil skape et kumulativt layoutskiftproblem, spesielt når du bruker tredjepartstjenester som Google-fonter. Siden Google -skrifter må lastes inn fra eksterne servere, vil det skape et lignende kumulativt layoutskiftproblem som annonsekode. Du kan også se dette problemet i PSI som "Sørg for at teksten forblir synlig under webfontinnlasting" som indikerer at det er en forsinkelse i lasting av synlig innhold.

Hvordan fikse kumulativt layoutskift i WordPress?

Skriftproblem

  • Den effektive måten å løse dette problemet på er å bruke et hurtigbufret plugin for å forhåndskoble til og DNS forhåndshente domener som fonts.googleapis.com og fonts.gistatic.com domene. Dette vil hjelpe deg med å øke hastigheten på skriftinnlasting ved å koble til Google Fonts -serveren på forhånd. SG Optimizer, WP Rocket (automatisk) og mange andre plugins tilbyr denne funksjonen som du kan bruke til dette formålet. I tillegg kan du begrense antall skriftfamilier og vekter redusere størrelsen på nedlastede filer.

Hvordan fikse kumulativt layoutskift i WordPress?

SG Optimizer Web Fonts Optimization

  • Et annet alternativ er å bruke systemfonter eller være vert for skriftfilene på serveren din. For eksempel lar temaer som GeneratePress og Astra deg velge systemfont for nettstedet ditt.
  • Uansett må du forhåndslaste skrifttyper for å eliminere advarsel om forhåndslastingsnøkkel, som også kan forårsake kumulativ forsinkelse i layoutskift.

5 Skriftikoner i Meny og ATF

Mange WordPress-temaer bruker skriftikoner i navigasjonsområdet for å vise undermenyelementer. Vanligvis er disse ikonene inkludert fra tredjeparts nettsteder som font awesome eller icomoon. Dette vil skape lignende problemer som fonter og øke kumulativ layoutskiftetid. Temaer som GeneratePress lar deg velge SVG -ikoner i stedet for fonter for navigasjonsmenyen. På samme måte kan du på Astra -temaet deaktivere lasting av skriftbiblioteket ved hjelp av en tilpasset funksjon. På denne måten kan du forbedre det kumulative layoutoppsettsproblemet i WordPress. Du vil imidlertid ikke ha noe annet alternativ enn å deaktivere undermenyelementer i de fleste andre temaer, noe som ikke er en god løsning.

Nettredaktører misforstår PSI -advarselen om "Utsett bilder utenfor skjermen". Denne advarselen oppstår når du ikke laster inn bilder som er tilgjengelige under innholdet under folden (BTF). Men hvis du bruker en plugin i WordPress, alle bilder med HTML

For å redusere CLS -tiden i PSI -verktøyet, må du ekskludere logobildet fra lat lasting. Løsningen avhenger av pluginet du bruker for lat lasting av bildene dine. For eksempel i WP Rocket, gå til delen "Media> LazyLoad" og oppgi logonavn eller URL for å ekskludere fra lat lasting.

Hvordan fikse kumulativt layoutskift i WordPress?

Ekskluder logo fra lat lasting

7 Lazy Loading Image Sliders i ATF

I likhet med bildelogoen, vil du se høy kumulativ layoutskiftetid når du har bildeglidere over bretteområdet. Du kan ekskludere glidebryterbildene fra lat lasting og teste at det bidrar til å redusere CLS -tiden.

Relatert: 25 SEO -tips for å rangere WordPress -nettstedet ditt.

8 Gjengi blokkering av JavaScript som jQuery

Siste tema er den populære gjengivelsesblokkerende JavaScript på grunn av jQuery -baserte temaer. Faktisk inkluderer WordPress også jQuery som en del av wp-includes-mappen. Du kan utsette jQuery og andre gjengivelsesblokkerende skript på siden din ved hjelp av en hurtigbufret plugin som W3 Total Cache. Sørg imidlertid for å teste nettstedet ditt grundig for å unngå ødelagte oppsett.

Valideringsreparasjon i Google Search Console

Når du har løst problemet, må du sende inn valideringene dine i Google Search Console -kontoen. Du kan gå tilbake til delen "Core Web Vitals" og sende inn valideringer for hele nettstedet.

Hvordan fikse kumulativt layoutskift i WordPress?

Validerer CLS -problemet i Google Search Console

Dette vil ta opptil 28 dager før Google kontrollerer CLS -problemet på nettstedet ditt og viser de tilsvarende resultatene i Search Console -kontoen.

Konklusjon

Som du kan se, er hovedårsaken til kumulativ layoutfeilfeil i WordPress på grunn av plassering av render -blokkerende skript ovenfor innholdsområdet for fold. Det kan være annonsekoder, jQuery, fonter, ikoner eller andre ting. Løsningen for å overvinne dette problemet er å bruke enkle minimalistiske temaer som GeneratePress eller Astra. På den annen side kan du bruke hurtigbuffer -plugins for å koble til på forhånd og kombinere skriftfiler for å redusere den kumulative layout -skifttiden.

Opptakskilde: webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg akseptererMer informasjon