Weboldal-sebesség: Core Web Vitals és ami mögötte van

Üzleti hatás

A lassú oldal pénzbe kerül, mégpedig mérhetően. Minden extra másodperc növeli a visszafordulást, mobilon különösen. Webshopban ez közvetlenül a kosárelhagyásban jelenik meg.

A rossz CLS másfajta kárt okoz. A tartalom elugrik kattintás közben, és a látogató rossz gombot nyom. Egy pénztároldalon ez azonnali bizalomvesztés.

SEO-hatás

A Google a valós felhasználói élményt rangsorolási jelként használja. Önmagában nem emel fel gyenge tartalmat. Hasonló erősségű találatok között viszont eldöntheti a sorrendet.

Van egy közvetettebb hatás is. A lassú szerver csökkenti a feltérképezés hatékonyságát. Nagy webshopnál ez azt jelenti, hogy az új termékoldalak lassabban kerülnek az indexbe.

AI-hatás

A nyelvi modelleket kiszolgáló robotok időkorláttal kérik le az oldalt. Ha a válasz nem fér bele, a tartalom kimarad. A kliensoldalon renderelt szöveg ugyanígy kimaradhat. Az oldalad ilyenkor nem rossz választ kap egy AI-tól, hanem semmilyet.

Kire vonatkozik

• Minden nyilvános oldalra, amit valódi látogatók nyitnak meg böngészőből.
• Webshopokra kiemelten: a termék- és listaoldalakon a legnagyobb a tét.
• Landing oldalakra, ahol fizetett forgalom érkezik. Ott a lassulás közvetlen hirdetési veszteség.
• Mobilra elsősorban. A magyar forgalom nagyobbik fele telefonról jön, és a mutatók ott romlanak el.

Kire nem vagy csak részben

• Staging és fejlesztői környezet: ott a labormérés is torz, valós adat pedig nincs.
• Belépés mögötti felületek: adminfelületre vagy ügyfélportálra nem gyűlik valós adat, mert a robotok nem látják.
• Kis forgalmú oldalak: ha nincs elég Chrome-látogató, a valós adat egyszerűen nem áll rendelkezésre. Ilyenkor marad a labormérés, és ezt a korlátot ki kell mondani.

A kevés forgalmú oldalnál nem az a válasz, hogy nem mérhető. Az a válasz, hogy a labormérés hibalistáját dolgozod végig.

Lépések

1. Nyisd meg a PageSpeed Insights oldalt, és írd be a konkrét URL-t. Ne a főoldalt mérd, hanem azt az aloldalt, ami a bevételt hozza.
2. Nézd meg felül a valós látogatói blokkot. Ha megjelenik, ott az LCP, a CLS és az INP a 75. percentilisen.
3. Ha nincs URL-szintű adat, válts a domain szintű nézetre. Ha az sincs, nincs elég forgalom.
4. Görgess le a labormérésig. Ott kapod a pontszámot és a konkrét javaslatokat.
5. Nyisd meg a Search Console Core Web Vitals jelentését. Ez URL-csoportonként mutatja, melyik sablon romlott el.
6. Futtass helyi mérést böngésző devtoolsban. A Lighthouse fül mobil profilon, a Performance fül a lassú scriptek azonosítására való.
7. Mérd meg külön a szerver válaszidejét curl-lel. Ha a TTFB 0,8 másodperc felett van, az LCP-t hiába optimalizálod a kliensen.

Jó jel

• Az LCP 2,5 másodperc alatt van valós adaton, mobilon is.
• A CLS 0,1 alatt marad.
• Az INP 200 ezredmásodperc alatt van.
• A TTFB stabilan 0,8 másodperc alatt marad ismételt mérésnél.
• A képek modern formátumban és a megjelenítési méretben töltődnek.

Rossz jel

• A labor pontszám magas, a valós adat viszont piros. Ilyenkor a valós eszközpark a szűk keresztmetszet.
• Az LCP-elem egy háttérkép vagy egy slider első képe, amit JavaScript tölt be.
• A CLS a betöltés után két másodperccel ugrik meg. Ez szinte mindig a süti-sáv vagy egy hirdetési keret.
• Az INP csak valós adaton rossz. A labor ezt nem méri, mert nincs benne kattintás.
• Ismételt méréseknél nagyon szór a TTFB. Ez a tárhely vagy a cache hiánya.

A sorrend nem cserélhető fel. Előbb a szerver, aztán a kritikus útvonal, utána a képek, és csak legvégül a finomhangolás.

Univerzális sorrend

1. Csökkentsd a szerver válaszidejét: oldalgyorsítótár, PHP-verzió frissítés, jobb tárhely.
2. Vedd ki a render-blokkoló erőforrásokat a kritikus útvonalról.
3. Javítsd az LCP-elemet: legyen a HTML-ben, kapjon fetchpriority="high", és ne legyen lusta betöltésű.
4. Rögzítsd a helyeket: minden képen és beágyazáson legyen méret, hogy ne ugráljon a layout.
5. Csökkentsd a JavaScript mennyiségét. Az INP-t csak ez javítja érdemben.
6. Mérj újra, és várj 28 napot a valós adatra.

WordPress

1. Telepíts egy oldalgyorsítótár-bővítményt, és kapcsold be a teljes oldal cache-t. Kettőt soha ne használj egyszerre.
2. Kapcsold be a kritikus CSS-t és a nem használt CSS eltávolítását. Ezután nézd át a fontosabb sablonokat, mert ez tör el a leggyakrabban.
3. A témán belül állítsd be, hogy a hero kép ne legyen loading="lazy". A magyar KKV-oldalak többségén pont az LCP-kép van lustára állítva.
4. Nézd át a bővítménylistát. Minden aktív plugin tölt CSS-t és JS-t minden oldalon, akkor is, ha nem használod.
5. A slidereket és a nehéz oldalépítő modulokat cseréld statikus blokkra a főoldalon.

Shopify

1. A téma sebességét a Shopify jelentésében és PageSpeed-ben is nézd meg, mert a beépített pontszám összevont.
2. Távolítsd el a nem használt appokat. A törölt app scriptje gyakran a témában marad.
3. A téma kódjában keress <script src hivatkozásokat, és tedd őket defer attribútummal betölthetővé.
4. A képeket a beépített image_url szűrővel kérd le megfelelő szélességen, és adj width és height értéket.
5. A süti-sávot és a chat-widgetet késleltetve töltsd be.

Unas

1. Az adminban ellenőrizd a bekapcsolt külső kódokat. A beillesztett marketing-scriptek adják a legnagyobb terhet.
2. A termékképeket feltöltés előtt méretezd át. A rendszer kiszolgálja a nagy fájlt, ha te azt töltöd fel.
3. A sablon egyedi CSS és JS blokkjait tartsd rövid tartalommal, és ne másolj be teljes könyvtárakat.
4. A főoldali kiemelt blokkok számát csökkentsd. Minden blokk külön lekérés és külön HTML.

Shoprenter

1. A sablonszerkesztőben nézd át a fejlécbe illesztett kódokat, és a nem kritikusakat told a lábba.
2. Kapcsold ki a nem használt modulokat a sablonban.
3. Töltsd fel a képeket a megjelenítési méretben, és engedd a rendszernek a modern formátum kiszolgálását.
4. A külső betűtípusokat szűkítsd a ténylegesen használt vastagságokra.

Egyedi fejlesztés

1. Állíts be Cache-Control fejlécet a statikus fájlokra, hosszú élettartammal és fájlnév-hasheléssel.
2. Tedd a statikus tartalmat CDN mögé, és kapcsold be a brotli tömörítést.
3. Használj preconnect és preload utasítást a kritikus erőforrásokra, de legfeljebb két-három elemre.
4. Szállítsd a képeket AVIF vagy WebP formátumban, srcset és sizes megadásával.
5. Bontsd kisebb darabokra a JavaScriptet, és halaszd el azt, ami nem kell az első képernyőhöz.
6. Szerveroldali renderelésnél ellenőrizd, hogy a fő tartalom benne van-e a nyers HTML-ben. Ezt curl hívással látod a legegyszerűbben.

• Csak a főoldalt mérik. A bevétel a termék- és szolgáltatásoldalakon keletkezik, és azok sablonja teljesen más.
• Az LCP-kép lusta betöltésű. A loading="lazy" az első képernyőn kifejezetten lassít, mert késlelteti a legfontosabb elemet.
• A labor pontszámot kergetik. A 100 pont asztali gépen semmit nem mond arról, mit tapasztal a látogató telefonon.
• Két gyorsítótár-bővítmény fut egyszerre. Egymás kimenetét cache-elik, és véletlenszerű hibákat okoznak.
• A süti-sáv utólag tolja le a tartalmat. Ez tiszta CLS-romlás, pedig egy fix magasságú hely lefoglalásával megoldható.
• Mérés után azonnal újramérnek. A valós adat 28 napos ablakkal dolgozik, a javítás hatása csak hetek múlva látszik teljesen.
• A marketing-scriptek listáját senki nem nézi át. A riportokban rendre látunk élő pixeleket olyan kampányokhoz, amik két éve lejártak.

A szerver válaszidejét nem kell megbecsülni, meg lehet mérni. A curl pontos szakaszokra bontja a kérést:

curl -s -o /dev/null -w "dns: %{time_namelookup}s\ntls: %{time_appconnect}s\nttfb: %{time_starttransfer}s\nteljes: %{time_total}s\nmeret: %{size_download} bajt\n" https://pelda.hu/termek/valami

Ha a ttfb érték 0,8 másodperc felett van, a probléma a szerveren vagy az adatbázisban keresendő. A kliensoldali optimalizálás ilyenkor csak kozmetika.

Az LCP-kép helyes jelölése a következő. A kép a HTML-ben van, magas prioritást kap, és nem lusta betöltésű:

<img
  src="/kepek/hero-1200.avif"
  srcset="/kepek/hero-800.avif 800w, /kepek/hero-1200.avif 1200w"
  sizes="(max-width: 768px) 100vw, 1200px"
  width="1200"
  height="630"
  fetchpriority="high"
  decoding="async"
  alt="Zöld munkaruha szett raktári környezetben">

A width és a height megadása foglalja le a helyet, így nem ugrik a layout. A lejjebb lévő képekre viszont tedd ki a loading="lazy" attribútumot.

A statikus fájlok gyorsítótárazását a válaszfejléc dönti el:

Cache-Control: public, max-age=31536000, immutable
Content-Encoding: br

Ez csak akkor biztonságos, ha a fájlnév tartalmaz verziószámot vagy hasht. Enélkül a látogató a régi fájlt kapja a frissítés után is.