Oldalsúly

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 és a Képméretek, lusta betöltés 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 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 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 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.