Miért lassú a WordPress weboldal mobilon, és hogyan gyorsítsd fel?

Mit jelent ez az üzletednek?

Súlyosság: magas. A magyar weblátogatók 65–80%-a telefonról érkezik: a lassú mobiloldal közvetlenül viszi el az érdeklődők többségét.

Mobilon minden plusz másodperc várakozás 10–20%-kal növeli a visszafordulási arányt. Ha a látogató 3 másodpercig csak üres fehér lapot lát a telefonján, visszalép a Google keresőbe a következő versenytárshoz. A lassú mobiloldal ráadásul a Google valós Core Web Vitals mutatóit (LCP, INP) is lerontja, ami rontja a rangsorolást a mobilkeresésekben.

A leggyakoribb okok – és hogyan ismered fel őket

1. 1

   Túlterhelt mobil CPU a felesleges JavaScript miatt

   Az oldalépítők (Elementor, Divi), csúszkák, animációk és analitikai kódok óriási JavaScript csomagokat futtatnak. Míg egy erős laptop észrevétlenül feldolgozza, egy középkategóriás okostelefon processzora másodpercekre lefagy alatta.

   Így ellenőrizd: PageSpeed Insights mobil fülön nézd meg a „Total Blocking Time” (TBT) értéket. Ha 300 ms felett van (különösen 800+ ms), a CPU túlterhelt.

2. 2

   Asztali felbontású, óriási képek kiszolgálása mobilon

   A mobil kijelzője csak 360–420 képpont széles, mégis sok sablon a 2500 képpontos asztali fotót tölti le a látogató telefonjára, ami mobilneten több megabájt felesleges adatforgalom.

   Így ellenőrizd: A PageSpeed „Képek megfelelő méretezése” javaslatánál látható, mennyi adatot takarítanál meg reszponzív méretekkel.

3. 3

   Nincs külön mobil gyorsítótár

   Sok ingyenes vagy rosszul beállított WordPress cache bővítmény csak egyetlen közös gyorsítótárat készít, vagy mobilon egyáltalán nem ad ki statikus HTML-t, így a szerver minden mobilos kérésnél újragenerálja a teljes PHP kódot.

   Így ellenőrizd: Kapcsold be a cache bővítményben a „Külön gyorsítótár mobil eszközökhöz” opciót, és ellenőrizd az X-Cache fejlécet.

4. 4

   Külső harmadik féltől származó szkriptek

   Élő chat widgetek, Facebook Pixel, Google Tag Manager, hőtérképek és külső vélemény-widgetek egyszerre próbálnak betöltődni a mobil indításakor.

   Így ellenőrizd: Nézd meg a „Harmadik felek kódjának hatása csökkentése” diagnosztikát a PageSpeedben.

5. 5

   Túl sok betűtípus és stíluslap a fejlécben

   3-4 különböző Google betűtípuscsalád, 400-as, 600-as, 700-as vastagsággal, plusz FontAwesome ikoncsomagok: a telefon addig egyetlen betűt sem rajzol ki, amíg ezek mind le nem töltődnek.

   Így ellenőrizd: Ellenőrizd a „Megjelenítést blokkoló erőforrások kiküszöbölése” listát a PageSpeedben.

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

1. 1. lépés

   Kapcsold be a külön mobil gyorsítótárat (Mobile Cache)

   Ha WP Rocketet, LiteSpeed Cache-t vagy WP Fastest Cache-t használsz, győződj meg róla, hogy a mobil eszközökre vonatkozó gyorsítótárazás aktív. LiteSpeed szervernél a szerveroldali cache a leghatékonyabb, mert a PHP futtatása nélkül adja ki az oldalt.

2. 2. lépés

   Késleltesd a nem kritikus JavaScript futtatását (Delay JS)

   Ez a leghatásosabb egyetlen beállítás mobilon: a nem azonnal szükséges szkriptek (chat, Facebook Pixel, csúszkák, analitikák) mindaddig nem futnak le, amíg a felhasználó meg nem érinti a képernyőt vagy nem görget.

   Kapcsold be: "Delay JavaScript Execution" (JavaScript-végrehajtás késleltetése).
   Kivételként csak a menüt vagy kritikus űrlap-működést add meg, ha szükséges.

3. 3. lépés

   Méretezd és tömörítsd a képeket WebP formátumba

   Használj automatikus képtömörítőt (pl. Converter for Media, ShortPixel vagy LiteSpeed Image Optimization). Gondoskodj róla, hogy a képeken szerepeljen a width és height attribútum, és az <img> elem használjon srcset-et a megfelelő mobilméret kiválasztásához.

4. 4. lépés

   Rendezd a hajtás feletti fő képet (Hero kép)

   A telefon képernyőjén legfelül megjelenő képről kapcsold KI a lazy loadingot (lusta betöltést), és adj hozzá fetchpriority="high" attribútumot, hogy a böngésző elsőként ezt töltse le.

   <img src="/kepek/fooldal-hero-mobil.webp"
     width="400" height="300"
     fetchpriority="high"
     alt="Szolgáltatás bemutatása">

5. 5. lépés

   Ritkítsd a betűtípusokat és használd a font-display: swap-et

   Maximum 2 betűtípuscsaládot használj az egész webhelyen. Állítsd be a betűtípusok helyi tárolását (Local Google Fonts) és a font-display: swap tulajdonságot, hogy a szöveg azonnal olvasható legyen a rendszerbetűkkel a letöltés alatt is.

6. 6. lépés

   Távolítsd el az elavult és párhuzamos bővítményeket

   Nézd át a Bővítmények listát: törölj mindent, ami inaktív vagy már nincs rá szükség. Ha több SEO, képtömörítő vagy biztonsági bővítmény fut egyszerre, válassz egyet, a többit távolítsd el.

Tippek platformonként

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

• Egyszerre 3 különböző gyorsító bővítményt telepíteni, amik összeakadnak és hibát okoznak.
• Az asztali elemeket mobilon csak CSS-ben (display: none) elrejteni: a telefon ettől még letölti a kódot és a képeket.
• A hero (legfelső) képre is lusta betöltést (lazy loading) rakni, ami megnöveli a várakozási időt (LCP hiba).
• Csak otthoni gyors wifi-n és csúcskategóriás iPhone-on tesztelni a weboldalt.

Gyakori kérdések