CLS-probléma mobilon: miért ugrál az oldal betöltéskor, és hogyan javítsd?
A CLS (Cumulative Layout Shift) azt méri, mennyire mozdulnak el váratlanul a már látható elemek. Jó érték 0,1 vagy kevesebb a látogatások legalább 75%-ánál; 0,25 felett gyenge. A leggyakoribb ok, hogy a képnek, videónak, hirdetésnek, beágyazásnak vagy későn betöltődő betűtípusnak nincs előre lefoglalt helye. Add meg a képek méretét vagy képarányát, foglalj helyet a dinamikus blokkoknak, és ne szúrj be új tartalmat a már olvasott rész fölé felhasználói művelet nélkül.
Mit jelent ez az üzletednek?
Súlyosság: közepes. A hirtelen mozgás közvetlenül rontja az élményt, félrekattintást okozhat, és a Core Web Vitals jelentésben is megjelenik.
Mobilon a látogató gyakran már a kapcsolatfelvétel vagy vásárlás gombjára készül, amikor egy későn megérkező kép, süti sáv vagy betűtípus lejjebb tolja azt. Ez frusztráló, bizalmat ront és akár rossz gombra kattintást is okozhat.
A leggyakoribb okok – és hogyan ismered fel őket
- 1
A képeknek és videóknak nincs lefoglalt helyük
A böngésző csak letöltés után tudja a valódi méretet, ezért a tartalom a kép helyére ugrik.
Így ellenőrizd: A HTML img elemein van width és height, vagy a CSS-ben stabil aspect-ratio?
- 2
Későn érkező beágyazások és widgetek
Térkép, videó, chat, értékelési doboz vagy hirdetés betöltés után nő meg, és arrébb tolja az oldalt.
Így ellenőrizd: A PageSpeed vagy Chrome Performance panel megmutatja, melyik elem okozta a layout shiftet.
- 3
Betűtípuscsere
A tartalék betűtípus más szélességű, ezért a saját webfont megérkezésekor a sorok átrendeződnek.
Így ellenőrizd: Betöltéskor szemmel láthatóan változik a címsor vagy a gomb feliratának tördelése?
- 4
Későn beszúrt banner vagy űrlap
Süti figyelmeztetés, akciós sáv vagy validációs üzenet a dokumentumfolyamban jelenik meg a már látható tartalom fölött.
Így ellenőrizd: A hibajelzés vagy banner megjelenésekor minden alatta lévő elem lejjebb csúszik?
Javítás lépésről lépésre
- 1. lépés
Mérd meg, hol történik az elmozdulás
Nézd meg a PageSpeed Insights diagnosztikáját és a Search Console valódi adatait. Chrome DevTools Performance felvételben a Layout Shift események megmutatják az érintett elemet.
- 2. lépés
Adj méretet minden vizuális elemnek
A képeknél add meg a valódi width és height értéket, reszponzív keretnél pedig használj képarányt. Így a böngésző a kép letöltése előtt lefoglalja a helyet.
- 3. lépés
Foglalj helyet a beágyazásoknak
A térkép, videó, hirdetés, értékelési doboz és chat köré tegyél előre meghatározott magasságú vagy képarányos konténert. Betöltés alatt használj hasonló méretű placeholdert.
- 4. lépés
Stabilizáld a betűtípusokat
Csökkentsd a betűtípus-változatok számát, használj gyors WOFF2 fájlokat és font-display: swap beállítást. A fontos betűtípusnál méretkompatibilis fallback vagy font-metrika felülírás is csökkentheti az ugrást.
- 5. lépés
Ne szúrj be új tartalmat a látogató elé
Akciós sávnak, hibaszövegnek és beleegyezési felületnek legyen lefoglalt helye, vagy jelenjen meg rétegként, ha ez használhatóbb. Kivétel a közvetlen felhasználói kattintásra adott válasz, amely természetes mozgást okozhat.
- 6. lépés
Teszteld valódi mobilon is
Lassabb hálózaton és hideg cache-sel nézd meg az első betöltést. A laboreredmény gyors visszajelzés, a Search Console pedig néhány hét alatt a valódi látogatói változást mutatja.
Tippek platformonként
WordPress
A képek méretattribútumait ne távolítsa el az oldalépítő vagy optimalizáló bővítmény. Térkép- és videóbeágyazásnál használj fix arányú előnézeti keretet.
Shopify / webshop
A termékképekhez tarts egységes képarányt, és a termékváltozat váltásakor foglalj fix helyet a galériának. A külső értékelési és upsell appokat is mérd be.
Next.js
A next/image komponensnél adj ismert width és height értéket vagy stabil fill konténert. Dinamikusan betöltött komponenshez adj méretazonos loading állapotot.
Gyakori hibák javítás közben
- Képet csak CSS háttérként használni méretfoglalás nélkül.
- A süti sávot vagy hibajelzést betöltés után a tartalom tetejére beszúrni.
- Csak asztali gépen ellenőrizni, gyors saját hálózaton.
- A CLS-t összekeverni azzal, amikor a felhasználó kattintására nyílik meg egy részlet.
Mikor kérj segítséget?
Ha a CLS-t harmadik fél scriptje, hirdetési rendszer vagy összetett oldalépítő okozza, a megoldás komponensenkénti mérés és célzott átalakítás. Auditban meg tudjuk nevezni a konkrét elmozduló elemeket és a javítás sorrendjét.
Gyakori kérdések
Mi számít jó CLS értéknek?
A cél 0,1 vagy kevesebb a látogatások 75%-ánál. 0,1 és 0,25 között javítandó, 0,25 felett gyenge az érték.
A cookie banner mindig rontja a CLS-t?
Nem feltétlenül. Ha előre foglalsz neki helyet, vagy megfelelően pozicionált rétegként jelenik meg, nem kell eltolnia az oldal többi elemét.
Miért más a PageSpeed és a Search Console értéke?
A PageSpeed laboradatot is mutat szimulált környezetből, a Search Console pedig valódi látogatók 28 napos adatait. Mindkettő hasznos, de más helyzetet mér.