Mit tehetsz az oldalad sebességének javítása érdekében, ha harmadik féltől származó szkriptek lassítják azt?
Harmadik féltől származó szkriptek lassítják weboldalad?
Néha a harmadik féltől származó szkriptek csökkentik a weboldal teljesítményét, lassítják az oldalak betöltését.
Ezek olyan szkriptek, amiket egy másik szerverről kell letölteni, és bizonyos esetekben a betöltődésük időigényes lehet, vagy akár blokkolhatják az oldal megjelenítését – mindez pedig elmaradt eladásokat eredményezhet a vállalkozásod számára.
Harmadik féltől származó szkriptek betöltési idejének javítása
A valaki más szerverén található JavaScript betöltésének javítása nyilvánvalóan elég komoly kihívás, mivel nem vagy abban a helyzetben, hogy a jobb teljesítmény érdekében átírj belőle bármit is. Nehéz nyomon követni és kijavítani a külső kód által okozott hibákat. Van azonban néhány dolog, amivel javíthatsz a betöltés idején és módján.
Mit tehetsz a weboldal teljesítményének javítása érdekében, ha az a harmadik féltől származó szkriptek miatt lassú?
Harmadik féltől származó szkriptek lassítják az oldalad? Bízd ránk. 300+ Optimalizált weboldal. 90-100% a Google Core Web Vitals Tesztjein! ⚡
Számos javítási lehetőség és mód van arra, hogy javítsd weboldalad teljesítményét és az oldalad betöltési sebességét.
Néhány hasznos gyakorlat, amellyel elkerülhető a harmadik féltől származó címkék negatív hatása:
Kerüld a harmadik féltől származó szkriptek blokkolását
Kerüld a szkriptek blokkolását. Az A/B teszt szkriptek fejlesztői általában figyelembe veszik a teljesítmény kérdését, és általában nem blokkoló módszert kínálnak a szkriptjeik weboldalba való beépítésére. Az aszinkron szkriptbetöltés és a timeout mechanizmusok segíthetnek elkerülni a blokkoló szkripteket.
Használj defert vagy aszinkronizálást, ahol lehet
A JavaScript alapértelmezés szerint render-blokkoló. A böngésző elkezdheti a HTML elemzését, találkozhat egy szabályos szkript taggel, majd szüneteltetheti az oldal renderelését, amíg letölti és végrehajtja a JavaScriptet.
A HTML elemzés blokkolásával megnő az oldal betöltési ideje, és bizonyos esetekben (ha a JavaScript letöltése vagy végrehajtása hosszú időt vesz igénybe) ez a késedelem igen jelentős lehet. A böngésző alapértelmezés szerint azért teszi ezt, mert nem tudja biztosan, hogy a JavaScript mit tartalmazhat – teljesen megváltoztathatja az oldal tartalmát, ezért várnia kell, amíg letöltődik és végrehajtódik.
De az async vagy a defer attribútumokkal megmondhatjuk a böngészőnek, hogy ne blokkolja a tagolást.
Async
Az async attribútum azt mondja a böngészőnek, hogy folytassa a HTML-dokumentum elemzését, amíg letölti a JavaScript-fájlt, de csak a JS végrehajtásának idejére blokkolja az elemzést.
Az async attribútum hozzáadása elég egyszerű – az „async” hozzáadása a script taghez a következőképpen:<script async src=”/your-file.js” />
Defer
A defer attribútum még jobb a teljesítmény szempontjából – ez azt mondja a böngészőnek, hogy a letöltés közben folytassa a HTML elemzését, és csak akkor hajtja végre a JavaScriptet, amikor a HTML elemzése befejeződött.
Egy JavaScript-fájl halasztása ugyanilyen egyszerű – így néz ki az ehhez szükséges kód: <script defer src=”/your-file.js” />
Fontos azonban, hogy ezt nem szabad olyan szkripteknél használni, amelyek feltétlenül kritikusak az oldal betöltése szempontjából, és amelyeket korán végre kell hajtani. Az olyan könyvtárak, mint a jQuery, kritikusak lehetnek, mivel gyakran az elrendezéshez használják őket, ezért nem ajánlott ezeket elhalasztani – de az olyan dolgok, mint az analitika vagy a reklámkövetés betöltésének elhalasztása némi teljesítményelőnyt jelenthet.
A JavaScript betöltésének elhalasztása nagy hatással lehet a betöltési időre.
Légy körültekintő a halasztáskor (defer használatakor)
Nagyon fontos, hogy amit elhalasztasz, azt alaposan teszteld egy staging környezetben, mielőtt élesben is bevezeted. Biztosnak kell lenned abban, hogy nem halasztasz el véletlenül sem egy olyan JavaScriptet, amely szükséges az oldal korrekt betöltéséhez, vagy hogy nincs semmilyen nem kívánt mellékhatása – ezért alaposan tesztelned kell a bevezetés előtt.
Minimalizáld a megosztott nyilvános CDN-ekkel kapcsolatos kockázatokat
Minimalizáld a megosztott nyilvános CDN-ekkel kapcsolatos kockázatokat, amelyeket az olyan szkriptek, mint például a jQuery tárolására használnak. A nyilvános CDN-ek csökkentik az infrastruktúra terhelését a hálózati sávszélesség tekintetében, miközben magasabb gyorsítótár-találati arányt ígérnek. Használatukkal azonban fennáll annak a kockázata, hogy ezek a szolgáltatások leállnak, valamint a további DNS-kérelmek hatása. A böngészőoldali gyorsítótár találati arányának javulása mindenesetre csak elméleti előny, amelyet nem lehet bizonyítani. Ezért érdemes megfontolni a szkriptek letöltését a szerveredről, ha a CDN nem reagál.
Kerüld a Tag Managerek használatát, ha kevés harmadik féltől származó címkét használsz
Kerüld a Tag Managerek (például a Tag Commander vagy a Google Tag Manager) használatát, ha csak néhány (azaz kevés) harmadik féltől származó címkét használsz. A címkekezelő használata ilyen esetekben egyszerűen azt jelenti, hogy feleslegesen további kéréseket küldesz.
Ezzel szemben használj címkekezelőt, ha sok harmadik féltől származó címkével rendelkezel
Ezzel szemben használj címkekezelőt (Tag Managereket), ha sok harmadik féltől származó címkével rendelkezel. Ezzel jól ki tudod majd használni az adatréteget. A címkekezelők azt is lehetővé teszik, hogy prioritásokat határozz meg, hogy mely címkéket kell vagy nem kell betölteni, és lehetővé teszik, hogy elkerülje a lassú szkriptek betöltését.
Rendszeresen auditáld a Google Tag Manager-t
A tag managerek, mint például a széles körben használt Google Tag Manager, nagyszerűen lehetővé teszik, hogy az emberek nyomkövető címkéket adjanak hozzá a webhelyhez anélkül, hogy egy fejlesztőre kellene hagyatkozniuk a felvételhez. A címkék hozzáadásának megkönnyítése azonban azzal a hátránnyal jár, hogy könnyen rengeteg címkét lehet hozzáadni, és az emberek gyakran nincsenek tisztában azzal, hogy ezeknek milyen hatásai lehetnek a teljesítményre.
Sok esetben ugyanis az lesz az eredmény, hogy rengeteg elavult nyomonkövetési címke, vagy olyan termékek címkéi jelennek meg, amelyeket senki sem használ, de mégis betöltődnek az oldalra.
Érdemes rendszeresen átnézni a címkekezelőt, hogy ellenőrizd, mely címkéket tölti be. Ha vannak olyan marketingplatformokhoz tartozó címkék, amelyeket már senki sem használ, akkor potenciálisan javíthatod a webhely teljesítményét, ha egyszerűen eltávolítod (vagy szünetelteted) ezeket a címkéket.
Harmadik féltől származó szkriptek lassítják az oldalad? Bízd ránk. 300+ Optimalizált weboldal. 90-100% a Google Core Web Vitals Tesztjein! ⚡
Figyeld a harmadik féltől származó címkék válaszidejét
Figyeld a harmadik féltől származó címkék válaszidejét a Resource Timing API segítségével. Ez lehetővé teszi a lassú szkriptek észlelését. Ezeket az adatokat egyéni dimenziók segítségével akár a Google Analyticsbe is elküldheted.
Használj workereket
A Services Worker-ek segítségével állítsd be a címkék maximális válaszidőkorlátjait.
Preconnect és dns-prefetch erőforrás-hintek használata
Néhány harmadik féltől származó JavaScript esetében előnyös lehet a preconnect (kritikus fájlok esetében) vagy a dns-prefetch (kevésbé kritikus fájlok esetében) használata.
Amikor a böngésző egy oldalt renderel, és egy olyan eszközre (például egy JavaScript-fájlra, képre vagy betűtípusra) vonatkozó kérést fedez fel, amelyet egy másik tartományban tárolnak, új kapcsolatot kell létrehoznia az adott tartományhoz. Ez az új kapcsolat némi beállítási időt vehet igénybe, amikor a böngésző megkeresi a tartománynevet, kapcsolatot létesít az új kiszolgálóval, és tárgyal az SSL-ről. Ez gyakran 500-300 ms körül lehet (ami nem hangzik soknak, de összeadódik és úgy már sok lesz).
Elég gyakori, hogy a böngészők az oldal betöltése során különböző pontokon fedezik fel a harmadik féltől származó eszközöket – ami azt jelenti, hogy ezek a kapcsolatok az oldal renderelése során végig megtörténhetnek. A legtöbb esetben jobb lenne, ha ezek a kapcsolatok előre, párhuzamosan jönnének létre. És ez az, amit a preconnect resource hint tesz.
A kritikus eszközök (például a CDN-ből származó képek) esetében teljesítménynövekedést érhetsz el, ha a böngészőnek megmondod, hogy előzetesen csatlakozzon a harmadik fél tartományaihoz, ahonnan az eszközöket le fogja kérni, egy preconnect link tag beillesztésével a fejben: <link rel=”preconnect” href=”https://cdn.example.com”>
A kevésbé kritikus harmadik féltől származó eszközök esetében, amelyek nem szükségesek az oldal rendereléséhez, például az analitika, használhatod a dns-prefetchet, hogy a böngésző elvégezze a kezdeti DNS-beállítást:
<link rel=”dns-prefetch” href=”//www.googletagmanager.com”>
<link rel=”dns-prefetch” href=”//www.google-analytics.com”>
A domainnév feloldásának beállítási ideje gyakran 20-100 ms között lehet, ezért segíthet, ha ezt az egészet előre, párhuzamosan, nem pedig az oldal betöltése során szakaszosan végezzük el.
Mint sok más dolog esetében, ezt is fontos tesztelni, hogy megbizonyosodjunk arról, hogy valóban teljesítményjavulást eredményez-e a webhelyen. Ha valós felhasználói megfigyelő eszközt használsz, akkor ellenőrizd a hatást, amikor a változás már élesben működik.
Konklúzió
Csökkentsd a harmadik féltől származó kódok hatását
Manapság már nem nagy titok, hogy a weboldal sebessége fontos tényező. Minél gyorsabb az oldal betöltési ideje, annál jobb a konverziós arány és annál magasabb az átlagos bevétel.
Minden oldalelem teljesítményköltséggel jár, de néhány elem nagyobb hatással van az oldal teljesítményére. Lehet, hogy sok időt töltöttél a tartalom sebességének optimalizálásával, de az oldalad még mindig lassan töltődik be. A harmadik féltől származó tartalmak ellenőrzése egy jó kiindulópont, ha néhány ilyen teljesítménybeli akadályt orvosolni szeretnél.
Már néhány külső szolgáltatás is nagy hatással lehet az oldal sebességére. A harmadik féltől származó teljesítményt nem szabad figyelmen kívül hagyni, és kéz a kézben jár az onsite és backend optimalizálással. Amint láthattad, sok mindent lehet tenni a weboldal gyorsítása érdekében, különösen, ha mindezt egy jó fejlesztőre bízod. A választás a tied, hogy hogyan teszed gyorsabbá a weboldalad.
