A CLS és az INP olyan Core Web Vitals mutatók, amelyek a felhasználói élmény más oldalát mérik, mint a sebesség.
A CLS a vizuális stabilitást méri. Elrendezés-eltolódás akkor történik, ha a tartalom elmozdul a betöltés után. A felhasználó cikket olvas. Betöltődik egy hirdetés. A cikk lejjebb csúszik. A felhasználó elveszíti a helyét. A CLS ezt a bosszúságot számszerűsíti.
Az INP a reakcióidőt méri. A felhasználó rákattint egy gombra. A rendszer válaszol. Mennyi idő a válasz? Az INP a reakció késését számszerűsíti.
A Cumulative Layout Shift (CLS) részletesen
Mi okozza a CLS-t
Betöltődnek a hirdetések, és helyet foglalnak. Betöltődnek a beágyazott elemek, és helyet foglalnak. A képek magasság megadása nélkül töltődnek be. A betűtípusok cserélődnek, és a szöveg újratördelődik. A tartalom JavaScriptből érkezik az oldalba.
Valós példa
Az oldal elrendezése stabil. A felhasználó olvasni kezd. Betöltődik egy hirdetés. A hirdetés 300 pixel magas. A hirdetés alatti tartalom 300 pixellel lejjebb csúszik. A felhasználó elveszíti a helyét. Bosszantó.
Mérés
A CLS a látótér eltolódott részének arányaként mérhető. Ha a látótér 1000 pixel magas, és a tartalom 300 pixellel mozdul el, a CLS 0,3. A cél 0,1 alatt van (a 10 százalékos eltolódás elfogadható, a 30 százalékos nem).
A CLS optimalizálása
Első stratégia: foglalj helyet
Foglalj helyet a hirdetéseknek, a beágyazott elemeknek és a képeknek. Mondd meg az elrendezésnek: a hirdetés 300 pixelt fog elfoglalni. Foglalj helyet. A hirdetés a lefoglalt helyre töltődik be. Nincs eltolódás.
Második stratégia: alulra szúrd be
Kerüld a tartalom beszúrását az oldal közepére. Szúrd be alulra (az alatta lévő tartalom már kigörgetett a látótérből). Vagy a lebegő fejlécbe (a felhasználó számít rá, hogy a fejléc változik).
Harmadik stratégia: kerüld a betűtípus-váltást
Kerüld a betűtípus cseréjét az oldal betöltése közben. A betűtípus cseréje újratördeli a szöveget. Az az összes szöveg elmozdul, amely ezt a betűtípust használja. A `font-display: optional` vagy a `font-display: swap` használatával csökkentheted az eltolódást.
Negyedik stratégia: add meg a kép magasságát
Használj rögzített magasságot a képeknél. A kép betöltődik. A magasság meg van adva. A kép kitölti a lefoglalt helyet. Nincs eltolódás.
Valós példa: webshop termékoldalának CLS optimalizálása
Kiindulási CLS: 0,25 (gyenge).
Elemzés
A termékképek magasság megadása nélkül töltődnek be. A képek eltolják a tartalmat. Ez 0,10 CLS-t jelent. A termék alatti hirdetés az oldal betöltése után töltődik be. A hirdetés helyet foglal. A tartalom elmozdul. Ez 0,12 CLS-t jelent. A felhasználói vélemények API-ból töltődnek be. Beszúródnak az oldalba. A tartalom elmozdul. Ez 0,3 CLS-t jelent.
Optimalizálás
Add meg a kép magasságát a HTML-ben. A képek kitöltik a lefoglalt helyet. CLS-hozzájárulás: nulla. Foglalj helyet a hirdetésnek. A hirdetés a lefoglalt helyre töltődik be. CLS-hozzájárulás: nulla. A felhasználói véleményeket töltsd késleltetve a látható rész alatt. Ne szúrd be őket a látható részbe. CLS-hozzájárulás: nulla (az eltolódás a látótér alatt történik).
Új CLS: 0,05 (jó).
Az Interaction to Next Paint (INP) részletesen
Mit mér az INP
Az INP a reakcióidőt méri. A felhasználó rákattint egy gombra. A rendszer feldolgozza a kattintást. Frissíti az állapotot. Megjeleníti a változást. Kirajzolja a képernyőre. Az INP a kattintástól a vizuális frissítés első kirajzolásáig eltelt idő.
Valós példa
A felhasználó rákattint a Kosárba gombra. A rendszer ellenőrzi a készletet. Frissíti a kosár számlálóját. Kirajzolja az új számot a képernyőre. Ha az INP 100 ezredmásodperc, a felhasználó azonnal látja a kosár számlálójának frissülését. Ha az INP 1 másodperc, a számláló 1 másodperccel később frissül. Akadozónak érződik.
Mérés
Az INP ezredmásodpercben mérhető. A 200 ezredmásodperc alatti cél jó.
Az INP optimalizálása
Első stratégia: csökkentsd a JavaScript futási idejét
A hosszú JavaScript blokkolja a megjelenítést. Bontsd a hosszú feladatot kisebb feladatokra. Nehéz számításokhoz használj async, defer vagy Web Workert.
Második stratégia: optimalizáld az eseménykezelőket
Az eseménykezelők minimális munkát végezzenek. A nehéz munkát told át a háttérbe.
Harmadik stratégia: optimalizáld a CSS-t
A nehéz CSS késleltetheti a kirajzolást. Használj CSS containmentet, hogy megmondd a böngészőnek: ez az elem önálló, ne számolja újra az egész oldal stílusait, amikor ez az elem változik.
Negyedik stratégia: használj gyorsabb megjelenítési technikát
A CSS-frissítések gyorsabbak, mint a JavaScript DOM-frissítései. Használj CSS transformot a left/top pozícionálás helyett. Használj CSS opacityt a láthatóság váltása helyett.
Valós példa: űrlap-interakció reakcióideje
Kiindulási INP: 400 ezredmásodperc (gyenge).
Elemzés
Az űrlapnak van validáló JavaScriptje. A felhasználó gépel a mezőbe. A validálás lefut. A validálás szinkron. Blokkolja a beviteli mező frissítését. A beviteli mező addig nem frissül, amíg a validálás be nem fejeződik. Akadozónak érződik.
Optimalizálás
Told át a validálást a háttérbe (Web Worker vagy setTimeout). A beviteli mező azonnal frissül. A validálás a háttérben zajlik. Használj CSS containmentet az űrlapon. Mondd meg a böngészőnek: az űrlap önálló, ne számolja újra az egész oldal stílusait. Az animációhoz CSS transformot használj JavaScript-pozícionálás helyett.
Új INP: 150 ezredmásodperc (jó).
A CLS és az INP együtt
A CLS instabilnak érezteti az oldalt. Az INP akadozónak érezteti az oldalt. Együtt hatnak arra, hogyan érzékeli a felhasználó a minőséget.
Az az oldal, amelynek jó az LCP-je, de gyenge a CLS-e (gyors, de ugráló), bosszantó. A felhasználó a lassúságot okolja, pedig stabilitási probléma van.
Az az oldal, amelynek jó az LCP-je és a CLS-e, de gyenge az INP-je (gyors és stabil, de akadozó), elromlottnak érződik. A gombok nem reagálnak a kattintásokra.
Mindhárom Core Web Vitals mutató számít a jó felhasználói élményhez.
Gyakran ismételt kérdések
Hogyan derítjük fel a CLS-problémákat?
Használd a Chrome DevToolst. Kattints jobb gombbal az oldalra. Vizsgálat. Performance fül. Rögzítsd az oldalbetöltést. A DevTools megmutatja a betöltés közbeni elrendezés-eltolódásokat. Nézd meg a PageSpeed Insightsban is. A Lighthouse azonosítja a CLS-problémákat. A Search Console Core Web Vitals jelentésében is megnézheted. Megmutatja a gyenge CLS-ű oldalakat. A WEMASY weboldalépítőjével ezt közvetlenül a saját weboldaladon beállíthatod.
Minden hirdetésnek foglaljunk helyet, vagy csak a kritikusaknak?
Foglalj helyet a látható részen lévő hirdetéseknek (amelyek azonnal betöltődnek). Ne foglalj helyet a látható rész alatti hirdetéseknek (amelyek görgetés után töltődnek be). A lenti hirdetések eltolhatják a lenti tartalmat, de a felhasználó nem látja az eltolódást.
Hogyan optimalizáljuk az INP-t összetett, sok JavaScriptet használó alkalmazásokban?
Told át a nehéz számítást Web Workerekbe. A Web Worker külön szálon fut. Nem blokkolja a fő szálat. A fő szál reagál a felhasználói bevitelre. Használj olyan keretrendszereket is, amelyek a nehéz számítást addig halasztják, amíg az interakció kezelése megtörtént.
Mennyire fontos a CLS mobilon az asztalihoz képest?
Mobilon fontosabb. A mobil képernyő kisebb. Az elrendezés-eltolódások feltűnőbbek. A mobilos felhasználó nagyobb eséllyel veszi észre az eltolódást, és bosszankodik. A CLS optimalizálását mobilon kezdd.
Pótolhatja a jó CLS és INP a gyenge LCP-t?
Nem. Ha az oldal 5 másodperc alatt töltődik be, a felhasználó már bosszús, mielőtt a CLS és az INP számítana. Elmegy, mielőtt bármit megérintene. A gyors betöltés (jó LCP) a jó élmény előfeltétele. A jó CLS és INP a gyors oldal élményét javítja, nem a lassúét.
Hogyan mérjük és követjük a CLS és az INP javulását?
Kiindulás: mérd meg az optimalizálás előtt. Végezd el az optimalizálást. Új mérés: mérd meg utána. A Web Vitals könyvtárral (a Core Web Vitalst mérő JavaScript könyvtár) követheted a valós felhasználói adatokat. Állíts be riasztásokat: ha a CLS vagy az INP romlik, a riasztás értesíti a csapatot.