A magyar webshop-tulajdonosok 40%-a aggódik: „a chat widget vajon lelassítja a webshopomat?”. Ez a cikk konkrét számokkal mutatja meg, mit jelent a ShopChatly widget terhelése, és hogyan optimalizálható tovább.
A számok dióhéjban
A ShopChatly chat widget egyszeri terhelése:
| Mutató | Érték |
|---|---|
| JS bundle méret | ~85 KB (gzip-elve), 220 KB unzippolva |
| HTTP-kérés | 1 db (a unaschat.js scriptre) |
| Betöltési idő (4G mobil) | 0,3-0,5 sec |
| Betöltési idő (asztali / wifi) | 0,1-0,2 sec |
| Rendering idő | < 50 ms |
| LCP-hatás (Largest Contentful Paint) | +0 (semmi) |
| CLS-hatás (Cumulative Layout Shift) | +0 (semmi) |
| TBT-hatás (Total Blocking Time) | +10-20 ms |
A Google Lighthouse pontszám-csökkenés: 0-3 pont (általában 0). Ezt alig észreveszi a Search Console.
Hogyan lett ennyire könnyű?
A widget tervezésekor 4 elv:
1. Lazy-load — csak kattintásra él
A widget 2 fázisban töltődik:
Fázis 1 (azonnal, 12 KB): a chat-buborék (kis kerek gomb a jobb alsó sarokban). Csak ennyi tölt be a webshopod megnyitásakor.
Fázis 2 (kattintásra, 73 KB): a teljes chat-felület (üzenetek, gombok, GDPR-banner) csak akkor töltődik, amikor a vásárló a buborékra kattint.
A 90%-ban, aki nem nyitja meg a chatet, csak 12 KB terhelést kap. A 10%-os aki kattint, kapja a teljes 85 KB-ot.
2. Async + defer
A unaschat.js script async attribútummal töltődik. Ez azt jelenti, hogy:
- A böngésző párhuzamosan tölti le a webshopod többi tartalmával
- A script nem blokkolja a HTML-renderelést
- Az LCP (a vásárló-érzékeli betöltési idő) nem változik
3. Shadow DOM izolálás
A chat-widget egy Shadow DOM-on belül él. Ez azt jelenti:
- A widget CSS nem keveredik a webshopod CSS-ével
- A vásárló-felület nem fut konfliktusba a chat stílusokkal
- A webshop layout-ja 0 elmozdulást kap a chat megnyitásakor
4. Lit framework
A widget a Lit könyvtárral van építve — egy 6 KB-os micro-framework. Sokkal kisebb, mint pl. egy React-alapú chatbot (300+ KB).
Hogyan teszteld te is
1. Google PageSpeed Insights
A webshopod URL-jére futtasd le a PageSpeed Insights tesztet a chat widget bevezetése előtt és után.
Tipikus magyar webshop:
- Chat widget nélkül: 65-85 mobil pont
- Chat widget-tel: 64-85 mobil pont (azonos vagy max -1 pont)
2. WebPageTest waterfall
A webpagetest.org részletes „waterfall” diagramot ad. A unaschat.js ott látható mint párhuzamos kérés — sose kritikus útvonalon (critical path).
3. Chrome DevTools Network
Lokálisan:
- Nyisd meg a webshopod Chrome-ban
- F12 → Network tab
- Filter:
unaschat - Frissíts (Ctrl+R)
A unaschat.js általában a 0,3-0,8 másodperc közötti időpontban jelenik meg (ekkor töltődnek a háttér-scriptek), és <200ms alatt letöltődik.
Mit ne csinálj
1. Ne tedd a <head>-be a script-et szinkron módon
A wizard 7. lépésében generált script body end típusú — vagyis a HTML végén van. Ne mozgasd a <head>-be — az lassítja a webshopodat (a script blokkol-ja a renderelést).
2. Ne futtass több chatbot-szolgáltatót egyszerre
Néha látunk webshopokat, ahol Tidio + ShopChatly + Smartsupp mind fut. Mindegyik 50-150 KB-ot tesz hozzá → összesen 0,5-1 MB. Ne csináld — válassz egyet.
3. Ne tedd ki minden oldalra ha csak a homepage-en érdemel
Ha a webshop kategória-oldalain csak böngésznek a vásárlók, és a chatbot ott nem ad sok értéket, kihagyhatod a beszúrást ezekről az oldalakról. UNAS adminban: Beállítások → Kinézet → Szkript beszúrás → Oldalak szerinti szűrés mező — itt kihagyhatsz oldalakat. De általában a teljes webshopra érdemes (a chatbot a kategórián is kezdhet egy „Mit keresel?” segítséget).
Core Web Vitals — pontos hatás
A Google 3 fő mutatót mér:
LCP (Largest Contentful Paint)
A weboldal legnagyobb elemének betöltése. A chat widget nem változtat ezen — async-tölt, a hero-kép és a fő szöveg gyorsabban tölt mint maga a widget.
CLS (Cumulative Layout Shift)
A layout elmozdulása betöltés közben. A chat widget 0 elmozdulást okoz — Shadow DOM-os, fixed positioned, tehát nem tolja el a többi elemet.
INP (Interaction to Next Paint)
A felhasználói interakcióra érkező első paint. A chat-buborékra kattintás kb. 60-80 ms — a Google „jó” kategóriába esik (<200 ms).
A 14 napos próba sebesség-szempontból
A próba alatt:
- Bekapcsolod a chatbotot a webshopodon
- Lighthouse-mérés a saját adminoddal — előtte és utána
- Ha 5+ pont csökken mobilon, írj ne — ott valami konfiguráció-probléma lehet
- Az ipari átlag: 0-2 pont csökkenés
Próbáld ki itt — bankkártya nem kell.