Jak poprawić CLS na stronie i dlaczego warto to robić?

CLS czyli Cumulative Layout Shift to jeden ze wskaźników Core Web Vitals, który mierzy stabilność wizualną strony podczas jej otwierania. Ten wskaźnik wpływa na ocenę strony na ocenę serwisu w narzędziu Google PageSpeed Insight. Zalecana przez Google wartość tego wskaźnika to 0,1 lub mniej.

Za co odpowiada CLS?

Mówiąc mniej technicznie chodzi o to, żeby optymalizując stronę pod CLS powinniśmy starać się, aby podczas wczytywania strony nie pojawiało się „przeskakiwanie” tekstu po wczytaniu grafiki nad nią. Żeby nie doprowadzać do takich sytuacji wystarczy określić wymiary danego obrazu w HTML przy elemencie . Zobaczcie jak wygląda to w praktyce, jak znaleźć problematyczne grafiki i je poprawić.

Jak znaleźć problematyczne strony?

O problematycznych stronach da nam znać Google Search Console (Dane o problemach z CLS zobaczymu tutaj Podstawowe wskaźniki internetowe > Urządzenie mobilne) lub sprawdzając pojedyncze linki w PageSpeed Insights.

Co zrobić gdy już wiemy, gdzie występują problemy z CLS?

W Google PageSpeed Insights otrzymamy informacje, które grafiki nie mają określonych atrybutów width oraz height

Jeśli chciałbyś, aby Twoja strona otwierała się szybko i wszystkie jej wskaźniki były na właściwym poziomie, to zachęcam do kontaktu.