A tökéletes weboldal sebesség titka: Hogyan érj el 100% PageSpeed pontszámot?

A látogatók több mint 50%-a elhagyja a webhelyet, ha az nem tölt be 3 másodpercen belül. A Google és a modern AI-ágensek még ennél is szigorúbbak: a lassú oldalakat hátrébb sorolják az organikus találati listákon, és elkerülik a generatív válaszok (AI Overviews) forrásaként való megjelölést.

A 100% PageSpeed elérése azonban nem elérhetetlen álom. Ebben a cikkben bemutatjuk azokat a kulcsfontosságú optimalizációs technikákat, amelyeket mi is használunk a Digitális Gyorsítósávon.

---

1. Google Fonts elhagyása és a betűtípusok helyi kiszolgálása (Self-hosting)

A legtöbb weboldal külső CDN-ekről (például a fonts.googleapis.com szervereiről) tölti be a betűtípusokat. Ez extra DNS-lekérdezésekkel, SSL-kézfogásokkal és hálózati késleltetéssel lassítja a betöltést, ráadásul GDPR szempontból is aggályos, mivel a Google rögzítheti a látogató IP-címét.

A megoldás:
Minden betűtípust (pl. Outfit, Syne, Inter) lokálisan, .woff2 formátumban tárolunk az assets/fonts/ mappában, és közvetlenül a saját szerverünkről szolgálunk ki. Ez kiküszöböli a külső kérések láncolatát, és azonnali szövegmegjelenítést biztosít a böngészőkben.

---

2. Képek és médiafájlok modern formátumai (WebP/Avif) és lusta betöltése (Lazy Loading)

A nagy felbontású PNG és JPEG képek a weboldalak legnehezebb elemei.

• -

Modern kódolás: A képeket minden esetben .webp vagy .avif formátumba konvertáljuk, ami átlagosan 70-80%-kal kisebb fájlméretet eredményez a minőség látható romlása nélkül.

• -

Lazy loading: A hajtás alatti (below-the-fold) képek és videók esetében a loading="lazy" attribútumot használjuk. Ezzel elkerüljük, hogy a böngésző a kezdeti betöltéskor olyan képeket töltsön le, amelyeket a látogató még nem is lát a képernyőn.

---

3. A 3D Spline és WebGL Canvas elemek késleltetett inicializálása (Deferred Load)

Az interaktív 3D grafikák (pl. a nálunk látható Spline robot) rendkívül látványosak, de a WebGL inicializálása lefoglalja a processzort és a grafikus kártyát, ami forced reflow-t és elrendezés-újraszámítási (forced synchronous layout) hibát okoz a betöltés fázisában.

Így oldottuk meg:
A PCB háttér canvas és a 3D spline-viewer betöltését késleltetjük, és csak az onload esemény lefutása (a dokumentum teljes betöltődése) után inicializáljuk őket. Ezzel garantáljuk, hogy a látogató azonnal látja a szöveges tartalmat (First Contentful Paint - FCP), és a 3D animációk csak a háttérben indulnak el.

---

4. Drasztikus gyorsítótárazási (Caching) szabályok a .htaccess-ben

Ha a böngészőnek minden látogatáskor újra le kell töltenie a logót, a CSS fájlt vagy a betűtípusokat, a weboldal lassú érzetet kelt. A .htaccess fájlban beállítottuk a legújabb Apache gyorsítótárazási szabályokat (mod_expires és mod_headers):

# 1 év gyorsítótár a statikus elemeknek
ExpiresByType image/webp "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType text/css "access plus 1 month"

A cache-busting technika segítségével (pl. style.css?v=126) biztosítjuk, hogy a kódváltozások azonnal megjelenjenek az ügyfeleknél, miközben a PageSpeed mérés 100% zöld marad. A sebesség nem csupán technikai részlet — a konverzió és az üzleti siker alapja.