Hogyan javíthatom a gyenge Core Web Vitals értékeket?

Először azt kell kideríteni, melyik mutató hibás, melyik eszközön és az oldalak melyik csoportjánál; a Search Console Core Web Vitals jelentése mindhármat megmutatja valós Chrome-látogatások alapján. Ezután az adott mutató mögötti okot kell javítani: LCP esetén azt, milyen gyorsan érkezik meg a fő kép vagy szöveg; INP esetén a válaszokat késleltető hosszú JavaScript-feladatokat; CLS esetén azt a tartalmat, amely előre lefoglalt hely nélkül jelenik meg. A terepi adatok az elmúlt 28 napot fedik le, ezért a javítás hatását egy hónap alatt érdemes megítélni.

1. lépés: derítse ki, mi a hibás

1. Nyissa meg a Search Console Core Web Vitals jelentését, és válassza a Mobil vagy az Asztali nézetet; a kettőt külön értékeli a rendszer.
2. Nyisson meg egy felsorolt problémát, például egy mobilos LCP-problémát, hogy lássa az érintett URL-csoportot és a példa URL-eket. A teljes csoport egyetlen állapotot kap, amelyet a legrosszabb mutatója határoz meg.
3. Futtasson le egy példa URL-t a PageSpeed Insightsban, hogy az oldal terepi adatait egy hibakereséshez használható laborteszt mellett láthassa.

A Lighthouse-hoz hasonló laboreszközök nem tudják mérni az INP-t, mert senki sem használja az oldalt, ezért helyette a Total Blocking Time értéket jelentik. Az INP esetében a valós felhasználói mérés a megbízható útmutató.

Hogyan javítsuk a lassú LCP-t

A web.dev LCP-optimalizálási útmutatója az LCP-t négy részre bontja: a szerver válaszideje, a fő erőforrás betöltésének megkezdése előtti késleltetés, a letöltési idő és a megjelenítés előtti késleltetés. Először a legnagyobb részen érdemes dolgozni:

• Tegye felderíthetővé az LCP-képet a kezdeti HTML-ben ahelyett, hogy JavaScripttel vagy CSS-sel illesztené be, és adja meg neki a fetchpriority="high" attribútumot.
• Soha ne töltse késleltetve az LCP-képet.
• Kisebb méretben szolgálja ki: megfelelő méretekkel, korszerű formátumban, tömörítve, és a látogatókhoz közeli CDN-ről.
• Távolítsa el a megjelenítést blokkoló erőforrásokat: kisebb stíluslapokat használjon, ne legyenek szinkron szkriptek a <head> részben, és a fő tartalomhoz használjon szerveroldali renderelést.
• Gyorsítsa a szerver válaszidejét: csökkentse az átirányításokat, és tegye lehetővé az oldalak gyorsítótárazását a hálózat peremén.

Hogyan javítsuk a gyenge INP-t

Az INP-optimalizálási útmutató minden interakciót beviteli késleltetésre, feldolgozási időre és megjelenítési késleltetésre bont:

• Beviteli késleltetés: csökkentse az oldalbetöltés alatt futó JavaScript mennyiségét, hogy a fő szál szabad legyen, amikor valaki rákoppint.
• Feldolgozási idő: bontsa kisebb feladatokra a hosszú eseménykezelőket, és adja át a vezérlést a fő szálnak: előbb a látható frissítést végezze el, a többit halassza későbbre.
• Megjelenítési késleltetés: tartsa kicsi a DOM-ot, kerülje a kényszerített elrendezésszámítást (ne olvasson stílusokat közvetlenül a módosításuk után), és hosszú oldalakon használja a content-visibility tulajdonságot.

Hogyan csökkentsük a magas CLS-t

A CLS-optimalizálási útmutató felsorolja a szokásos okozókat és a hozzájuk tartozó javításokat:

• Méret nélküli képek és videók: adjon meg width és height attribútumot, vagy CSS aspect-ratio tulajdonságot.
• Hirdetések, beágyazott elemek és iframe-ek: a betöltésük előtt foglalja le a helyüket az elrendezésben.
• A meglévő tartalom fölé beszúrt tartalom: használjon megfelelő méretű helyőrzőt, vagy az új tartalmat annak a szakasznak az alá szúrja be, amelyet a látogató éppen olvas.
• Webfontok: az érdemi betűtípusokat töltse be előre, hogy a szöveg ne tördelődjön újra későn.
• Animációk: a top vagy left típusú tulajdonságok helyett a transform értéket animálja.

Azok az oldalak, amelyek használhatják a böngésző előre-hátra gyorsítótárát (back/forward cache), a visszatérő látogatóknál az elrendezésugrásokat is elkerülik.

3. lépés: ellenőrizze a javítást

Telepítse a változtatást, majd nyissa meg a problémát a Core Web Vitals jelentésben, és indítsa el az ellenőrzést. A Google 28 napon át figyeli a csoportot; az ellenőrzés nem vált ki újracrawlolást, és nem gyorsít semmit, csak azt követi nyomon, hogy a probléma megszűnt-e. Mivel a terepi adatok 28 napos időszakot ölelnek fel, a jelentés fokozatos javulására számítson. Az egyes mutatók jelentéséről lásd a Mit jelent az LCP, az INP és a CLS? című cikket.

Hogyan segít az AutoPSEO

Az AutoPSEO Core Web Vitals jelentése körülbelül hat hónapnyi, heti bontású Chrome UX Report adatot ábrázol az Ön webhelyére vagy egyetlen URL-re, telefonon, asztali gépen vagy tableten, így láthatja, melyik héten lépett életbe egy javítás, vagy melyik héten rontott a helyzeten egy kiadás, anélkül, hogy meg kellene várnia a következő 28 napos időszak végét.