Weboldal sebessége: 3 mp alatt betölt vagy elveszett

53% a mobil látogatók távozik, ha az oldal 3 másodpercnél tovább tölt. Ez nem elmélet – Google kutatás, millió oldal adatai.

És ez még csak a felhasználói élmény. Jön még:

• SEO: Lassú oldal = rosszabb rangsorolás (2021 óta Core Web Vitals)
• Konverzió: 1 másodperc késés = 7% kevesebb eladás (Amazon)
• Hirdetések: Lassú landing page = magasabb CPC, rosszabb Quality Score

Szóval: a sebesség pénz. Nem technikai finomság, hanem üzleti prioritás. Lássuk, mit tudsz tenni ellene.

Először: Mérés (hol tartasz most?)

Mielőtt javítanál, tudnod kell, hol vagy. Használd ezeket:

1. Google PageSpeed Insights

pagespeed.web.dev → Írd be az URL-ed → Enter

• Mobile score: Min. 70+ (ideális: 90+)
• Desktop score: Min. 80+ (ideális: 95+)
• Core Web Vitals: Nézd az LCP, FID, CLS értékeket

Tipp: A mobilra koncentrálj. A Google is onnan indexel.

2. GTmetrix

gtmetrix.com → Részletes elemzés, waterfall chart (mi lassít)

3. Igazi felhasználói adatok

Google Analytics 4 → Engagement → Pages and screens → Átlagos betöltési idő

Cél: 2-3 mp teljes betöltés, 1.5 mp alatt első tartalom (FCP).

1. Képek optimalizálása (legtöbb oldal #1 problémája)

A probléma:

Feltöltöttél egy 5 MB-os JPEG-et közvetlenül a kameráról? Az oldal 80%-a képek = 80%-a a betöltési időnek.

A megoldás:

a) Formátum: WebP (vagy AVIF)

• WebP: 25-35% kisebb fájlméret, mint JPEG (azonos minőség)
• AVIF: Még kisebb, de kevesebb böngésző támogatja (2025-ben már jobban)

Eszköz:

• Online: squoosh.app (Google)
• Bulk: XnConvert (ingyenes)
• WordPress: ShortPixel vagy Imagify plugin

b) Méret: Csak akkora, amennyit kijelenítesz

Ha a kép 400px széles az oldalon, ne tölts fel 3000px-es verziót.

Példa:

Rossz: hero-image.jpg (3000x2000px, 4.2 MB)
Jó: hero-image.webp (1200x800px, 120 KB)

c) Lazy loading (lustább betöltés)

Csak azok a képek töltődjenek be, amik láthatóak. A többit később, görgetéskor.

HTML:

<img src="kep.jpg" alt="Leírás" loading="lazy" />

WordPress: Alapból benne van 5.5 óta.

Hatás: 40-60% gyorsabb első betöltés (sok képes oldalaknál).

2. Cache bekapcsolása (másodszor már gyors lesz)

Mi az a cache?

Az oldal "előre legenerált" verziója. Nem kell minden alkalommal újraépíteni, hanem kiszolgálja a kész HTML-t.

Típusok:

a) Browser cache (böngésző)

A látogató böngészője elmenti a képeket, CSS-t, JS-t. Második látogatásnál már nem kell újra letölteni.

Beállítás (.htaccess):

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

b) Server-side cache (szerver)

WordPress: WP Rocket, W3 Total Cache, LiteSpeed Cache (ha van LiteSpeed szervered).

Beállítás:

• Telepítsd a plugint
• Alapbeállítások OK (advanced később)
• Teszteld: látogatói módban nyisd meg az oldalt

Hatás: 50-70% gyorsabb másodszori látogatás, kevesebb szerverterhelés.

3. Felesleges JavaScript és CSS eltávolítása

A probléma:

Telepítettél 15 plugint, de csak 3-at használsz. Minden plugin betölt JS-t és CSS-t → lassítás.

A megoldás:

a) Plugin audit

• WordPress Admin → Plugins → Nézd végig: tényleg kell mind?
• Töröld, ami nem használt
• Kombináld: pl. contact form plugin helyett egyszerű HTML űrlap

b) Unused CSS/JS eltávolítás

Eszköz: Asset CleanUp (WordPress plugin) → oldalanként ki tudod kapcsolni a felesleges fájlokat.

c) Minifikálás és összevonás

• Minify: Whitespace, kommentek eltávolítása (kisebb fájl)
• Combine: 10 CSS fájl helyett 1 (kevesebb HTTP kérés)

WordPress: WP Rocket vagy Autoptimize plugin automatikusan csinálja.

Hatás: 20-30% gyorsabb, főleg sok plugines oldalaknál.

4. CDN használata (Content Delivery Network)

Mi az?

A statikus fájlok (képek, CSS, JS) nem a saját szervereden tárolódnak, hanem egy globális hálózaton. A látogató a hozzá legközelebbi szerverről kapja.

Példa:

• Magyar látogató → Frankfurt szerver (10 ms)
• USA látogató → New York szerver (10 ms)
• Helyett: mindketten Budapest szerverről (USA: 150 ms)

CDN szolgáltatók:

• Cloudflare: Ingyenes tier van, 5 perc beállítás
• BunnyCDN: Olcsó, gyors ($1/hó-tól)
• KeyCDN, StackPath: Prémium opciók

Beállítás (Cloudflare példa):

1. Cloudflare regisztráció (ingyenes)
2. Add hozzá a domain-t
3. Nameserver váltás (a domain regisztrátornál)
4. Kész – cache automatikusan működik

Hatás: 30-50% gyorsabb, főleg nemzetközi forgalomnál.

