# Oldalsúly

> A teszt a nyitóoldal betöltésekor átvitt adatmennyiséget méri; 3 MB felett hiba. Javítás: kisebb és WebP képek, lusta betöltés, kevesebb kód.

Az oldalsúly az a teljes adatmennyiség, amelyet a böngészőnek le kell töltenie, mielőtt az oldal kész. A nagy oldal lassabban tölt be, különösen lassú mobilhálózaton, és a látogató adatkeretét is fogyasztja. Ebbe tartoznak a képek, a szkriptek, a stíluslapok, a betűtípusok és a videók.

## Hogyan mérjük

A riport böngészőben (mobil-emulációval) betölti a nyitóoldalt, és összeadja a Lighthouse által rögzített hálózati kérések átvitt méretét (a Lighthouse `transferSize` mezője). Ez az összeg minden kérést tartalmaz: HTML, CSS, JavaScript, képek, betűtípusok, a külső szolgáltatóktól jövők is.

- **Megfelelő:** legfeljebb 3 MB (pontosabban 3 × 1024 × 1024 = 3 145 728 bájt).
- **Hiba (közepes súlyosság):** ennél több.
- **Nem értékelhető:** ha a riport védelmi korlátja miatt a betöltés során kérések maradtak ki, a mérés csonka lenne, ezért ilyenkor a teszt nem ad eredményt.

A mérés csak a nyitóoldal betöltésére vonatkozik, a későbbi görgetésre vagy kattintásra betöltődő tartalmat nem. A riport minden mérést ideiglenes böngészőprofillal végez.

Ez a küszöb szigorúbb, mint a Lighthouse-é: a Lighthouse `total-byte-weight` auditja az 5 000 KiB feletti összmérettől jelez, és a Chrome dokumentációja szerint a medián oldal 1 700 és 1 900 KiB között van (HTTP Archive adatok alapján).

## Hogyan javítsd

Itt nincs egyetlen kódrészlet, mert a javítás attól függ, mi viszi a legtöbb adatot. A web.dev szerint a teljesítmény-költségkeret (performance budget) az oldal összméretére is megadható, így a nőni kezdő oldalt időben észreveszed. Kezdd a mérésnél:

1. **Nézd meg, mi a legnagyobb.** A böngésző fejlesztői eszközeinek Hálózat (Network) paneljén méret szerint rendezve látszanak a legnehezebb fájlok.
2. **Képek.** Használj modern formátumot (WebP), a megjelenítési méretnek megfelelő méretet, és töltsd lustán a hajtás alatti képeket. Lásd a [Modern képformátum](https://hub.hellowp.io/hu/report/teljesitmeny/modern-kepformatum/) és a [Képméretek, lusta betöltés](https://hub.hellowp.io/hu/report/teljesitmeny/kepmeretek-lusta-betoltes/) oldalt.
3. **Tömörítés.** A szöveges fájlok (HTML, CSS, JS) tömörítve menjenek át. Lásd a [Modern tömörítés](https://hub.hellowp.io/hu/report/teljesitmeny/modern-tomorites/) oldalt, és a web.dev szövegtömörítési útmutatóját.
4. **Kevesebb és kisebb kód.** Távolítsd el a nem használt JavaScriptet és CSS-t. Lásd a [Szkriptek száma](https://hub.hellowp.io/hu/report/teljesitmeny/szkriptek-szama/) oldalt.
5. **Külső szolgáltatók.** A beágyazott térképek, videólejátszók és követőkódok is hozzáadódnak az összeghez. Ha valamire nincs szükség, vedd ki.

### WordPress

WordPressben a médiatárba feltöltött képek méretét és a bővítmények által betöltött fájlokat érdemes átnézni. A képeket feltöltés előtt kicsinyítsd a megjelenítési méretre és konvertáld WebP-be, a nem használt bővítményeket töröld.

## Hogyan ellenőrizd

Futtasd újra a riportot. A böngésző fejlesztői eszközeinek Hálózat paneljén az összesítő sor mutatja az átvitt méretet; a [PageSpeed Insights](https://hub.hellowp.io/hu/knowledge-base/useful-tools/pagespeed-insights/) a Lighthouse auditjait is megmutatja. Figyelj arra, hogy a böngésződ gyorsítótára és a bejelentkezett állapot eltérő számot adhat, mint a riport: tiszta, privát ablakban hasonlíts.