Miért nem vár tovább a Google (és a látogató)?

O

A modern digitális világban a türelem nem erény, hanem hiánycikk. Ha egy weboldal nem tölt be három másodperc alatt, a látogatók jelentős része egyszerűen visszafordul. A Google 2021-ben vezette be a Core Web Vitals (Alapvető Webes Mutatók) algoritmust, amely a felhasználói élményt közvetlen rangsorolási tényezővé emelte.

Sokan gondolják, hogy a technikai SEO egy véget nem érő küzdelem a kódokkal, de a valóságban néhány célzott beavatkozással látványos eredményeket érhetünk el. Ebben az útmutatóban megmutatom, hogyan javíthatja webhelye mutatóit anélkül, hogy hetekre elmerülne a fejlesztésben. A célunk nem csupán a zöld jelzés a Search Console-ban, hanem egy villámgyors, konverzióra kész weboldal felépítése.

Mik azok a Core Web Vitals mutatók?

Mielőtt a javításokba fognánk, értenünk kell a három pillért, amelyeken a Google méri az oldalunkat.

1. LCP javítása: A legnagyobb tartalom gyorsítása

Az LCP leggyakrabban egy nagy hős kép (hero image) vagy egy hangsúlyos szövegblokk. Ha ez lassan jelenik meg, a felhasználó azt érzi, az oldal “akad”.

Gyors tippek az LCP-hez:

• Képoptimalizálás: Használjon modern formátumokat, mint a WebP vagy az AVIF. Ezek 30-50%-kal kisebbek, mint a hagyományos JPEG-ek.
• Fetch Priority: Jelölje meg a legfontosabb képét a fetchpriority="high" attribútummal. Ez jelzi a böngészőnek, hogy ezt a fájlt vegye előre a sorban.
• Renderelést blokkoló erőforrások: A CSS és JavaScript fájlok gyakran megállítják az oldal kirajzolását. Használjon “defer” vagy “async” jelzőket a scripteknél.

2. CLS javítása: Szüntesse meg az idegesítő ugrálásokat

Ismerős az érzés, amikor éppen rákattintana egy gombra, de az oldal hirtelen lejjebb ugrik egy betöltődő reklám miatt? Ez a rossz CLS mintapéldája.

Hogyan stabilizálja az oldalt?

• Méretek megadása: Mindig adjon meg width és height attribútumokat a képekhez és videókhoz. Így a böngésző előre lefoglalja a helyet, és nem fog “ugrani” a tartalom.
• Helyőrzők (Placeholders): A dinamikusan betöltődő elemekhez (pl. hirdetések, widgetek) használjon fix magasságú konténereket.
• Betűtípusok: A lassú webfontok miatt a szöveg villanhat vagy eltolódhat. Használja a font-display: swap; CSS szabályt, hogy a rendszer betűtípusa azonnal megjelenjen.

3. INP: Az interaktivitás új királya

2024 márciusától az INP váltotta fel a korábbi FID mutatót. Ez már nem csak az első kattintást, hanem az oldal teljes élettartama alatti válaszkészséget figyeli.

Interaktivitás fokozása:

• JavaScript minimalizálás: A túl sok script “lefagyasztja” a böngészőt. Távolítsa el a nem használt bővítményeket és kódokat.
• Web Workers: A komplex számításokat helyezze át a háttérbe, hogy ne blokkolják a fő szálat (main thread).

4. A kritikus rendering út (Critical Rendering Path) optimalizálása

Az LCP és az INP mutatók egyik legnagyobb ellensége a túlterhelt böngésző. Amikor egy látogató megnyitja az oldalt, a böngésző elkezdi letölteni a HTML-t, a CSS-t és a JS-t. Ha a CSS fájlunk 200 KB, a böngésző addig nem rajzol ki semmit, amíg ezt le nem töltötte. Ezt hívjuk renderelést blokkoló erőforrásnak.

A megoldás: Critical CSS Ahelyett, hogy megvárnánk a teljes stíluslapot, emeljük ki azt a minimális CSS-t, amely a “fold feletti” (vagyis görgetés nélkül látható) rész megjelenítéséhez kell. Ezt tegyük közvetlenül a HTML <head> részébe (inline). A maradék, nehéz CSS fájlt pedig töltsük be aszinkron módon. Ezzel az LCP értéke akár másodpercekkel is javulhat, mivel a felhasználó azonnal látja a tartalmat, miközben a háttérben még töltődnek a díszítő elemek.

5. Képkezelés mesterfokon: A “Priority Hints” és a modern formátumok

Sokan elkövetik azt a hibát, hogy minden képet WebP formátumba konvertálnak, de elfelejtik a méretezést. Egy mobiltelefonon felesleges egy 4000 pixel széles képet betölteni, még akkor is, ha az WebP.

A reszponzív képek ereje: Használja a srcset attribútumot! Ez lehetővé teszi, hogy a böngésző az eszköz kijelzőjének megfelelő méretű képet töltse le. Egy kis trükk: a legfontosabb képünknél (LCP elem) használjuk a fetchpriority="high" paramétert. Ez egy viszonylag új eszköz a fejlesztők kezében, ami jelzi a böngészőnek: “Hagyd a többi scriptet, ezt a képet azonnal akarom!”. Ezzel szemben a láblécben lévő logókat érdemes loading="lazy" és fetchpriority="low" jelzővel ellátni, hogy ne rabolják el a sávszélességet a kritikus tartalom elől.

