Cumulative Layout Shift: com ajustar - Hosta Blanca Web Hosting

Cumulative Layout Shift (CLS) és una mètrica de rendiment crítica que mesura la quantitat de contingut que es mou o es mou en una pàgina web a mesura que es carrega. Aquest moviment pot ser frustrant per als usuaris, ja que pot fer que facin clic accidentalment sobre els elements equivocats o que perdin el seu lloc a la pàgina. Google també ha anunciat recentment que CLS es convertirà en un factor de classificació el maig de 2021, cosa que fa que sigui més important que mai que els propietaris de llocs web optimitzin les seves pàgines per a aquesta mètrica. En aquest article, parlarem de què és CLS, com afecta l'experiència de l'usuari i el SEO, i les millors maneres d'ajustar CLS per millorar el rendiment del vostre lloc web.

Què és Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) és una mètrica que mesura quant canvia el disseny d'una pàgina a mesura que es carrega. Aquest canvi pot ser causat per diversos factors, com ara imatges i vídeos que es carreguen tard o elements que es redimensionen dinàmicament a mesura que es carrega la pàgina. CLS es calcula multiplicant la distància que s'ha mogut un element de disseny per la seva mida. A continuació, suma aquests valors per a tots els canvis de disseny que es produeixen durant la càrrega de la pàgina. El resultat és una puntuació entre 0 i 1, amb una puntuació més baixa indicant menys canvi de disseny.

Per què és important CLS?

Cumulative Layout Shift és una mètrica important per dos motius principals: l'experiència de l'usuari i el SEO. Des del punt de vista de l'experiència de l'usuari, una pàgina amb un CLS elevat pot ser frustrant i confús per als usuaris. Quan els elements de la pàgina es mouen o es desplacen de manera inesperada, els usuaris poden perdre el seu lloc a la pàgina o fer clic accidentalment als elements equivocats. Això pot provocar una mala experiència d'usuari i fer que els usuaris abandonin el vostre lloc.

Des del punt de vista del SEO, Google ha anunciat que CLS es convertirà en un factor de classificació el maig de 2021. Això vol dir que les pàgines amb una puntuació CLS alta poden ser penalitzades en els rànquings de cerca, mentre que les pàgines amb una puntuació CLS baixa poden veure un augment de la classificació. Per tant, l'optimització de CLS és crucial si voleu millorar la visibilitat del vostre lloc web en el cercador.

Com mesurar Cumulative Layout Shift?

Per mesurar Cumulative Layout Shift al vostre lloc web, podeu utilitzar l'eina PageSpeed Insights de Google o Chrome DevTools. Ambdues eines us proporcionaran una puntuació entre 0 i 1, així com un desglossament de les causes dels canvis de disseny que es van produir durant la càrrega de la pàgina. També podeu utilitzar una eina com WebPageTest per mesurar CLS i altres mètriques de rendiment del vostre lloc web.

Com ajustar CLS?

Aquests són alguns passos que podeu seguir per ajustar el vostre CLS:

Optimitzar imatges. Les imatges grans o no optimitzades poden provocar canvis de disseny a mesura que es carreguen. Assegureu-vos que les imatges tinguin la mida i la compressió adequada per reduir el seu impacte en CLS.
Utilitzeu les relacions d'aspecte per als elements multimèdia. Quan utilitzeu una relació d'aspecte per a una imatge o un vídeo, el navegador sap quant d'espai ocuparà abans que es carregui. Això pot ajudar a prevenir els canvis de disseny causats pels elements multimèdia.
Reserveu espai per als anuncis i les insercions: els anuncis i les insercions sovint es carreguen de manera asíncrona, cosa que pot provocar canvis en el disseny. Reservant-hi espai al vostre disseny, podeu evitar aquests canvis.
Eviteu contingut injectat dinàmicament. El contingut que s'injecta a la pàgina després de carregar-se, com ara finestres emergents o quadres de xat, pot provocar canvis en el disseny. Intenta evitar utilitzar aquest tipus de contingut. Assegureu-vos que s'ha carregat d'una manera que no afecti el disseny.
Carregueu els tipus de lletra de manera asíncrona. Si utilitzeu tipus de lletra personalitzats al vostre lloc web, carregar-los de manera asíncrona pot ajudar a evitar els canvis de disseny causats per la càrrega de tipus de lletra.
Utilitzeu un precarregador. Un precarregador és una pantalla que apareix mentre es carrega el vostre lloc web. Pot ajudar a prevenir els canvis de disseny donant a l'usuari alguna cosa per mirar mentre es carrega la pàgina.

Si seguiu aquests passos, podeu ajudar a reduir l'impacte dels canvis de disseny al vostre lloc web i millorar l'experiència de l'usuari. Us recomanem Hosta Blanca Allotjament compartit or VPS servidor per als vostres projectes web.