Rossz a mobil PageSpeed pontszámom: mit jelent, és hogyan javítsam?

Mit jelent ez az üzletednek?

Súlyosság: közepes. Közvetlenül a látogatói élményt és az ajánlatkéréseket rontja, a rangsorolásban pedig a valós Core Web Vitals adatokon keresztül hat.

Mobilon a lassú oldal a legdrágább: a látogató telefonon, sokszor mobilnetről, türelmetlenül keres. Minden plusz másodperc várakozás növeli a visszafordulók arányát. A gyors oldal ráadásul a Google valós felhasználói mérésében (Core Web Vitals) is jobban szerepel.

A leggyakoribb okok – és hogyan ismered fel őket

1. 1

   Túl nagy, rossz formátumú képek

   Telefonról feltöltött 4–6 MB-os fotók, PNG-ben mentett fényképek, mobilra is asztali méretben kiszolgált képek.

   Így ellenőrizd: A PageSpeed „Képek megfelelő méretezése” és „Képek modern formátumban” javaslatai mekkora megtakarítást mutatnak?

2. 2

   Sok és nehéz JavaScript

   Csúszkák, animációs könyvtárak, oldalépítők, chat-widgetek, pixelek, beágyazott videók – mind a fő szálat terhelik.

   Így ellenőrizd: A „Nem használt JavaScript csökkentése” (Reduce unused JavaScript) és a „Total Blocking Time” értékét nézd.

3. 3

   Megjelenítést blokkoló erőforrások

   A fejlécben betöltött CSS-fájlok, külső betűtípusok és szinkron szkriptek addig nem engedik kirajzolni az oldalt, amíg le nem töltődnek.

   Így ellenőrizd: „Megjelenítést blokkoló erőforrások kiküszöbölése” (Eliminate render-blocking resources) javaslat.

4. 4

   Lassú szerver, nincs gyorsítótár

   Olcsó, túlterhelt tárhely, oldalszintű cache nélküli WordPress: minden látogatásnál újragenerálódik az oldal.

   Így ellenőrizd: „A kiszolgáló kezdeti válaszideje” (Server response time) érték 0,6–0,8 mp felett van?

5. 5

   Késleltetett fő kép

   Ha a nagy hero képre is lazy loading van beállítva, vagy CSS-háttérként töltődik, a böngésző későn kezdi letölteni.

   Így ellenőrizd: A PageSpeed „Legnagyobb vizuális tartalomválasz” (LCP) elemként melyik képet jelöli, és mennyi a „betöltési késleltetés”?

Javítás lépésről lépésre

1. 1. lépés

   Optimalizáld a képeket

   Méretezd a képeket a megjelenítési méretre, használj WebP vagy AVIF formátumot, add meg a szélességet és magasságot, és a hajtás alatti képeket töltsd lustán (lazy).

   <img
     src="/kepek/referencia-800.webp"
     srcset="/kepek/referencia-400.webp 400w, /kepek/referencia-800.webp 800w"
     sizes="(max-width: 600px) 100vw, 800px"
     width="800" height="533"
     loading="lazy" decoding="async"
     alt="Felújított fürdőszoba Debrecenben">

2. 2. lépés

   Adj elsőbbséget a fő képnek

   A hajtás feletti, legnagyobb képet ne töltsd lustán, és jelezd a böngészőnek, hogy ez a legfontosabb.

   <img src="/kepek/hero-1200.webp" width="1200" height="700"
     fetchpriority="high" alt="Villanyszerelő munka közben">

3. 3. lépés

   Fogd vissza a szkripteket

   Távolítsd el a nem használt bővítményeket és widgeteket. A nem kritikus szkripteket töltsd defer attribútummal, a chat-widgetet és a nehéz beágyazásokat (YouTube, térkép) csak interakcióra vagy késleltetve.

   <script src="/js/slider.js" defer></script>

4. 4. lépés

   Rendezd a CSS-t és a betűtípusokat

   Csak a ténylegesen használt CSS töltődjön, a betűtípusokból kevés változatot használj, és add meg a font-display: swap beállítást, hogy a szöveg azonnal megjelenjen.

   @font-face {
     font-family: 'Brand';
     src: url('/fonts/brand.woff2') format('woff2');
     font-display: swap;
   }

5. 5. lépés

   Kapcsold be a gyorsítótárazást

   WordPressen egy jó cache-bővítmény (és ha a tárhely támogatja, szerveroldali cache) a leglátványosabb egyetlen lépés lehet. Egy CDN a statikus fájlokat a látogatóhoz közelebbről szolgálja ki.

6. 6. lépés

   Mérd újra – a valós adatokat is

   Javítás után futtasd újra a PageSpeedet, de nézd a felső, „Valós felhasználók élménye” részt is. A Search Console Core Web Vitals jelentésében a valós adatok 28 napos átlagként frissülnek.

Tippek platformonként

Gyakori hibák javítás közben

• A 100 pontot hajszolni – egy jól működő 75–90 pontos oldal üzletileg jobb lehet egy kiherélt 100-asnál.
• Csak asztali gépen mérni.
• A fő képre is lazy loadingot tenni.
• Egyszerre öt optimalizáló bővítményt telepíteni, amelyek ütik egymást.

Gyakori kérdések