Miért rontja le a weboldalam sebességét a Facebook?
Ahogy a cím sejteti, valóban létezik egy olyan probléma, hogy egy kész, gyors weboldal abban a pillanatban amikor harmadik fél programokat futtatunk belassul. Ennek a problémának számos megoldása létezik, de igazán jól nem működik egyik sem. Hacsak nem valamilyen „hack” avagy nem szokványos de jobb megoldással élünk.
Mi is a probléma? Itt felsorolom a különböző megoldásokat, mindegyikkel volt valami baj ami szükségessé tette a következő létrejöttét. Talán ez így még időrendi úgymond evolúciós sorrend is, a végén a saját egyedi megoldásunkkal amit mi úgy gondolunk a jelenlegi legjobb megoldás.
Szinkron betöltés:
A harmadik fél kódrészlet beszúrása (jellemzően javascripteket jelent) amik az oldal betöltődését késleltetik. Ez a klasszikus fehér képernyő, amikor az oldal nem tölt be egyből, hanem előtte a képernyő fehér marad. Ez a „fehér villanás” jelenség nagyban rontja nemcsak a sebesség eredményeinket és ennek folyományaként a keresőben elért eredményeket, hanem a felhasználói élményt és pocsékká teszi.
Zöld: HTML (Weboldal) töltés
Lila: Javascript letöltés
Piros: Javascript futtatás
Szürke: Várakozás
Késleltetett futtatás:
Az előbbi problémára jött megoldásként a késleltetett módon beszúrt scriptek (kódrészletek) amik már nem okoznak fehér villanást. Ez azt jelenti, hogy jellemzően a „body” weboldal látható részének az utolsó sorába szúrunk be egy olyan kódot, ami a fejlécbe illeszti a kívánt kódrészletet letöltő javascriptet. Ezzel az a baj, hogy lehet később szúrtuk be, de annak még mindig le kell töltenie, hogy az oldalletöltés úgymond kész legyen.
Aszinkron betöltés:
Itt az előbbiekkel kapcsolatban a kódot nem a tartalom „body” végére, hanem a fejlécbe „header” szúrjuk így a kódok párhuzamosan töltődnek le és akár párhuzamosan is futhatnak le. (async vagy defer) Ez egy elég jó megoldás mi is ezt használjuk, mondjuk a Google analytics kód futtatására. Viszont a Facebook és jellemzően a Social és Chat alkalmazások, túl nagyok így sokat kell letölteni és túl sokat is futtatnak így leterhelik a fő szálat. Ezt a terhelést a modern sebesség tesztek, mint mondjuk a Google Page Speed insight egyből észreveszik és komolyan lepontozzák az oldalt. Ez végső soron visszaesést is jelenthet a keresőben.
Tényleges késleltetés + szünet:
Ebben az esetben az oldal tényleges betöltése után töltjük be a javascript kódot egy külön javascript fájlban. Ez azért szuper, mert a betöltés ténylegesen késleltetett, vagyis az oldal betöltése esemény után történik jóval. A sebesség tesztek az interaktivitásig eltelt időt (is) tesztelik, így itt problémánk lehet, mert igaz kisebb a terhelés, de nagyon elnyújtjuk. Viszont ha ide beteszünk egy pici további szünetet (ezzel időt adunk a rendelnek), akkor az oldal betöltődése és interaktivitása utánra tudjuk tolni a külső forrásnak a letöltését és a futtatását is.
És igen, ez így jó a felhasználónak is, mert az mondjuk, hogy ennek a cikknek az alján a Facebook Like és Megosztás gomb 2 másodperccel az oldal betöltése után jelenik meg nem igazán szembeötlő. Főleg, hogy az mélyen a hajtás alatt található, vagyis a látogatónak végig kell olvasnia vagy görgetnie az oldalt mire odaért. És ez a 2 kicsi gombocska nem is szerves része az oldalnak.
A valóságban ez mit jelent?
A ShopteQ-be bejelentkezve mint admin (weboldal tulajdonos) a kód beillesztése menüpont alatt, 3 helyen lehet beszúrni Javascript kódot. 1. Fejléc eleje (header), 2. törzs (body vége), 3. ténylegesen késleltetett. Itt csupán a megszokott hely helyett a ténylegesen késleltettet elnevezésű szövegdobozba kell másolni a kódunkat.
Akkor lássuk az eredményeket:
Itt a 2 legjobb megoldást mutatom be, a Facebook által ajánlott aszinkron betöltést és a saját fejlesztésű valós késleltetést.
Facebook Aszinkron betöltődés
Ez a legújabb és leggyorsabb hagyományos betöltése az FB SDK-nak (aszinkron scriptként)
Az interaktivitásig eltelt idő az első processzor üresjárat és a becsült bemeneti késés mind piros lett és tulajdonképpen ideiglenesen megfagyasztotta az oldalt. Felhasználói szempontból ez nagyon zavaró, ez történik akkor, amikor megnyitunk egy oldalt, az gyorsan betöltődik, de hosszabb ideig nem tudunk görgetni vagy klikkelni, az oldal semmire nem reagál mintha lefagyott volna a készülék.
FB valós késleltetés ugyanazon az oldalon pár perccel később a beállítások átszerkesztése után.
Ebben az esetben minden zöld és az oldal ahhoz képest amennyi plusz kódot kell betöltenie (van facebook chat) hihetetlen szép eredményeket produkál. Természetesen az első tartalom megjelenési ideje nem lesz kevesebb, de az oldal szépen interaktívan jelenik meg. Pihen 2 másodpercet majd a háttérben tölti majd le és futtatja a plusz tartalmakat ami akkor már nem okoz lassulást.
Konklúzió:
Gyors weboldal az, ami gyors is marad, még akkor is ha feldíszítjük külső forrásokkal. És ha belegondolunk, mennyi pluginre (3. fél program) lehet szükségünk a lista szinte végtelen, mindez a hagyományos módon beillesztve biztosan megeszi a weboldal sebesség eredményét. Nálunk viszont a sebesség nem utógondolat és mi mindig gyorsak maradunk.
Nézz és láss:
Próbáld ki! Ezen az oldalon is van Facebook like és Megosztás gomd picivel lentebb. Görgess oda és frissítsd az oldalt, azt fogod látni, hogy az oldal újratöltése után 2 másodperc késéssel fognak megjelenni a Facebook gombok. Ha már ott vagy használhatod is :-)
(Ezek a gombok eleve csak akkor jelennek meg ha engedélyezted a marketing sütiket, ha nem, akkor ezt bármikor megtehed a láblécben a süti kezelési beállításokra klikkelve. Változtatás után töltesd újra az oldalt)
2019 Mar 30 - Szabó Zoltán
Vélemények
Még nincs vélemény ehhez a cikkhez legyél te az első aki véleményezi
Szeretne egyszer webáruházat de nem éppen most!
Mindent elmondunk amit érdemes tudni az e-kereskedelemről
Ingyenes anyagok