Carica un widget di chat con Core Web Vitals perfetti

Carica un widget di chat che non interferisca con PageSpeed e i Core Web Vitals

Arjen Karel Core Web Vitals Consultant
Arjen Karel - linkedin
Last update: 2026-02-07

Come caricare un widget di chat nel modo giusto!

L'ho detto e ripetuto. Alcuni script sono più importanti di altri. Nessuno nella storia di internet si è mai infastidito se un widget di chat non è stato caricato nei primi 500ms del caricamento della pagina. Quel momento in cui la pagina è ancora bianca.

Non avrebbe senso, giusto, caricare un widget di chat prima ancora che il contenuto principale della pagina abbia iniziato a caricarsi? No, avrebbe molto più senso caricare prima le parti più importanti (il tuo logo, la tua immagine principale, i tuoi fogli di stile, i tuoi font, magari alcuni script super importanti che gestiscono la navigazione e la conversione).

Sfortunatamente questo non è il modo in cui fa le cose la maggior parte dei siti web. Quotidianamente vedo script non importanti (come lo script della chat) caricarsi con la massima priorità immediatamente all'inizio del caricamento della pagina.

In questo articolo spiegherò come caricare correttamente uno script di chat e come questo influisce su metriche importanti come il Largest Contentful Paint e l 'Interaction to Next Paint.

Background: come funzionano i widget di chat

Un widget di chat di solito funziona caricando un piccolo script sulla tua pagina. Quello script caricherà alcuni stili e inietterà un iframe sulla tua pagina. Un iframe è una piccola pagina web isolata all'interno di una pagina web. E quell'iframe gestirà tutto ciò di cui ha bisogno per chattare con i tuoi clienti.

In che modo i widget di chat influiscono sui Core Web Vitals?

I widget di chat influiscono sui Core Web Vitals in alcuni modi:

1. Influiscono sul First Contentful Paint & Largest Contentful Paint competendo per le risorse di rete iniziali.

2. Influiscono sull'Interaction to Next Paint bloccando il thread principale e talvolta aggiornandosi lentamente dopo l'interazione.

3. Possono causare layout shift quando non vengono renderizzati correttamente sulla pagina.

Problemi di Largest Contentful Paint causati dai widget di chat

Un widget di chat può influire sui Core Web Vitals quando compete per le risorse di rete. I JavaScript di solito vengono messi in coda per il download prima delle immagini. Questo significa che nel peggiore dei casi (quando lo script della chat è render-blocking) il browser deve aspettare che lo script della chat venga scaricato ed eseguito prima di poter continuare con qualsiasi altra cosa.

Anche quando lo script della chat è posticipato (deferred) può comunque avere un impatto sulle metriche di paint in alcuni modi. Per prima cosa lasciatemi spiegare cosa fanno gli script posticipati. Il browser può scaricare gli script posticipati in parallelo e il browser può continuare il rendering fino all'evento DomContentLoaded. Dopodiché eseguirà gli script. Il problema è che per i visitatori di ritorno l'elemento LCP probabilmente non sarà caricato all'evento DomContentLoaded, ma lo script della chat (nella cache) verrà eseguito causando un ritardo nelle metriche LCP.

Problemi di Interaction to Next Paint (INP) causati dai widget di chat.

Un widget di chat può avere e avrà un impatto sull'Interaction to Next Paint in 2 modi. Il primo modo è bloccando il thread principale per un breve lasso di tempo mentre il widget di chat esegue i suoi script o controlla gli aggiornamenti. È semplicemente così che funzionano le cose. Ogni cosa che 'aggiungi a una pagina' rallenterà un po' la pagina. 

