TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur fixar jag kumulativt layoutskift i WordPress?

3

Google driver webbansvariga att genomföra alla åtgärder som behövs för att förbättra sidhastigheten. Sidhastigheten för din webbplats mäts baserat på få parametrar som du kan se i verktyget för Google PageSpeed ​​Insights. Cumulative Layout Shift (CLS) är ett av hastighetsmätningskriterierna för Core Web Vital. Detta är en viktig faktor inte bara för att förbättra hastigheten utan också för bättre användarupplevelse. I den här artikeln kommer vi att förklara olika orsaker till CLS -problem och hur man åtgärdar kumulativt layoutskiftfel i WordPress.

Vad är kumulativ layoutskiftning?

Innan du läser vidare är det nödvändigt att förstå vad som är CLS. Enkelt uttryckt är detta en förändring i innehållslayout som orsakar dålig användarupplevelse. Till exempel är du på väg att klicka på en knapp på en sida och plötsligt laddas en bannerbild över och trycker ner knappen. I slutändan kommer du att sluta klicka på bilden oavsiktligt vilket kan ta dig till en annan sida. Detta är en mycket dålig användarupplevelse och Google har en bra förklaring i den här artikeln som du kan läsa vidare.

Relaterat: Hur aktiverar jag lat bildinläsning i Google Chrome?

Kontrollerar kumulativt layoutskiftfel

Öppna Google PageSpeed ​​Insights (PSI) -verktyget och kontrollera hastigheten på din webbsida. Du kan kontrollera fältdata eller ursprungssammanfattning för att bekräfta att det kumulativa layoutskiftproblemet finns på din webbplats. Du kan hålla muspekaren över förloppsindikatorn för att hitta den kumulativa laddningsprocenten där problemet finns på sidan / webbplatsen.

Hur fixar jag kumulativt layoutskift i WordPress?

Kontrollera CLS -problem i PSI

För att hitta de element som orsakar problem, rulla ner till diagnosavsnittet och kolla under "Undvik stora layoutskift". Här visar Google listan över element som orsakar layoutskift på den testade sidan.

Hur fixar jag kumulativt layoutskift i WordPress?

Undvik stora layoutskift

Kontrollera detaljer i Google Search Console

Du kan visa sidans webbadresser med CLS -problem i ditt Google Search Console -konto. När du har loggat in på ditt konto går du till avsnittet "Core Web Vitals" under avsnittet "Förbättringar". Du kan hitta rapporterna för både mobil och dator för att se sidorna med "CLS -problem: mer än 0,25 (mobil) / (stationär)”.

Hur fixar jag kumulativt layoutskift i WordPress?

CLS -problem i Google Search Console

Klicka på frågan för att se exempeladressen på din webbplats som påverkas av CLS -problem och den genomsnittliga CLS -tiden. Google kommer att anse att CLS är ett problem enligt tabellen nedan:

BraBehöver förbättrasFattig
<0.1s0,1 till 0,25 sek> 0,25 sek

Därför måste du sikta på att minska CLS -tiden mindre än 0,25 sekunder för att göra det här grönt/gula i PSI -verktyget och ta bort felen från ditt Search Console -konto.

Åtgärda kumulativt layoutskiftfel i WordPress

Här är några av de faktorer som kan orsaka kumulativ layoutförskjutning på WordPress -webbplatsen. Låt oss förklara varje problem och möjliga lösningar i detalj.

1 CSS leveransoptimering

Som du ser i skärmdumpen ovan av "Undvik stora layoutskift" är det första objektet "<div class =" row footer-row ">". Detta är förvånande eftersom det inte finns några möjligheter att ladda sidfotsektion ovanför vikområdet. Efter kontrollen förstod vi att detta beror på alternativet "Optimera CSS -leverans" aktiverat med WP Rocket -plugin. Det här alternativet genererar kritisk CSS och infogar det i rubriksektionen för att ta bort CSS som blockerar renderingen. Det kommer dock att leda till kumulativt layoutskiftproblem i många fall. Om du använder WP Rocket eller någon annan caching -plugin för att infoga CSS i rubriken, inaktivera det alternativet och kontrollera om det hjälper till att förbättra CLS -fördröjningen.

