Webes erőforrások betöltése

Célok

A lecke végére el tudod magyarázni, hogyan fedezi fel a böngésző egy oldal erőforrásait, mit jelent a defer, az async és a loading="lazy", és meg tudod különböztetni az első használható nézethez szükséges és a később is érkezhető erőforrásokat.

Miért számít a betöltés sorrendje?

Egy oldal megnyitása több HTTP-kérésből áll. Ha a böngészőnek mindent meg kellene várnia, mielőtt bármit megjelenít, az oldal lassúnak tűnne. Ha viszont rossz sorrendben tölt be, a felhasználó üres lapot vagy rendezetlen tartalmat lát. Az erőforrások betöltési ideje és sorrendje közvetlenül a felhasználói élményt alakítja.

A fő dokumentum csak a kezdet

A böngésző először a dokumentumot kéri le. A HTML-ben azonban lehet hivatkozás stíluslapra, logóra, fényképre, betűkészletre és JavaScript-fájlra. A böngésző ezekhez további kéréseket indít, és a letöltések egy részét párhuzamosan végzi.

flowchart LR
    H[HTML-dokumentum] --> C[CSS]
    H --> J[JavaScript]
    H --> K[Képek]
    C --> B[Betűkészletek]
    J --> A[Későbbi adatkérés]

Az ábra függőségeket mutat, nem merev időrendet. A betűkészlet például csak azután derül ki, hogy a CSS megérkezett, a JavaScript pedig további adatot kérhet.

Hivatkozások a HTML-ben

<link rel="stylesheet" href="/assets/site.css">
<script src="/assets/course.js" defer></script>
<img src="/images/kurzus.webp" width="640" height="360"
     alt="Hallgatók egy előadóteremben" loading="lazy">

• A link stíluslapot, a script programfájlt, az img képet hivatkozik. Az útvonalak külön URL-ekké oldódnak fel az oldal címéhez viszonyítva (lásd 2.1).
• A kép width és height attribútuma segít helyet foglalni a betöltés előtt, az alt pedig szöveges alternatívát ad.

A script három viselkedése

Az MDN a script elem működését így foglalja össze:

Beállítás	Letöltés	Futtatás
nincs attribútum	megáll az elemzés, amíg letölt	azonnal, megállítva az elemzést
defer	párhuzamos az elemzéssel	az elemzés után, a DOMContentLoaded esemény előtt, a dokumentumbeli sorrendben
async	párhuzamos az elemzéssel	amint letöltődött, sorrend nélkül; közben megállíthatja az elemzést

A defer ezért jó választás olyan programokhoz, amelyek a teljes dokumentumra számítanak. A defer csak külső (src attribútumú) szkriptnél használható, és a modulszkripteknél alapértelmezett.

Kritikus és később szükséges erőforrások

Nem minden fájl ugyanannyira fontos az első használható nézethez. A stíluslap nélkül az oldal rendezetlen vagy (a CSS renderelést blokkoló jellege miatt) üres marad. A lap alján lévő nagy fénykép később is érkezhet, ez nem akadályozza az olvasást. A böngésző prioritásokkal próbálja kezelni, de a fejlesztő döntései is számítanak.

A loading="lazy" attribútum a kép letöltését addig halasztja, amíg a kép egy, a böngésző által meghatározott távolságra nem közelít a nézetablakhoz. A lap alján lévő galériánál hasznos, az első képernyőn lévő fontos képnél viszont hiba. Az MDN három figyelmeztetést is ad: a halasztás csak engedélyezett JavaScript mellett működik, a load esemény előbb tüzelhet, mint hogy a halasztott kép látható lenne, és a width/height megadása halasztott képeknél különösen fontos.

Az erőforrás mérete és eredete

Egyetlen nagy kép, betűkészlet vagy JavaScript-csomag is lassíthatja az oldalt. A méret mellett az is számít, mikor fedezi fel a böngésző az erőforrást, mire vár, és honnan érkezik. A külső szolgáltatásról betöltött elem működési és adatvédelmi függőséget is jelent: ha egy térképes modul szolgáltatója nem elérhető, az oldalnak érdemes továbbra is közölnie a helyszín szöveges címét.

A részhibáknak eltérő tünetei vannak. Ha a CSS-fájl 404-et kap, a HTML megérkezik, de a megjelenés romlik. Ha egy kép hiányzik, a szöveg olvasható marad. Ha a jelentkezési gomb egy későn érkező nagy program után válik használhatóvá, az a felhasználónak jelentős késés.

Végigvezetett példa: mi kell a Kurzuspont kurzusoldalához?

Erőforrás	Mennyire kritikus?	Javasolt kezelés
HTML (kurzusleírás)	alapvető	a szerver válaszában érkezzen
site.css	alapvető (renderelést blokkol)	kicsi legyen, ne késsen
course.js (szűrő)	kényelmi	defer
oktató fényképe az első képernyőn	fontos	nincs lazy, width/height megadva
galéria a lap alján	később is jó	loading="lazy"
külső térkép	opcionális	a cím szövegesen is szerepel

Ezzel az elosztással a felhasználó az olvasnivalót azonnal látja, a kényelmi funkciók pedig utána érkeznek.

Gyakori tévhitek

Állítás	Pontosítás
„Egy oldal egyetlen HTTP-kérés.”	A dokumentum további erőforrásokra hivatkozhat.
„A kevesebb kérés mindig gyorsabb oldalt jelent.”	A méret, az időzítés és a feldolgozás is számít.
„Minden képet érdemes késleltetni.”	Az első nézet fontos képeit időben kell betölteni.
„Ha minden fájl letöltődött, a felület kész.”	A feldolgozás és a későbbi adatkérés tovább változtathatja.
„A defer és az async ugyanaz.”	A defer sorrendben, az elemzés után fut; az async amint kész, sorrend nélkül.

Röviden

• A fő dokumentum további erőforrásokat hív, a böngésző ezeket részben párhuzamosan tölti.
• A defer az elemzés után futtat sorrendben, az async amint kész; a sima script megállítja az elemzést.
• A loading="lazy" a lap alján lévő képeknél hasznos, az első képernyőn káros.
• A kritikus (CSS, alap tartalom) és a kényelmi erőforrásokat el kell különíteni.

Ellenőrző kérdések

1. Miért jobb a defer, mint a sima script egy rövid tájékoztató oldalnál?
2. Mi történik, ha a stíluslap 404-et kap, és mi, ha a kép?
3. Melyik képet nem szabad lazy-vel betölteni, és miért?
4. Mit jelent az, hogy egy erőforrás „kritikus”?

Tanulási források

• <script> elem (MDN) — a defer és async pontos leírása angolul.
• <img> elem (MDN) — a loading attribútum, a width és height szerepe.
• Critical rendering path (MDN) — mi blokkolja a renderelést.