PageSpeed Optimalizáció — Tegye Gyorsabbá Weboldalát 2026-ban

Miért Fontos a Sebesség a Ranglistákban

A Google megerősítette, hogy az oldal sebessége hatással van a rangsorolásra. A lassú oldalak frusztrálják a felhasználókat, és a Google a legjobb élményt szeretné nyújtani. A Google adatai azt mutatják, hogy a felhasználó elhagyásának valószínűsége 32%-kal nő, amikor a betöltési idő 1 másodpercről 3 másodpercre nő.

De nem csak a rangsorolásról van szó. A sebesség közvetlen hatással van az eredményeinkre:

Konverziók — Minden egyes plusz másodperc a betöltési időben akár 7%-kal csökkentheti a konverziókat
Röppálya — A mobilfelhasználók 53%-a elhagyja azt az oldalt, amelynek betöltése több mint 3 másodpercet vesz igénybe
Felhasználói élmény — A gyors oldalak professzionálisnak és megbízhatónak tűnnek

Core Web Vitals — A Google Sebességmérői

A Google három Core Web Vitals metrikámmal méri a sebességet:

LCP — Legnagyobb Tartalmi Festés

Méri, mikor fejeződik be a legnagyobb látható elem (általában egy kép vagy címsor) betöltése.

Jó: 2.5 másodperc alatt
Fejlesztésre szorul: 2.5 — 4.0 másodperc
Gyenge: 4.0 másodperc felett

INP — Interakció a Következő Festésig

Méri, milyen gyorsan reagál az oldal, amikor a felhasználó interakcióba lép (kattint, gépel, görget).

Jó: 200ms alatt
Fejlesztésre szorul: 200 — 500ms
Gyenge: 500ms felett

CLS — Kumulatív Elrendezési Elmozdulás

Méri, mennyit változik az elrendezés a betöltés során. Ismerős az érzés — szeretne rákattintani valamire, de azonnal elmozdul a tartalom, és valami mást üt meg.

Jó: 0.1 alatt
Fejlesztésre szorul: 0.1 — 0.25
Gyenge: 0.25 felett

10 Konkét Optimalizálási Tipp

1. Optimalizálja a Képeket

A képek általában a legnagyobb problémát jelentik. Használjon modern formátumokat, mint a WebP vagy AVIF, amelyek 30-50%-kal csökkenthetik a fájlméretet látható minőségromlás nélkül.

Minden képet tömörítsen feltöltés előtt
Használjon loading="lazy" attribútumot a nem látható képeknél a kezdeti betöltés során
Mindig adjon meg width és height értékeket, hogy elkerülje a CLS-t
Használjon reszponzív képeket srcset-tel különböző képernyőméretekhez

2. Minimalizálja a CSS-t és JavaScriptet

Törölje az unused kódot, a fölösleges szóközöket és megjegyzéseket a CSS és JS fájljaiból. A legtöbb build eszköz ezt automatikusan megteszi, de győződjön meg róla, hogy valóban megtörténik a produkcióban.

3. Engedélyezze a Tömörítést

Biztosítsa, hogy a szervere Gzip vagy Brotli tömörítéssel küldje a fájlokat. Ez akár 70%-kal is csökkentheti a fájlméretet.

4. Használjon Böngészőgyorsítótárat

Állítson be Cache-Control fejlécet, hogy a böngésző helyben tárolja a statikus fájlokat (CSS, JS, képek). Legközelebb, amikor a felhasználó visszatér, ezek a fájlok nem szükségesek újra letölteni.

5. Csökkentse a Szerver Válaszidőt

A szerver válaszidejének (Time to First Byte, TTFB) 200ms alatt kell lennie. Megoldások:

Használjon gyors tárhelyszolgáltatót
Engedélyezze a kiszolgáló oldali gyorsítótárazást
Optimalizálja az adatbázis lekérdezéseket
Használjon CDN-t a statikus fájlok felhasználóhoz közeli kiszolgálókból való szolgáltatásához

6. Halassza El a Nem Kritikus JavaScriptet

A JavaScript, amely nem szükséges az első nézethez, aszinkron módon töltse be async vagy defer használatával. Ez jellemzően magában foglalja az analitikát, chat widgeteket és közösségi média beágyazásokat.

7. Előzetes Betöltés Kritikus Erőforrásokhoz

Használjon -ot a betűtípusokhoz, CSS-hez és képekhez, amelyek szükségesek az első nézethez. Ez arra figyelmezteti a böngészőt, hogy prioritást adjon ezeknek a fájloknak.

8. Töröljön Render-Blokkoló Erőforrásokat

A CSS és JavaScript a -ben blokkolja az oldal renderelését. A nem kritikus CSS-t helyezze a lap aljára, és inlinelje az első nézethez szükséges CSS-t (kritikus CSS).

9. Használjon CDN-t

A Tartalom Szolgáltató Hálózat a világ minden táján terjeszti fájljait. A felhasználók a legközelebbi kiszolgálóról töltenek le, ami jelentősen csökkenti a késleltetést.

10. Optimalizálja a Web Betűtípusokat

A testreszabott betűtípusok késleltethetik a szöveg megjelenítését:

Használjon font-display: swap-ot, így a szöveg az alapértelmezett betűtípussal jelenik meg, amíg a testreszabott betűtípus betöltődik
Készítsen részhalmazt a betűtípusokból, hogy csak az Ön által használt karakterek szerepeljenek
Előzetesen töltse be a legfontosabb betűtípusokat
Fontolja meg az alapértelmezett betűtípusok használatát a törzsszöveghez

Hogyan Tesztelje Sebességét

Google PageSpeed Insights

A Google hivatalos eszköze. Laboratóriumi adatokat (szimulált) és valós felhasználókból származó adatokat (terepadatok) is ad, konkrét fejlesztési javaslatokkal.

Chrome DevTools

Nyissa meg a DevTools-t (F12), lépjen a "Performance" panelre, és rögzítse az oldal betöltését. Pontosan láthatja, mi tart sokáig és milyen sorrendben töltődnek be a fájlok.

WebPageTest

Egy fejlett tesztelő eszköz, amely lehetővé teszi, hogy különböző helyszínekről és kapcsolatsebességekről teszteljen. Részletes vízesési diagramokat biztosít.

Prioritás — Itt Kezdje

Ha három dolgot kell választania, amire a figyelmét összpontosítja:

Képek — Tömörítse és konvertálja WebP-re. A legnagyobb hatás a legkevesebb erőfeszítéssel.
Gyorsítótárazás — Állítsa be a megfelelő Cache-Control fejléceket. Egyszeri beállítás.
JavaScript — Halassza el a nem kritikus dolgokat. Csökkentse a harmadik féltől származó szkriptek számát.

Szeretné tudni, hogyan teljesít pontosan az oldal? Végezzen el egy ingyenes auditot, és nézze meg a Core Web Vitals és sebességpontszámát.