5. Hosting upgrade (ha minden más nem segít)

A probléma:

Shared hosting 500 Ft/hó? Szuper ár, de 200 másik weboldallal osztozol a szerveren. Ha valamelyik túlterhelt → te is lassulsz.

A megoldás:

Hosting típusok (sebességi sorrend):

1. Managed WordPress hosting: WP Engine, Kinsta, Cloudways (gyors, drágább)
2. VPS (Virtual Private Server): DigitalOcean, Linode, Vultr (közepes, rugalmas)
3. Jó shared hosting: SiteGround, A2 Hosting (olcsóbb, de jobb, mint az alap)
4. Alap shared hosting: Lassú, kerüld (főleg, ha a site növekszik)

Tipp: Ha WordPress-ed van, LiteSpeed szerver + LiteSpeed Cache = fantasztikus kombó.

Hatás: 2-3x gyorsabb (főleg szerverválaszidő: TTFB).

6. Database (adatbázis) optimalizálás

A probléma:

WordPress évekig fut → sok revízió, spam komment, tranziens adat → felduzzadt adatbázis.

A megoldás:

WordPress:

• WP-Optimize plugin: Tisztítja a revíziókat, spam-et, optimalizálja a táblákat
• Manuálisan: phpMyAdmin → Tables → Optimize (minden táblánál)

Hatás: 10-20% gyorsabb (főleg sok tartalmas oldalaknál).

7. HTTP/2 vagy HTTP/3 engedélyezése

Mi az?

Újabb protokoll = gyorsabb kommunikáció szerver ↔ böngésző.

Előnyök:

• Több fájl párhuzamos letöltése (multiplexing)
• Header tömörítés
• Server push (CSS/JS előre küldése)

Ellenőrzés:

tools.keycdn.com/http2-test

Beállítás:

• Cloudflare: automatikusan HTTP/2 (és HTTP/3, ha bekapcsolod)
• Saját szerver: nginx/Apache config (kérd a host supportot)

Hatás: 5-15% gyorsabb (főleg sok fájlos oldalaknál).

8. Kritikus CSS inline betöltése

A probléma:

Az oldal vár, amíg a teljes CSS fájl letöltődik → késik az első kirajzolás.

A megoldás:

Critical CSS: Csak az "above the fold" (látható rész) CSS-e inline, a többi később töltődik.

Eszköz:

• WP Rocket: automatikusan generálja
• Manuálisan: Critical CSS Generator

Hatás: Gyorsabb First Contentful Paint (FCP).

9. Videók: YouTube embed helyett facade

A probléma:

YouTube iframe betöltése → 500 KB+ extra JS/CSS → lassítás, még ha nem is játszod le.

A megoldás:

Facade pattern: Csak egy kép (thumbnail) + play gomb. Kattintásra töltődik be a tényleges videó.

WordPress plugin: Lite YouTube Embeds vagy WP YouTube Lyte

Hatás: 1-2 mp gyorsabb, főleg sok videós oldalaknál.

10. Prefetch & Preconnect (haladó)

Mi az?

Előre megmondod a böngészőnek: "Készülj fel, hogy innen fogsz letölteni valamit."

Példa:

<!-- Preconnect: Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<!-- DNS Prefetch: Analytics -->
<link rel="dns-prefetch" href="https://www.google-analytics.com" />

Hatás: 50-200 ms gyorsabb kapcsolódás (kis, de számít).

Összefoglalás: Gyorsítási sorrend (mit csinálj előbb)

Első kör (ma elkezdheted):

1. Képek WebP-re (Squoosh.app)
2. Lazy loading (loading="lazy")
3. Cache plugin (WP Rocket / W3 Total Cache)
4. Felesleges pluginek törlése

Második kör (1-2 nap):

1. Cloudflare CDN (ingyenes)
2. Database tisztítás (WP-Optimize)
3. Minifikálás (Autoptimize / WP Rocket)

Harmadik kör (ha kell még):

1. Hosting upgrade (jobb szerver)
2. Critical CSS
3. HTTP/2 engedélyezése
4. Video facade

Ne csináld egyszerre mindet! Lépésről lépésre haladj, mérj közben. Így látod, mi ad 80%-ot, és mi csak 5%-ot.

Core Web Vitals – a 3 fontos metrika

Google 2021 óta ezeket nézi rangsorolásnál:

1. LCP (Largest Contentful Paint)

Mit mér: A legnagyobb elem megjelenése (képek, videók, nagy szövegblokk)

Cél: 2.5 másodperc alatt

Javítás: Képoptimalizálás, szerver gyorsítás, CDN

2. FID (First Input Delay)

Mit mér: Mennyi idő, amíg a látogató interakcióra (kattintás) az oldal reagál

Cél: 100 ms alatt

Javítás: JavaScript csökkentése, defer/async, kevesebb plugin

3. CLS (Cumulative Layout Shift)

Mit mér: Mennyire "ugrik" az oldal betöltéskor (pl. kép töltődik, szöveg lecsúszik)

Cél: 0.1 alatt

Javítás: Fix méretű képek (width/height attribútum), ne töltődjenek be hirdetések fent

Ellenőrzés: PageSpeed Insights → Core Web Vitals szekció

Mit tegyél most?

1. Futtasd le: PageSpeed Insights
2. Nézd meg a score-t (Mobile): 70 alatt? Sürgős javítás
3. Kezdd a képekkel: WebP + lazy loading
4. Cache plugin (ha nincs)
5. 1 hét után mérj újra → lásd a változást

Ha nem megy, vagy túl sok a feladat: kérj ingyenes teljesítmény auditot. Megnézzük, mi lassít, priorizáljuk, és segítünk megoldani.