En kundeservicewidget bør være raskt tilgjengelig uten å konkurrere med siden den skal hjelpe. Vi bygde lastesekvensen i Lavenity om rundt akkurat den grensen: tegn den lille knappen først, og forbered så hele samtaleopplevelsen når nettleseren har plass.
Derfor lastes knappen for seg
Innbyggingslasteren er 8 058 byte ukomprimert og 2 947 byte med gzip i den nåværende produksjonsbyggingen. Den lastes med en async script-tagg, injiserer et lite isolert stilark og lager knappen med rene nettleser-API-er. Vue, samtalehistorikk, WebSocket-oppsett og ekstern arbeidsromskonfigurasjon trengs ikke før knappen kan vises.
Den tyngre chat-applikasjonen holder seg isolert i en iframe. Etter at knappen er montert, ber Lavenity requestIdleCallback om å forhåndslaste rammen, med et tidsavbrudd som reserveløsning. Det holder rammen unna vertssidens første tegning, samtidig som den første åpningen føles klar. Klikker en besøkende før den ledige oppgaven kjører, starter det samme idempotente rammeoppsettet umiddelbart.
Dette målte vi
Vi endret også hurtigbufringen for den faste widget.js-adressen. Lasteren kan holde seg fersk i fem minutter og revalideres i bakgrunnen i ett døgn. Gjenbesøk kan derfor tegnes fra hurtigbufferen uten å vente på en blokkerende valideringsforespørsel, mens oppdateringer av lasteren likevel sprer seg raskt.
21. juli 2026 kjørte vi fem lokale Chromium-målinger med tømt hurtigbuffer, fra skriptet ble satt inn til knappen var klar. Knappen kom inn i DOM-en på 2,9–3,6 ms og nådde neste tegning på 4,4–8,8 ms. De tallene isolerer nettleserens kjøring på en lokal server; de inkluderer ikke en ekte besøkendes DNS, TLS, geografiske forsinkelse, enhetslast eller CDN-vei.
Hurtigbuffer, iframe-lasting og det reelle hastighetsbudsjettet
Det gir et praktisk budsjett på rundt 100 ms for knappen på en rask forbindelse eller et bufret besøk — snarere enn å gjøre 100 ms om til et universelt løfte. Faktiske tider vil variere, så vi fortsetter å måle persentiler i produksjon etter hvert som trafikken vokser. Det nyttige tekniske resultatet er at det lokale arbeidet tar under 10 ms og at nettverksoverføringen bare er 2,9 kB gzip.
Den synlige knappen er nå den billigste delen av opplevelsen, og hele appen venter på tur. Det er den oppførselen vi vil ha fra innebygd kundeservice: til stede når kunden trenger den, stille mens resten av nettstedet lastes.
Slik tester du chat-widgeten på ditt eget nettsted
Mål minst to tilstander: et førstegangsbesøk med tom hurtigbuffer og et gjenbesøk. Sjekk når knappen dukker opp, endringer i Largest Contentful Paint og Total Blocking Time, og tiden det tar å åpne hele chatten. Én lokal kjøring kan ikke representere et mobilnett, en tregere enhet eller geografisk forsinkelse.
Sammenlign den samme siden under de samme forholdene, i stedet for å sammenligne overskriftstall fra urelaterte kjøringer. Er widgeten installert gjennom en tag manager, ta med forsinkelsen fra beholderen. Knappen kan kjøre raskt, men vises sent på grunn av rekkefølgen på tagger, samtykkeregler eller andre skript foran den.
Ofte stilt spørsmål
Betyr «under 100 ms» den samme tiden for hver besøkende?
Nei. Det er et praktisk budsjett for et raskt eller bufret besøk, ikke en universell garanti. Faktisk tid avhenger av nettverket, enheten, CDN-et, skriptrekkefølgen og hvordan siden lastes. I våre lokale målinger holdt selve kjøringen av knappen seg under 10 ms.