2 AdSense och andra annonsskript i ATF

Många utgivare använder Google AdSense eller ett annat annonsnätverk för att tjäna pengar på sitt onlineinnehåll. Du måste infoga en bit av JavaScript -annonskoden på din webbsida för att visa annonser. I allmänhet måste du infoga annonskoden ovanför fältet (ATF) för att öka annonsens synlighet och intäkter. Detta kommer dock att direkt påverka sidladdningshastigheten och skapa ett kumulativt layoutfel i Google PageSpeed ​​Insight (PSI) -verktyget.

Efter att du har laddat helt ovanför vikningsinnehållet kommer din annons att börja ladda och trycka ner innehållet.

Hur fixar jag kumulativt layoutskift i WordPress?

Layoutskift på grund av reklam

Det finns få alternativ för att åtgärda problemet. Det ena är att skjuta upp annonsskriptet i WordPress med hjälp av plugins som WP Rocket. Detta kommer dock att påverka din annonsvisning och klickfrekvens och därmed minska det totala resultatet.

Hur fixar jag kumulativt layoutskift i WordPress?

Fördröj reklam JavaScript -körning

Det andra alternativet är att använda annonser med fast bredd ovanför vikområdet som Google rekommenderar. Tyvärr klargör Google också att det inte är möjligt att använda fast bredd med responsiva eller flytande annonser.

Det är inte möjligt att reservera plats för dessa platser innan du begär annonsinnehåll, och flytande annonser orsakar alltid layoutskift. För att mildra effekterna av layoutskift när du arbetar med flytande annonsplatser rekommenderar vi följande: Använd endast vätskestorleken för platser nedanför vikningen.

Google

Därför kan du sammanfattningsvis inte åtgärda problemet om du inte tar bort den externa annonskoden från ATF -området. Detta gäller för alla andra tredjepartskoder som du har placerat i sidhuvudet på din webbplats.

3 Använd rätt bildmått

Detta liknar att använda fast med annonser. När du inte har bilddimensioner väntar webbläsare på att bilderna ska laddas och trycker på innehållet nedan vilket orsakar layoutskiftproblem. Lyckligtvis är detta inte ett problem eftersom WordPress automatiskt kommer att lägga till dimensioner på bilder när du laddar upp via postredigerare. Du måste dock manuellt lägga till höjd- och breddparametrar till img -taggen om du manuellt sätter in bilder med hjälp av blocket "Custom HTML", "Edit as HTML" -funktionen eller logotypen. Definiera dessutom fast bredd och höjd vid inbäddning av videor och iframes från tredje parts webbplatser.

Hur fixar jag kumulativt layoutskift i WordPress?

Bredd och höjd saknas för bilden

4 teckensnitt som fördröjer innehållsladdning

Varje webbplats använder teckensnitt. Detta kommer att skapa ett kumulativt layoutskiftproblem särskilt när du använder tjänster från tredje part som Google-teckensnitt. Eftersom Googles teckensnitt måste laddas från externa servrar kommer det att skapa liknande kumulativa layoutskiftproblem som annonskod. Du kan också se detta problem i PSI som "Se till att texten förblir synlig under webfontladdning" vilket indikerar att det finns en fördröjning i läsning av synligt innehåll.

Hur fixar jag kumulativt layoutskift i WordPress?

Teckensnittsproblem

  • Det effektiva sättet att lösa detta problem är att använda ett cacheminne -plugin för att förbinda och DNS -förhandshämta domäner som fonts.googleapis.com och fonts.gistatic.com -domän. Detta hjälper dig att påskynda laddningen av teckensnitt genom att föransluta Googles teckensnittsserver. SG Optimizer, WP Rocket (automatisk) och många andra plugins erbjuder denna funktion som du kan använda för detta ändamål. Dessutom kan du begränsa antalet teckensnittsfamiljer och vikter minska storleken på nedladdningsfilen.

