En supportwidget ska vara tillgänglig snabbt utan att konkurrera med sidan den ska hjälpa. Vi byggde om Lavenitys laddningsväg kring den gränsen: rita först den lilla knappen, och förbered sedan hela samtalsupplevelsen när webbläsaren har utrymme.
Varför knappen laddas separat
Inbäddningsladdaren är 8 058 byte okomprimerad och 2 947 byte med gzip i den aktuella produktionsbygget. Den laddas med en asynkron skripttagg, injicerar ett litet isolerat stilmall, och skapar knappen med rena webbläsar-API:er. Vue, samtalshistorik, WebSocket-uppsättning och fjärrkonfiguration av arbetsytan krävs inte innan knappen kan dyka upp.
Den tyngre chattapplikationen förblir isolerad i en iframe. När knappen monterats ber Lavenity requestIdleCallback att förladda den ramen, med en tidsgräns som reserv. Det håller ramen borta från värdsidans första rendering samtidigt som den första öppningen känns redo. Klickar en besökare innan vilouppgiften körts startar samma idempotenta ramuppsättning omedelbart.
Vad vi mätte
Vi ändrade också cachningen för den fasta adressen till widget.js. Laddaren kan vara färsk i fem minuter och omvalideras i bakgrunden under ett dygn. Återbesök kan därför renderas ur cachen utan att vänta på en blockerande valideringsbegäran, medan uppdateringar av laddaren ändå sprids snabbt.
Den 21 juli 2026 körde vi fem lokala Chromium-mätningar med tömd cache, från att skriptet infogades till att knappen var klar. Knappen kom in i DOM:en på 2,9–3,6 ms och nådde nästa målning på 4,4–8,8 ms. De talen isolerar webbläsarens körning på en lokal server; de inkluderar inte en verklig besökares DNS, TLS, geografiska latens, enhetsbelastning eller CDN-väg.
Cachning, iframe-laddning och den verkliga hastighetsbudgeten
Det lämnar en praktisk budget på ungefär 100 ms för knappen på en snabb uppkoppling eller ett cachat besök, snarare än att göra 100 ms till ett allmänt löfte. Verklig tid varierar, så vi fortsätter mäta percentiler i produktion när trafiken växer. Det användbara tekniska resultatet är att det lokala arbetet tar under 10 ms och att nätverksöverföringen bara är 2,9 kB gzip.
Den synliga knappen är nu den billigaste delen av upplevelsen, och hela appen väntar på sin tur. Det är det beteende vi vill ha av inbäddad support: närvarande när kunden behöver den, tyst medan resten av sajten laddar.
Så testar du chattwidgeten på din egen sajt
Mät minst två tillstånd: ett första besök med tömd cache och ett återbesök. Kontrollera när knappen dyker upp, förändringar i Largest Contentful Paint och Total Blocking Time, och tiden det tar att öppna hela chatten. En enda lokal körning kan inte representera ett mobilnät, en långsammare enhet, eller geografisk latens.
Jämför samma sida under samma förutsättningar i stället för att jämföra sammanfattande poäng från orelaterade körningar. Installeras widgeten via en tagghanterare, räkna in containerns fördröjning. Knappen kan köras snabbt men ändå dyka upp sent på grund av taggordning, samtyckesregler, eller andra skript som ligger före.
Vanlig fråga
Betyder ”under 100 ms” samma tid för varje besökare?
Nej. Det är en praktisk budget för ett snabbt eller cachat besök, inte en allmän garanti. Den verkliga tiden beror på nätverket, enheten, CDN:et, skriptordningen och sidans laddning. I våra lokala mätningar höll sig själva körningen av knappen under 10 ms.