Il secondo modo in cui può causare problemi di INP è attraverso una cattiva programmazione (e credetemi, ci sono in giro alcuni widget di chat programmati male). Quando si tratta di widget di chat 'più popolare' non significa 'programmato meglio'. Quando il codice scadente impiega molto tempo ad aggiornare la presentazione, si verificheranno automaticamente problemi di INP. Immagino che alcuni provider di chat debbano migliorare il loro lavoro. Questa parte purtroppo è fuori dal mio controllo. Se hai scelto un widget di chat 'programmato male' non c'è modo per me di rendere quel codice migliore. 

Problemi di Layout Shift (CLS) causati dai widget di chat

A volte i widget di chat causano un layout shift. Ci sono 3 soliti sospetti che cerco mentre controllo i layout shift relativi ai widget di chat.

  • Layout shift che si verificano ogni volta al caricamento della chat
  • Layout shift che avvengono all'apertura ritardata della chat
  • Layout shift che si verificano quando viene caricata una cronologia delle chat (visitatore di chat di ritorno)

Come risolvere i problemi dei Core Web Vitals causati dagli script di chat

Fortunatamente è abbastanza facile ridurre al minimo l'impatto che un widget di chat può avere sulle metriche di paint (LCP & FCP) e su alcune parti dell'Interaction to Next Paint (INP). Nella mia dichiarazione di apertura ti ho detto che gli script hanno un tempo e un luogo. E per gli script di chat questo non è 'subito e a tutti i costi'. Mi piace caricare gli script di chat dopo l'evento di caricamento (load event), quando la pagina non risponde all'input dell'utente e mi piace anche bypassare il preload scanner per evitare la competizione di rete. 

Quindi, come lo facciamo? Usiamo l'evento di caricamento perché quando l'evento di caricamento è stato attivato l'elemento LCP sarà stato disegnato sulla pagina (a meno che tu non lo abbia caricato in modalità lazy con JavaScript). Usiamo requestIdleCallback per aspettare un momento di inattività in cui il browser non risponde all'input dell'utente. E usiamo JavaScript per iniettare lo script della chat per assicurarci che il preload scanner non riconosca immediatamente il parametro src dello script e non inneschi un download anticipato (ed è esattamente ciò che vogliamo evitare!)

<script>
<script>

Risolvere i problemi di Cumulative Layout Shift causati dai widget di chat

I widget di chat di solito causano un piccolo layout shift. Questo non deve per forza essere un problema enorme. Ma a volte i widget di chat vengono renderizzati semplicemente male. Fortunatamente possiamo (in un certo senso) risolvere anche questo nascondendo il cattivo rendering finché il widget non ha finito di caricarsi.

Per farlo dobbiamo leggere la documentazione del widget di chat (ci sono molti provider di chat diversi e funzionano tutti in modo leggermente diverso). Nella documentazione cerca le funzioni di callback che vengono richiamate nelle diverse fasi del rendering della chat. Dato che non so quale widget di chat stai utilizzando, per illustrare il meccanismo per ora useremo la funzione chat.ready().

Ora, con un po' di styling intelligente, possiamo nascondere e mostrare la chat con la proprietà CSS opacity. Per prima cosa aggiungiamo alcune classi per nascondere il widget di chat di default (cambia i descrittori in base al tuo widget di chat). Quindi nella callback chat.ready() aggiungiamo 'showchat' alla classlist del body per attivare la seconda riga CSS che mostra di nuovo la chat.
<style>
/*nascondi il widget di chat di default*/
.chatwidget{opacity:0}
/*mostra il widget di chat dopo la classe body .showchat*/
body.showchat .chatwidget {opacity:1}
<style>
<script>
chat.ready(function(){
  document.documentElement.classList.add('showchat');})
<script>

Questo è tutto! Buona fortuna con l'ottimizzazione del tuo widget di chat

Find out what is actually slow.

I map your critical rendering path using real field data. You get a clear answer on what blocks LCP, what causes INP spikes, and where layout shifts originate.

Book a Deep Dive
Carica un widget di chat con Core Web Vitals perfettiCore Web Vitals Carica un widget di chat con Core Web Vitals perfetti