Lassú weboldal = veszteség. Minden 1 másodperc késleltetés 7%-kal csökkenti a konverziót. Ebben a részletes útmutatóban megmutatom, hogyan érj el 90+ PageSpeed pontszámot és duplázhatsz meg a betöltési sebességet.
Miért kritikus a sebesség 2024-ben?
Google rangsorolási faktor: A lassú oldalak hátrasorolódnak a Google keresési találatokban.
Felhasználói élmény: 53% a mobil felhasználók elhagyja az oldalt 3 mp után.
Konverzió: Amazon számítása szerint 100ms lassulás = 1% bevétel csökkenés.
1. Képoptimalizálás: A legnagyobb sebesség "gyilkos"
A képek általában a weboldal méretének 50-70%-át teszik ki.
Képtömörítési eszközök:
- TinyPNG: Veszteségmentes tömörítés (ingyenes)
- ImageOptim (Mac): Batch képtömörítés
- Squoosh (Google): WebP konvertálás
WebP formátum használata
WebP 25-35%-kal kisebb fájlméret JPG/PNG-hez képest ugyanolyan minőségnél!
Lazy Loading (késleltetett képbetöltés)
A képek csak akkor töltődnek be, amikor a felhasználó odascrollol.
<img src="kep.jpg" loading="lazy" alt="Leírás">
2. Caching: Tárold a látogatók böngészőjében
Browser caching lehetővé teszi, hogy a statikus fájlok (CSS, JS, képek) helyben tárolódjanak a felhasználó böngészőjében.
Hogyan állítsd be? (.htaccess fájl):
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
</IfModule>
3. Minify CSS, JavaScript és HTML
Minification eltávolítja a felesleges szóközöket, sorokat és kommenteket a kódból. 20-40% méretcsökkenés!
Eszközök:
- CSS: cssnano, clean-css
- JavaScript: UglifyJS, Terser
- WordPress pluginek: WP Rocket, Autoptimize
4. CDN (Content Delivery Network)
CDN szerverhálózat amely a világ különböző pontjain tárolja az oldaladat. A felhasználó a legközelebbi szerverről kapja az adatokat.
Népszerű CDN szolgáltatók:
- Cloudflare: Ingyenes terv is van
- BunnyCDN: Olcsó, gyors
- Amazon CloudFront: Enterprise megoldás
Sebességnövekedés: 40-60% gyorsabb globális betöltés!
5. Tárhely és szerver optimalizálás
Olcsó tárhely = lassú weboldal. A szerver válaszidő (TTFB - Time To First Byte) kritikus.
Tippek:
- Használj SSD tárolást (nem HDD)
- Válassz VPS vagy dedikált szervert megosztott helyett
- Használj HTTP/2 vagy HTTP/3 protokollt
- Állítsd be a GZIP tömörítést
6. Csökkentsd a HTTP kéréseket
Minden fájl (CSS, JS, kép, font) egy külön HTTP kérés. Minél kevesebb kérés, annál gyorsabb.
Hogyan csökkentsd?
- Kombináld a CSS fájlokat: Több CSS → Egy CSS
- Inline critical CSS: A legfontosabb CSS közvetlenül a HTML-ben
- CSS sprites: Több kis kép → Egy nagy kép (sprite sheet)
- Töröld a nem használt plugineket (WordPress)
7. Font optimalizálás
Google Fonts és egyedi fontok lassítják az oldalt.
Tippek:
- Csak a ténylegesen használt font súlyokat töltsd be
- Használj font-display: swap opciótkésleltetés elkerüléséhez
- Helyezd el a fontokat CDN-en
- Fontold meg system font használatát (pl. -apple-system)
8. Core Web Vitals optimalizálás
Google 2021 óta hivatalos rangsorolási faktorként használja a Core Web Vitals metrikákat.
3 fő metrika:
LCP (Largest Contentful Paint) - Cél: < 2.5s
A legnagyobb elem betöltési ideje (általában hero kép vagy videó).
Javítás: Képtömörítés, CDN, szerver válaszidő csökkentés
FID (First Input Delay) - Cél: < 100ms
Mennyi idő telik el az első interakció (kattintás) és a válasz között.
Javítás: JavaScript optimalizálás, defer/async attributum
CLS (Cumulative Layout Shift) - Cél: < 0.1
Mennyire "ugrik" az oldal betöltés közben.
Javítás: Képeknek adj fix width/height-et, ne töltsd be dinamikusan a tartalmat
9. WordPress-specifikus tippek
Legjobb teljesítmény pluginek:
- WP Rocket: Komplett cache megoldás (fizetős, de megéri)
- W3 Total Cache: Ingyenes alternatíva
- Autoptimize: CSS/JS minification
- ShortPixel: Automatikus képtömörítés
Mit TILTSD le:
- Felesleges plugineket töröld
- Tiltsd le a post revisions-t (nagy adatbázis)
- Kapcsold ki az emoticonokat
- Töröld a spam kommenteket
10. Tesztelés és mérés
Tesztelő eszközök:
- Google PageSpeed Insights: Hivatalos Google eszköz
- GTmetrix: Részletes elemzés
- WebPageTest: Haladó tesztelés különböző lokációkból
- Pingdom: Gyors sebesség teszt
PageSpeed Checklist 2024
✅ Optimalizálási Checklist:
- ☐ Képek WebP formátumban és tömörítve
- ☐ Lazy loading bekapcsolva
- ☐ Browser caching beállítva
- ☐ CSS/JS minified
- ☐ CDN használata
- ☐ GZIP tömörítés aktív
- ☐ HTTP/2 engedélyezve
- ☐ Felesleges pluginek törölve (WordPress)
- ☐ Font optimalizálás
- ☐ Core Web Vitals: LCP < 2.5s, FID < 100ms, CLS < 0.1
Előtte-Utána példa
Eset: E-commerce webshop, 25 termék/oldal
| Metrika | Előtte | Utána |
|---|---|---|
| PageSpeed Mobile | 42 | 94 |
| Betöltési idő | 6.8s | 1.9s |
| Oldal méret | 8.2 MB | 1.4 MB |
| HTTP kérések | 127 | 38 |
Eredmény: +42% konverzió növekedés, 28% bounce rate csökkenés
Lassú a weboldalad?
Ingyenes sebesség auditot kínálunk, amelyben megmutatjuk pontosan mi lassítja az oldaladat és hogyan javítható. Garantáljuk a 90+ PageSpeed pontszámot.
Ingyenes Sebesség Audit