6. Szerveroldali válaszidő (TTFB) – Az alapok, amikről mindenki megfeledkezik

Hiába optimalizáljuk a frontendet, ha a szerverünk másodpercekig gondolkodik, mielőtt elküldené az első bájtot. A Time to First Byte (TTFB) ugyan nem közvetlen Core Web Vitals mutató, de ha a TTFB rossz, az LCP soha nem lesz jó.

Hogyan gyorsítsunk?

• Adatbázis optimalizálás: Ha WordPress-t használ, takarítsa ki a felesleges revíziókat és a spam kommenteket az adatbázisból.
• Edge Caching: Ne csak statikus fájlokat (képeket) tároljon a felhőben! Az olyan szolgáltatások, mint a Cloudflare APO, képesek a teljes HTML oldalt a látogatóhoz legközelebbi szerveren tárolni. Ez azt jelenti, hogy egy budapesti látogató nem egy frankfurti szerverre vár, hanem egy budapesti csomópont szolgálja ki azonnal. Nálunk a tesztek során ez volt a leglátványosabb ugrás a sebességben.

7. JavaScript végrehajtási idő: Kevesebb kód, több interakció

Az INP (Interaction to Next Paint) romlását leggyakrabban a “túlművelt” JavaScript okozza. Amikor rákattintunk egy menüre, de az nem nyílik ki azonnal, az azért van, mert a böngésző éppen egy hatalmas marketing-scriptet (pl. hőtérképet vagy analitikát) dolgoz fel a fő szálon.

A “Main Thread” felszabadítása: A nem kritikus scripteket (mint a Facebook Pixel vagy a Google Tag Manager bizonyos részei) érdemes késleltetni. Egy jól bevált módszer, ha ezeket csak az első felhasználói interakció (pl. egérmozgás vagy görgetés) után töltjük be. Ezzel az oldal kezdeti betöltése villámgyors lesz, és a böngészőnek marad energiája arra, hogy azonnal reagáljon a kattintásokra. Ne feledjük: a Google nem azt nézi, hogy mennyi kódunk van, hanem azt, hogy a látogató ebből mit érez.

A “Speed-Budget” pszichológiája

Sokan elkövetik azt a hibát, hogy csak a számokat nézik. Azonban létezik egy kevéssé ismert trükk: a perceptuális sebesség. Ha egy oldal vizuálisan azonnal ad valamilyen visszajelzést (például egy progress bar-t vagy csontváz-képernyőt), a felhasználó agya gyorsabbnak érzékeli a folyamatot, még akkor is, ha a technikai betöltés ugyanannyi időt vesz igénybe. Nálunk a fejlesztés során ez az elsődleges szempont: a várakozási idő szubjektív csökkentése.

SEO-barát ellenőrzőlista a gyors javításhoz

1. Szerver válaszidő: Váltson NVMe alapú tárhelyre vagy használjon CDN-t (pl. Cloudflare).
2. Lusta betöltés (Lazy loading): A képernyő alatti képeket csak akkor töltse be, ha a felhasználó odagörget. De vigyázat: az LCP elemet soha ne “lazy load”-olja!
3. Gyorsítótárazás (Caching): Állítson be agresszív böngészőoldali gyorsítótárazást a statikus fájlokhoz.

Szakértői megjegyzés: Írta: Kovács Péter, technikai SEO szakértő. A tapasztalataim alapján a weboldalak 70%-ánál a képek méretezése és a felesleges bővítmények törlése önmagában 50%-os javulást hoz a Core Web Vitals mutatókban.

Gyakori kérdések (FAQ)

Mennyi idő alatt látom az eredményt a Search Console-ban?

A Google 28 napos gördülő átlagot számol, így a javítások után körülbelül egy hónap kell a teljes “zöldüléshez”.

Befolyásolja a helyezésemet, ha piros az egyik mutatóm?

Igen, a Google megerősítette, hogy a Core Web Vitals rangsorolási szempont. Egy lassú oldal hátrányba kerülhet a gyorsabb versenytársakkal szemben.

Minden oldalnak tökéletesnek kell lennie?

Érdemes a leglátogatottabb oldalakkal (főoldal, kategóriák, blogposztok) kezdeni az optimalizálást.

Mérjen, javítson, uralkodjon!

A Core Web Vitals nem egy egyszeri feladat, hanem egy folyamatos karbantartási igény. Ha betartja a fent leírtakat, nemcsak a keresőmotorok kedvében jár, hanem valódi értéket ad a látogatóinak is. A gyorsabb oldal több konverziót, alacsonyabb visszafordulási arányt és elégedettebb ügyfeleket jelent.

Készen áll a gyorsításra? Kezdje az oldalának tesztelésével a PageSpeed Insights felületén, és végezze el az első három képoptimalizálási lépést még ma!