JavaScript: Google mondja! De igaza van?

Rengeteg ajánlás van arra, hogy miként dolgoztassuk fel a böngészővel JavaScript kódunkat. De vajon melyik a leghasznosabb? Google ajánlás alapján a teljes oldal betöltése után, azaz onLoad esemény elsütésekor. Milyen változatok terjengenek?

  • Írjuk bele inline kódként, mert akkor nem kell plusz fájlt letölteni, kevesebb szál,kevesebb függő letöltés és így nem pazaroljuk az időt még több ACK-val.
  • Töltsük be a fájlokat külső eléréssel a HTML végén és csapjuk hozzá a defer tulajdonságot, mert akkor a teljes tartalom betöltődik, a felhasználó láthatja a kívánt tartalmat és csak azután “pazaroljuk” az időt.
  • Töltsük be a JavaScript fájlokat aszinkron, mert akkor az nem töri meg az oldalbetöltődési folyamatát.
  • Állítsunk be egy onLoad eseményfigyelőt, ami meghíváskor betölti a JavaScript állományt vagy állományokat.

Nézzük így sorban és derítsük ki, hogy melyik mennyi időt igényel. Abban mind egyetért,hogy az oldal alján legyen az adott tartalom, hogy a felhasználó mielőbb megkapja a kívánt tartalmat. A másik nagyon fontos kérdés a keresőmotorok kérdése. Minden motor azt hangoztatja, hogy beleszól a sorrendbe, az oldal betöltési sebessége, ami egy pontig javítható azzal, hogy nagyobb neten, optimálisabb kódgenerálással és erősebb vason szolgáljuk ki a látogatót. A keresőmotorok számára az oldaltöltés ideje egészen az onLoad eseményig tart. Ez azért sejtet valamit a fenti felsorolásból.

Vegyünk egy alap struktúrát:

0

A JavaScript kód pedig nemes egyszerűséggel egy sima szöveg beszúrás a content azonosítójú div elembe. Hogy érezhetőbb legyen a különbség, mivel ez egy elég kis scirpt lesz, így elhelyezünk egy szüneteltetést is. Ez tulajdonképpen azt hivatott helyettesíteni, hogy a kódunk betöltéséhez, feldolgozásához és az esetleges nem eseményvezérelt kódrészek futtatásához idő kell, ami most ugyebár nagyon kicsi. Altassuk el mondjuk 3 másodpercre (3000 ms).

1

Google álláspontja a negyedik változatot képviseli, ami így néz ki:

2

Inline JavaScript (3.01s)

Példa: source/inline-javascript.html

inline-javascript

Külső hivatkozás (3.01s)

Példa: source/external-javascript.html

external-javascript

Aszinkron betöltés (3.02s)

Példa: source/async-javascript.html

async-javascript

onLoad esemény (8ms)

Példa: source/onload-javascript.html

onload-javascript

Konklúzió?

Láthatóan nem sok különbség van a betöltési időkben, tehát az első három esetben tulajdonképpen teljesen mindegy, hogy melyik változatot használjuk, viszont a negyedesetben – bár késleltetve töltődik be a JavaScript kódunk – az oldal betöltési ideje drasztikusan csökkent. A keresőmotoroknak pedig ez a fontos nem pedig a JavaScript kódbázis feldolgozottsági állapota. Mivel alapértelmezetten illik egy oldalnak működnie JavaScript nélkül is, így nem kellene, hogy problémát jelentsen egy kis (100-200ms) késleltetés. Persze itt most durva csúszás van benne, de szerintem nincs olyan kód, amit normálisan megírtak és 3 másodpercig dolgozik rajta a rendszer. Ha igen, akkor lehet újra kellene írni 🙂

Kapcsolódó cikkek:

Balazs Nadasdi

Developer, Project Manager, Blogger, Dad... or sometihng like these