Elrendezés összmozgása (Cumulative Layout Shift, CLS)

A Google Search Console egyik menüpontja az Alapvető webes vitals-mutatók, itt különféle hibajelzéseket kaphatunk a honlapunkkal kapcsolatban. Az egyik a címben szereplő CLS-probléma.

Ennek a problémának a lényege nagyon röviden az, hogy miközben az oldal betöltődik, addig egy-egy komponens pozíciója időközben megváltozik. Például egy feljebb lévő kép lassabban töltődik be, betöltődés előtt még nincs meghatározva a magassága, majd betöltődés után minden utána lévő komponenst lejjebb tol. Vagy egy komponenst JavaScript hoz létre onReady eseményre és az tolja le az alatta lévő tartalmakat.

Talán érdemes még megemlíteni a WebFont-okat is! Amikor a betűkészlet betöltődése előtt és után más méretű a szöveg, akkor is keletkezhet tartalom eltolodás. Sitebuild során érdemes erre majd egy kicsit külön is odafigyelni! Okoz-e ez gondot? Felépíthetőek-e másként a problémás szakaszok?

A nagymértékű pozícióváltozás eredménye lehet akár félrekattintás is. Ha gyorsan szeretnénk kattintani, akkor végül nem arra az elemre kattintunk, mint amire eredetileg szerettünk volna.

A legtöbb esetben mindez egyszerűen sitebuild-del javítható! Oldjuk meg, hogy vizuálisan stabil legyen az oldal! Egyelőre a Google még nem bünteti ezt a problémát, de ígéretük szerint mindez idővel rangsorolási tényező lesz és befolyásolni fogja a találati listát is.

A CLS-sel kapcsolatban részletesen olvashatsz még itt: https://web.dev/cls/ illetve itt: https://web.dev/optimize-cls/

Továbbá a PageSpeed Insights segítségével a CLS értékét is tudod tesztelni: https://developers.google.com/speed/pagespeed/insights/

Összeségében én örülök ezeknek a webes vitális mutatóknak! Remélem, hogy idővel valóban egyre jobb és jobb weboldalaink lesznek!