Hogyan lett 10 ponttal jobb a Mobile PageSpeed?

Manapság a mobil netezők száma igen nagy, ezért fontos, hogy gyorsan töltődjön be az oldal. Mobil felületen még inkább szembetűnő, ha nem gyors a weboldal. Ott jobban fáj mindenkinek. Tudjuk jól, hogy a tartalom felszolgálása az elsődleges és hogy annak minél előbb ott kell lennie a kijelzőn. Pár napja írtam egy cikket JavaScript: Google mondja! De igaza van? címmel, ahol azt taglalom, hogy milyen megoldások vannak JavaScript kódunk betöltésére. Hogy néz ki ez a valóságban? Éles példán keresztül nézzük most meg.

Úgy gondoltam, ha már ilyen szépen összeszedtem és bemutattam, hogy melyik módszer milyen hatással van a betöltési sebességre, ami ugyebár a keresők számára sem utolsó, akkor ránézek a [Dev] Folyam.info és a Folyam.info oldalakra is. Olyan 72 és 75 körül mozgott az átlagos Mobile PageSpeed index, ami nem mondom, hogy rossz, de azért nem is jó.

Első lépésben ami nagyon piros volt, mi lett volna, ha nem a JavaScript állományok betöltése. Ezek durván megfogták a böngészőt. Írtam, hogy az onLoad eseményre való betöltés sokat segíthet az oldal sebességének drasztikus növelésében. Legalábbis érzetre, mivel ugyan annyi idő lesz betöltenie a böngészőnek, de a különböző JavaScript fájlokat már csak akkor tölti be, ha az oldal betöltődött. Végülis milyen igaz, amíg nincs ott a tartalom minek Google+ komment, +1, Facebook like meg minden egyéb.

Alap JavaScript struktúra

Mivel a legkevesebb ACK-t akarom elérni az oldal betöltéséig, így a legfontosabb scriptrészeket egyből beágyaztam az oldal aljába. Ez nem más, mint egy nagyon alap Application objektum, aminek van egy delegate és egy init függvénye. Ezen kívül pedig az onLoad lekezelését valósítja meg. A delegate függvénnyel lehet új kódrészt hozzáadni az oldalhoz. Amik ide bekerülnek, azok csak azután futnak le, miután az onLoad esemény elsütését követően betöltődött az összes előre megadott JavaScript fájl. Ezek után szépen végighalad és meghívja mindegyiket.

0

Delegáció

Ezek után szépen felsoroltam a nekem kellő JavaScript kódokat, melyeket nem pakoltam külső fájlba, mert éppen nem érte meg nekem ezért a pár sorért. Lehet Egyszer kikerülnek, így nem is lesz használva, de az mindegy is most. Egy pár példa:

1

Töltsünk be mindent, ha kész az oldal

Már csak az egészet elindító onLoad esemény figyelését kell beállítani és kész is vagyunk. Ez hasonlóan egyszerű kód, hiszen hova bonyolítsuk. Itt gyorsan bele is futottam, hogy az én delegált kódjaimnak csak azután szabad lefutnia, miután már az összes külső fájl betöltődött, így logikusan a scriptek onLoad-ját is figyelni kell, de ezután jött, hogy nekem az összes után kell nem az első után. Nomeg aztán eszembe jutott, hogy a betöltésük sorrendje sem mindegy, mert ha például a jQuery-t használom és akarok hozzá egy kiegészítőt, akkor annak utána kell betöltődnie. Gyorsan el is mentem a Require.js oldalára, de mire betöltődött már fel is fogtam, hogy nem akarom ezzel is lassítani a rendszert. Csak azért, hogy a jelenlegi alacsony számú fájlomat kezeljem felesleges.

Nem maradt más, mint a rekurzió. Imádom és talán őrültje is vagyok, mert ahol lehet használom. Lehet néhe nem kellene, de akkor is. Tehát mikor elsül az oldal onLoad eseménye, akkor meghívok egy függvényt. Ez meghív egy újabb függvényt, ami kiszedi az első elemét a fájllistát tartalmazó tömbből és azt betölti. Beállítja onLoad-ra önmagát, így ha betöltődött az első elem, akkor betölti a tömb első elemét újta, de ugye az előzőt kiszedtem már, így az eredetileg második elem lesz most az első. Az egész függvény persze úgy indul, hogy ha üres, akkor meghívja a paraméterben kapott callback függvényt, amit jelen esetben az eredetileg meghívott downloadJSAtOnload definiált és nem más, mint az Application.init meghívása.

2

Mi történt ezután?

Tulajdonképpen nem lesz gyorsabb a teljes oldal betöltése és nem lett kisebb sem tőle az egész, de túlzottan nagyobb sem. Viszont most nem szórakozik a böngésző a Google, a Facebook vagy a jQuery betöltésével, amíg be nem töltött a tartalom, aminek köszönhetően az oldal betöltési ideje drasztikusan csökkent. Az eredetileg 72/75 pont helyett immáron 85 és 87 pont között mozog.

Egy kis plusz

Az összes képet, amit feltoltam a cikkekhez S3-ra optimalizáltattam az ImageOptim nevű ingyenes alkalmazással. Így nagyon sokat spóroltam az adatmennyiséggel.

imageoptim

Így végül elértem (Heroku ingyenes használattal belassíthatja néha neki) a 91/95 pontos éréket is. Így végülis 20 pont növekedést értem el vele. De a cikk elsősorban a JavaScript részről szólt 🙂

Te milyen praktikákat követsz? Mi az ami szerinted nagyon sokat ronthat az oldal betöltési sebességén és mégis sokan elkövetik a hibát?

Kapcsolódó cikkek:

Git Hooks: Automatikus generálás

preview-150x150 Manapság teljesen bevett szokás, hogy a CSS és JavaScript fájlokat tömörítjük.

Mikor a branchek között mozog az ember, akkor le kell futtatni egy plusz scriptet, hogy ezeket legenerálja. Ugyan így a CSS generáló nyelvek használata, mint a StylusLESS vagy az Sass. Az, hogy ki mit preferál az teljesen egyén és projektfüggő. Én például ha lehet Stylus-t használok, de Bootstrap használatánál sok esetben Less-t használok inkább, mert elérhető hozzá és könnyebb így testre szabni. De miként lehet egyszerűsíteni a folyamaton a Git segítségével?

(tovább…)

Kapcsolódó cikkek:

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?

(tovább…)

Kapcsolódó cikkek: