Fix CLS-problemfejl i Core Web Vitals i GSC

Med introduktionen af ​​Core Web Vitals i GSC,Google gjorde det klart, at de vil betragte Web Vitals for sider som en placeringsfaktor. Dette fungerer sammen med Googles andre placeringsfaktorer som sidehastighed, HTTPS, mobilvenlighed og sikker browsing. Der er endnu ikke frigivet mange detaljer, men Google Search Console er begyndt at vise rapporter til Core Web Vitals.

Den består af tre metrics til webpræstation;

1. LCP: Største tilfredsstillende maling
2. FID: Første inputforsinkelse
3. CLS: Kumulativ layoutskift

Der er ikke meget information lige nu om, hvordan du kan løse disse problemer, men der er nogle af de fremgangsmåder, der kan hjælpe dig med at løse Cumulative Layout Shift (CLS) 'Mere end' til dine websider.

↑ Hvad er kumulativ layoutskift?

Det er en sidemetrik, der rapporterer sidestabilitet.Kort sagt, når du indlæser en webside, begynder at læse eller udføre handlinger, og hvis indholdet eller elementerne på websiden pludselig springer eller ændres, kan det medføre problemer under hensyntagen til brugernes oplevelse.

Eksemplet ovenfor viser, at en pludselig belastning af elementer over ordrebekræftelsesfeltet forårsagede et utilsigtet klik. CLS er gennemsnit af alle sådanne skift på sideindhold.

↑ Hvad forårsager høj CLS?

Der kan være en række problemer, der kan forårsage højere CLS, men jeg vil påpege nogle af de væsentligste årsager;

• Lazy Load Content Reflow
• Billeder uden dimensioner
• Annonceinjektion
• Indlejringer og iframes uden dimensioner
• Et indhold, der venter på at indlæses på grund af langsom respons

↑ Lazy Load Content Reflow

Lazy Load er et vidunderligt plugin, der indlæserkun billeder, når en side rulles, og indholdet kommer i visningen. Men mange gange får dette indholdet til at skifte op og ned og forårsage reflow, hvor indholdet under eller omkring billedet skubbes for at give plads til det nyindlæste billede.

↑ Annonceinjektion

Annoncer er en af ​​de største bidragydere til layoutskift på nettet ved at skubbe synligt indhold, du ser, ned på siden. Det gør det ved at indlæse annonceenhederne, efter at siden er indlæst, hvilket forårsager betydelig Jank.

↑ Element venter på at indlæses på grund af langsom reaktion

Nogle gange på grund af langsom HTTP-reaktion kan få elementer tage noget tid at indlæse, hvilket får indhold til at skifte op eller ned.

↑ Hvordan fikser man høj CLS-fejl i Web Vitals?

Hvis billederne tager tid at indlæse, og indholdet tager plads til billederne. Derefter når indholdet indlæses, flyttes det indholdet ned, hvilket forårsager ustabilitet i layoutet.

For billeder, der forårsager indholdsforskydning (Jank),reserver den nødvendige plads med CSS-billedformater. Denne tilgang sikrer, at browseren kan tildele den korrekte plads i dokumentet, mens mediet indlæses. Du kan læs dette indlæg til Jank Free Image Load.

Lazy-indlæste billeder kan også forårsage problemet, de kan skabe et stort rum, inden de optager billedpladsen. Hvis du står over for Content Reflow-problemet på grund af billede Lazy Loading, end du kan læs denne artikel for løsningerne.

Hvis du placerer annoncer i indholdet, skal du sørge for, at skift erelimineres ved at reservere slotstørrelsen. Brug pladsholder, hvis der ikke returneres nogen annonce i stedet for at skjule det reserverede rum. Hvis du bruger WordPress end et godt annonce-plugin som Ad-Inserter, sørger det for at holde den rigtige plads til annoncerne, så du ikke behøver at bekymre dig.

Undgå dynamisk indhold, dynamisk indhold er detsom indsættes efter indlæsning af siden. Især indholdet over folden, for eksempel nyhedsbreve, tilmeldinger, relaterede indlæg i indholdet DOM. Undlad at indlæse denne type indhold over folden, hvis det er muligt, prøv at bruge pop op-boksen.

Langsomt HTTP-svar fra serveren kunne ogsåforårsage ustabilitet i indhold. Hvis du bruger et CDN, og det tager høje millisekunder at indlæse indrykkede elementer, og dette får indholdet til at springe, skal du enten oprette et mellemrum i DOM eller synkronisere belastningen med andre elementer.

Der er også andre årsager til høj CLS, du kan finde en detaljeret guide til optimering af CLS på Web.Dev officielle side

Konklusion: Indlægget indeholder ingen tekniske eller koderelaterede løsninger, men giver et overblik over, hvad der præcist forårsager problemet, og hvordan kan du nærme dig at løse problemet.