Indlæs en chat-widget med perfekte Core Web Vitals

Sådan indlæser du en chat-widget på den rigtige måde!

Jeg har sagt det igen og igen. Nogle scripts er vigtigere end andre. Ingen i internettets historie har nogensinde været irriteret over, at en chat-widget ikke er blevet indlæst inden for de første 500ms af sideindlæsningen. Den tid hvor siden stadig er blank.

Det ville ikke give mening, vel, at indlæse en chat-widget før sidens hovedindhold overhovedet er begyndt at indlæse? Nej, det ville give meget mere mening først at indlæse de vigtigste dele (dit logo, dit hovedbillede, dine stylesheets, dine skrifttyper, måske nogle super vigtige scripts der håndterer navigation og konvertering)

Desværre er det ikke sådan de fleste websites gør tingene. Dagligt ser jeg uvigtige scripts (som chat-scripts) indlæse med den højeste prioritet umiddelbart ved starten af sideindlæsningen.

I denne artikel vil jeg forklare, hvordan man korrekt indlæser et chat-script, og hvordan dette påvirker vigtige metrics som Largest Contentful Paint og Interaction to Next Paint.

Baggrund: hvordan fungerer chat-widgets

En chat-widget fungerer normalt ved at indlæse et lille script på din side. Det script vil indlæse nogle styles og indsætte en iframe på din side. En iframe er en lille isoleret webside inden i en webside. Og den iframe vil håndtere alt, hvad der er nødvendigt for at chatte med dine kunder.

Hvordan påvirker chat-widgets Core Web Vitals?

Chat-widgets påvirker Core Web Vitals på flere måder:

1. De påvirker First Contentful Paint og Largest Contentful Paint ved at konkurrere om tidlige netværksressourcer.

2. De påvirker Interaction to Next Paint ved at blokere hovedtråden og nogle gange ved langsomt at opdatere efter interaktion.

3. De kan forårsage layoutforskydninger, når de ikke renderes korrekt på siden

Largest Contentful Paint-problemer forårsaget af chat-widgets

En chat-widget kan påvirke Core Web Vitals, når den konkurrerer om netværksressourcer. JavaScript bliver normalt sat i kø til download tidligere end billeder. Det betyder, at i værste fald (når chat-scriptet er renderblokerende) skal browseren vente på, at chat-scriptet downloades og eksekveres, før den kan fortsætte med noget andet.

Selv når chat-scriptet er deferred, kan det stadig påvirke paint-metrics på flere måder. Lad mig først forklare, hvad deferred scripts gør. Browseren kan downloade deferred scripts parallelt, og browseren kan fortsætte med at rendere indtil DomContentLoaded-eventet. Derefter vil den eksekvere scripts. Problemet er, at for tilbagevendende besøgende vil LCP-elementet sandsynligvis ikke være indlæst ved DomContentLoaded-eventet, men det (cachede) chat-script vil eksekvere og forårsage en forsinkelse i LCP-metrics.

Interaction to Next Paint (INP)-problemer forårsaget af chat-widgets.

En chat-widget kan og vil påvirke Interaction to Next Paint på 2 måder. Den første måde er ved at blokere hovedtråden i kort tid, mens chat-widgetten eksekverer sine scripts eller tjekker for opdateringer. Sådan fungerer tingene bare. Alt hvad du tilføjer til en side vil gøre siden lidt langsommere. 

Den anden måde det kan forårsage INP-problemer er ved dårlig kodning (og tro mig, der er nogle dårligt kodede chat-widgets derude.) Når det gælder chat-widgets, betyder mere populær ikke bedre kodet. Når dårlig kode er lang tid om at opdatere præsentationen, vil du automatisk få INP-problemer. Jeg formoder, at nogle chat-udbydere skal tage sig sammen. Denne del er desværre uden for min kontrol. Hvis du har valgt en dårligt kodet chat-widget, er der ingen måde for mig at gøre den kode bedre. 

Layout Shift (CLS)-problemer forårsaget af chat-widgets

Nogle gange forårsager chat-widgets en layoutforskydning. Der er 3 sædvanlige syndere, som jeg kigger efter, når jeg tjekker for chat-widget-relaterede layoutforskydninger.

• Layoutforskydninger der forekommer hver gang ved chat-indlæsning
• Layoutforskydninger der sker ved en forsinket chat-åbning
• Layoutforskydninger der forekommer, når en chathistorik indlæses (tilbagevendende chatbesøgende)

Sådan løser du Core Web Vitals-problemer forårsaget af chat-scripts

<script>
<script>

Løs Cumulative Layout Shift-problemer forårsaget af chat-widgets

<style>
/*hide chat widget by default*/
.chatwidget{opacity:0}
/*show chat widget after .showchat body class*/
body.showchat .chatwidget {opacity:1}
<style>

<script>
chat.ready(function(){
  document.documentElement.classList.add('showchat');})
<script>

Det var det! Held og lykke med at speede din chat-widget op