CLS (Cumulative Layout Shift)

A CLS (Cumulative Layout Shift) a Core Web Vitals harmadik fő metrikája — méri az oldal "vizuális stabilitását". Egy magas CLS azt jelenti, hogy az oldal betöltése közben elemek ugrálnak (új banner megjelenik, kép lassan tölt be és elmozdítja a szöveget, late-rendered ad), ami zavaró felhasználói élményt ad.

CLS küszöbök 2026-ban: < 0.1 (Good), 0.1-0.25 (Needs Improvement), > 0.25 (Poor). A magyar weboldalak átlaga: 0.18 — "Needs Improvement" tartomány. CLS pontozása: az elmozdult elemek aránya × az elmozdulás mértéke (viewport %-ban).

CLS-rontó tényezők: (1) Image-ek width/height attribútum nélkül (a böngésző nem foglal helyet, és amikor betölt, lehet ugrik a layout), (2) Web font loading (FOIT/FOUT — a betűcsere elmozdíthatja a szöveget), (3) Late-rendered banner/popup, (4) Asynchronously loaded ads, (5) Dynamically injected content JavaScript-tel.

CLS optimalizálási technikák: (1) Image-ekre KÖTELEZŐ width és height attribute (vagy CSS aspect-ratio), (2) Font preload + font-display: swap + fallback font letterspacing matching, (3) Reservált hely banner/popup számára (skeleton loader), (4) Ad placeholder fix méretű, (5) Avoid inserting content above existing content.

Mire jó: a CLS közvetlen SEO ranking faktor és UX-mérőszám. A jól mérhető hatás: egy "Poor" CLS-jű oldal átlag 30-40%-kal magasabb bounce rate-et generál mint egy "Good" CLS-jű. Konverziós ráta is csökken.