Hur fixar jag kumulativt layoutskift i WordPress?

SG Optimizer Web Fonts Optimization

  • Ett annat alternativ är att använda systemteckensnitt eller vara värd för teckensnittsfilerna på din server. Till exempel kan teman som GeneratePress och Astra välja systemteckensnitt för din webbplats.
  • I vilket fall som helst, se till att förinläsa teckensnitt för att eliminera förladdningsnyckelbegäran, vilket också kan orsaka kumulativ layoutförskjutningsfördröjning.

5 teckensnittsikoner i menyn och ATF

Många WordPress-teman använder teckensnittsikoner i navigeringsområdet för att visa undermenyalternativ. I allmänhet ingår dessa ikoner från tredje parts webbplatser som typsnittet awesome eller icomoon. Detta kommer att skapa liknande problem som typsnitt och öka kumulativ layoutväxlingstid. Teman som GeneratePress låter dig välja SVG -ikoner istället för teckensnitt för navigeringsmenyn. På samma sätt kan du på Astra -tema inaktivera laddning av teckensnittsbiblioteket med en anpassad funktion. På så sätt kan du förbättra det kumulativa layoutskiftproblemet i WordPress. Du har dock inget annat val än att inaktivera undermenyalternativ i de flesta andra teman vilket inte är en bra lösning.

Webbmästare missförstår PSI -varningen om "Uppskjuta bilder utanför skärmen". Den här varningen inträffar när du inte laddar ner bilder som är tillgängliga under BTF -innehållet. Men om du använder ett plugin i WordPress, alla bilder med HTML

För att minska CLS -tiden i PSI -verktyget måste du utesluta logotypen från lat laddning. Lösningen beror på den plugin du använder för att ladda dina bilder lat. Till exempel i WP Rocket, gå till avsnittet "Media> LazyLoad" och ange logotypnamn eller URL för att utesluta från lat laddning.

Hur fixar jag kumulativt layoutskift i WordPress?

Uteslut logotyp från Lazy Loading

7 Lazy Loading Image Sliders i ATF

I likhet med bildlogotypen kommer du att se hög kumulativ layoutskiftstid när du har bildreglage ovanför vikområdet. Du kan utesluta reglagebilderna från lat laddning och testa det hjälper till att minska CLS -tiden.

Relaterat: 25 SEO -tips för att ranka din WordPress -webbplats.

8 Render blockerar JavaScript som jQuery

Sista ämnet är det populära renderingsblockerande JavaScript på grund av jQuery -baserade teman. Faktum är att WordPress också innehåller jQuery som en del av wp-includes-mappen. Du kan skjuta upp jQuery och andra renderingsblockerande skript på din sida med hjälp av ett cacheminne som W3 Total Cache. Se dock till att testa din webbplats noggrant för att undvika trasiga layouter.

Validerar fix i Google Search Console

När du har åtgärdat problemet måste du skicka in dina valideringar till Google Search Console -kontot. Du kan gå tillbaka till avsnittet "Core Web Vitals" och skicka valideringar för hela webbplatsen.

Hur fixar jag kumulativt layoutskift i WordPress?

Validerar CLS -problem i Google Search Console

Det tar upp till 28 dagar för Google att kontrollera CLS -problemet på din webbplats och visa motsvarande resultat i Search Console -kontot.

Slutsats

Som du kan se är den främsta anledningen till det kumulativa layoutskiftfelet i WordPress att placera renderingsblockerande skript ovanför innehållet i vikningsområdet. Det kan vara reklamkoder, jQuery, typsnitt, ikoner eller andra saker. Lösningen för att övervinna detta problem är att använda enkla minimalistiska teman som GeneratePress eller Astra. Å andra sidan kan du använda caching -plugins för att föransluta och kombinera teckensnittsfiler för att minska den kumulativa layoutskifttiden.

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterarFler detaljer