Lassú weboldal: a rossz pontszám mögött álló nyomkövető szkriptek
Elvégeztél egy PageSpeed-tesztet. Az eredmény piros lett.
Így hát tömörítetted a képeket. Bekapcsoltad a gyorsítótárazást. Telepítetted azt az optimalizáló bővítményt, amit mindenki ajánl.
Az eredmény négy ponttal javult.
Ismerem ezt a helyzetet, mert egy hónapig én is átéltem a saját weboldalamon. Nem a kódom volt a probléma. A probléma mindaz volt, amit ráaggattam.
Analitika. Hirdetési pixel. Csevegő widget. Egy hozzájárulási eszköz, amellyel engedélyt kértem az első kettőhöz.
Egyenként aprónak tűntek, amikor hozzáadtam őket. Együtt viszont nehezebbek voltak, mint az egész oldalam.
Ez azért is fontos a pontszámon túl, mert a Google a Core Web Vitals segítségével méri a valós betöltési viselkedést és ezek a jelzések befolyásolják a rangsorolást. Egy lassú oldal konverziós aránya is rosszabb, mert a látogatók elhagyják az oldalt, mielőtt bármit is látnának.
Ez a cikk bemutatja, hogyan lehet meghatározni a terhelést és mit lehet biztonságosan eltávolítani.
Miért kerül egy nyomkövető szkript többe, mint a fájlmérete?
Egy 50 kilobájtos szkript nem 50 kilobájtba kerül. Hanem egy sor műveletet igényel, amelyek nagy része a látogató telefonján zajlik le.
Nem csak a súly kerül pénzbe. Ugyanezek a külső szkriptek el is tudják rontani az oldalad egyik gombját.
DNS-lekérdezés és új kapcsolat létrehozása. A szkript valaki más domainjén található. A böngészőnek meg kell találnia azt a szervert és biztonságos kapcsolatot kell létesítenie, mielőtt bármit is letölthetne.
Egy második szkript betöltése. Sok címke valójában betöltő. Megérkeznek, majd letöltik azt, ami a tényleges munkát végzi.
A fő szálon eltöltött idő. A szkriptet le kell fordítani és végre kell hajtani. Amíg ez zajlik, a böngésző nem rajzolja ki az oldaladat. Ez az, ami rossz „Interaction to Next Paint” pontszámot eredményez.
Elrendezéseltolódás. Az oldal megrajzolása után megjelenő hozzájárulási sáv lefelé tolja a tartalmat. Ez közvetlenül befolyásolja a „Cumulative Layout Shift” értéket.
„1,0 másodperc körül van az a határ, amelyen belül a felhasználó gondolati folyamata még megszakítás nélkül marad, még akkor is, ha a felhasználó észreveszi a késleltetést.”
Jakob Nielsen, Usability Engineering, 1993
Nielsen ezt még a nyomkövető címkék megjelenése előtt írta. A határ azóta sem változott, mert az emberi figyelemből fakad, nem pedig a hardverből.
Találd meg a súlyt tíz perc alatt
Ehhez nincs szükséged fizetős eszközre. Két ingyenes ellenőrzés is elegendő.
1. Rendezd a kéréseket harmadik felek szerint
Nyisd meg a webhelyedet, nyomd meg az F12 gombot és lépj a „Hálózat” fülre. Töltsd be újra az oldalt.
Rendezd domain szerint. Most válaszd szét a saját domainedről érkező kéréseket a többitől.
Írd le két számot: hány külső kérés van és összesen hány kilobájtot tesznek ki. Ez a második szám jelenti a címkéid tényleges költségét.
2. A fő szálra figyelj, ne a fájlméretekre
Futtass egy PageSpeed Insights tesztet és nyisd meg a harmadik féltől származó kódokra vonatkozó részt. Itt láthatod, hogy az egyes külső szkriptek hány milliszekundumig tartották elfoglalva a fő szálat.
Általában itt érkezik a meglepetés. Az oldaladon a legterhelőbb szkript ritkán a legnagyobb méretű.
Mit tudsz kivágni, sorrendben?
A legnagyobb hatást elérő elemektől kezdve haladj lefelé. Az alábbi sorrend nagyjából megegyezik azzal, amit a saját webhelyemen tapasztaltam.
- A hozzájárulási eszköz. Korán betöltődik, blokkolja a megjelenítést és eltolja az elrendezést. Ha eltávolítod azokat a nyomkövetőket, amelyek miatt szükségessé vált, ez is velük együtt eltűnik.
- A nem használt hirdetési pixel. A legtöbb webhelyen található legalább egy pixel egy már lezárult kampányból. Ha jelenleg nem futtatsz hirdetést, távolítsd el.
- A csevegő widget. Ne az oldal betöltésekor, hanem kattintáskor töltsd be. A buborék maradhat statikus kép, amíg valaki meg nem érinti.
- Beágyazott videó. Használd a cookie-mentes beágyazási módot vagy mutass előnézeti képet és csak akkor töltsd be a lejátszót, amikor valaki megnyomja a lejátszás gombot.
- Maga az analitikai eszköz. Ezt érdemes megtartani. Az eszközök közötti méretbeli különbség azonban jelentős és ezt könnyen ellenőrizheted, mielőtt váltanál.
Még velem vagy? Az utolsó pontban rejlik a fennmaradó terhelés nagy része.
Hogyan lehet őszintén összehasonlítani az analitikai szkripteket?
A szolgáltatók a fájlméretet adják meg. Ez azonban csak a történet legkisebb része. Ehelyett ellenőrizd inkább ezt a három dolgot.
A tömörítés utáni méretet, ne az előttiét. Kérdezd meg az átvitt méretet, vagyis azt, amit a látogató ténylegesen letölt.
Egy kérés vagy több. A szkript betöltése után még valamit betölt?
Gátolja-e a megjelenítést. Egy nyomkövetőnek aszinkron módon kell betöltődnie és soha nem szabad a kritikus útvonalon lennie.
A címkekezelő konténer külön említést érdemel. Kényelmes, de egyben olyan szkript is, amely további szkripteket tölt be. Ha csak egy címkéhez használod, akkor közvetítőnek fizetsz.
Mire ne számíts?
A címkék eltávolítása nem oldja meg a lassú szerver problémáját. Ha a tárhelyszolgáltatónak 800 milliszekundumba telik az első bájt elküldése, azt semmilyen mértékű szkript-lefaragás sem fogja elrejteni.
Nem oldja meg az optimalizálatlan fő kép problémáját sem. Először távolítsd el a címkéket, majd tömörítsd a képet – ebben a sorrendben –, mert a címkék az interaktivitást befolyásolják, a kép pedig azt, amit a látogatók először meglátnak.
A pontszámmal kapcsolatban is legyünk reálisak. Ritkán fordul elő, hogy egy délután alatt a pirosról zöldre váltson az állapot. Gyakori viszont, hogy három szkript eltávolításával a pirosról sárgára váltson.
Hol jön képbe a StatJolt?
A StatJolt szkript mérete néhány kilobyte és aszinkron módon töltődik be, így soha nem gátolja az oldal megjelenítését.
Nem helyez el cookie-kat. Ez azt jelenti, hogy nincs hozzájárulási sáv sem, így a fenti lista legterhelőbb eleme is eltűnik vele együtt.
Emellett a forgalom mellett a Core Web Vitals mutatókat is méri neked. Azt látod, hogy a látogatóid valójában mit tapasztaltak, nem pedig azt, amit egy tesztgép egyszer mérte egy adatközpontból.
Két sor kód és a weboldal sebességével kapcsolatos, már elvégzett munkádat a címkéid többé nem semlegesítik.
Röviden
A PageSpeed-pontszámodat általában harmadik féltől származó szkriptek rontják, nem a saját kódod. Nyisd meg a Hálózat fület, add össze mindazt, ami a domaineden kívülről érkezik és vágd ki a lista elejéről. Az eltávolított címkék visszaadják az interaktivitást, ami az a rész, amit a Google ténylegesen mér.
Cseréld le a GA4-et 2 perc alatt
Elég bemásolnod a kódot és látni fogod, mennyivel áttekinthetőbb. Nincs süti, nincs banner, nincs süti-kezelő. 0 Ft-ért 2027-ig, bármekkora forgalommal.
Vagy marad a másik út: süti-kezelő karbantartása, modellezett adatok és havonta fél óra keresgélés a riportokban.
Kérem az ingyenes fiókom