Velocizzare l'integrazione di Calendly

Velocizzare l'integrazione di Calendly

Calendly è uno straordinario software per la pianificazione degli appuntamenti online! Calendly si integra con il tuo calendario di lavoro e consente agli altri di fissare appuntamenti direttamente con te. Molti dei miei clienti utilizzano Calendly e funziona piuttosto bene!

Ultima revisione di Arjen Karel a Marzo 2026

Integrare Calendly nel tuo sito web

Esistono fondamentalmente 3 modi per integrare Calendly nel tuo sito web. Tramite iframe, tramite un link cliccabile o tramite un pulsante. Il processo è semplice, basta cliccare sul codice di incorporamento, selezionare il codice da copiare e poi incollare quel codice nel tuo sito web. Fatto, ora hai incorporato Calendly sulla tua pagina. Ma non è tutto oro quel che luccica, perché potresti anche aver rallentato il tuo sito web.

Come Calendly rallenta i tuoi Core Web Vitals?

Nell'incorporamento inline, Calendly aggiunge un iframe al tuo sito. Se fatto correttamente, le metriche di visualizzazione (Largest Contentful Paint e First Contentful Paint) non saranno influenzate troppo dall'integrazione di Calendly come iframe. L'iframe influenzerà leggermente l'Interaction to Next Paint, ma per la maggior parte dei casi d'uso sarà accettabile.

Il "problema" con i Core Web Vitals si verifica quando aggiungi Calendly tramite un Popup widget o un Popup text. Il codice che ti viene presentato ti farà aggiungere un foglio di stile (https://assets.calendly.com/assets/external/widget.css) e uno script (https://assets.calendly.com/assets/external/widget.js) al tuo sito.

<!-- Calendly badge widget begin -->
<link
 href="https://assets.calendly.com/assets/external/widget.css"
 rel="stylesheet">
<script
  src="https://assets.calendly.com/assets/external/widget.js"
  type="text/javascript"
  async>
</script>
<a href="#"
   onclick="Calendly.initPopupWidget(
      {url: 'https://calendly.com/corewebvitals/pre-audit-meet'});
   return false;">
   Schedule time with me
</a>
<!-- Calendly badge widget end -->

Il risultato è un enorme ritardo di 370 ms causato dal foglio di stile di Calendly. L'audit di Calendly di DebugBear ha scoperto che il CSS del widget è di 464 KB, in gran parte a causa dei font Base64 incorporati. Questo accade perché i fogli di stile nella head della pagina sono render blocking per impostazione predefinita. Questo ha senso perché senza gli stili il browser non saprà quale dovrebbe essere l'HTML finale. Ecco perché è così importante avere fogli di stile ottimizzati quando si lavora sui Core Web Vitals.

Anche lo script asincrono competerà per le risorse iniziali, ma poiché quello script è asincrono il ritardo che causa è molto inferiore al ritardo causato dal foglio di stile.

La soluzione

La soluzione sta nel "rendere Calendly non render-blocking" e come bonus "migliorare il timing". C'è un modo semplice e uno leggermente più difficile (e migliore) per farlo. Iniziamo!

La soluzione semplice

Il modo più semplice sarebbe semplicemente rendere il foglio di stile non render-blocking utilizzando il "trucco del preload". Basta guardare le modifiche che ho apportato al codice in grassetto. Il foglio di stile è ora precaricato (e le risorse precaricate vengono scaricate in parallelo). Poi, quando il foglio di stile è stato caricato, il link di preload viene trasformato in un link di foglio di stile che inietta efficacemente un foglio di stile che non è render blocking!

<!-- Calendly badge widget begin -->
<link
 href="https://assets.calendly.com/assets/external/widget.css"
 rel="preload"
 as="style"
 onload="this.rel='stylesheet';this.onload=null;"
>
<script
  src="https://assets.calendly.com/assets/external/widget.js"
  type="text/javascript"
  async>
</script>
<a href="#"
   onclick="Calendly.initPopupWidget(
      {url: 'https://calendly.com/corewebvitals/pre-audit-meet'});
   return false;">
   Schedule time with me
</a>
<!-- Calendly badge widget end -->

La soluzione migliore

Sebbene la soluzione semplice migliorerà sicuramente le tue metriche di visualizzazione, continuo a non gradire il timing di Calendly. Nessuno nella storia di Internet si è mai infastidito perché non abbiamo potuto fissare un appuntamento entro i primi 100 ms del caricamento della pagina. Preferisco dare la priorità agli elementi più importanti della pagina come l'elemento LCP e agli script critici che per esempio gestiscono l'interazione del menu. Questo è lo stesso pattern facade che uso per i widget di chat.

Quindi prendiamo questa conoscenza e iniziamo a caricare sia lo script che lo stile quando l'HTML della pagina è stato analizzato. Questo evento si chiama DOMContentLoaded. Quando questo evento viene trasmesso, utilizziamo quel tempo per caricare lo stile e lo script in modo asincrono. Quando sia lo stile che lo script sono stati caricati creiamo un link cliccabile (nella funzione di callback) che mostra il popup quando quel link viene cliccato. Fantastico vero? Per altre tecniche come questa, vedi 16 metodi per differire JavaScript.

Il codice usa anche scheduler.yield() per fare yield al thread principale prima di aprire il popup. Questo mantiene l'interazione reattiva ed evita di bloccare il browser mentre Calendly si inizializza.

document.addEventListener('DOMContentLoaded', function () {

    var stylesheetPromise = new Promise(function (resolve, reject) {
        var stylesheet = document.createElement('link');
        stylesheet.rel = 'stylesheet';
        stylesheet.href = 'https://assets.calendly.com/assets/external/widget.css';
        stylesheet.onload = resolve;
        stylesheet.onerror = reject;
        document.head.appendChild(stylesheet);
    });

    var scriptPromise = new Promise(function (resolve, reject) {
        var script = document.createElement('script');
        script.src = 'https://assets.calendly.com/assets/external/widget.js';
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });

    async function yieldToMainThread() {
        if ('scheduler' in window && 'yield' in window.scheduler) {
          return await window.scheduler.yield();
        }
        return new Promise((resolve) => {
          setTimeout(resolve, 0);
        });
      }

    Promise.all([stylesheetPromise, scriptPromise])
        .then(function () {
            const clickEl = document.getElementById('demo');
            clickEl.innerHTML = '<a>Book a Demo</a>';
            document.getElementById('demo').addEventListener('click', async function () {
                this.innerHTML = 'Loading...';
                await yieldToMainThread();
                Calendly.initPopupWidget({ url: 'https://calendly.com/corewebvitals/pre-audit-meet' }); return false;
            });
        })
        .catch(function (error) {
            console.error('Error loading resources:', error);
        });
});

Demo

Dai un'occhiata alla demo qui cliccando sul link sottostante (e se hai bisogno di un audit sentiti libero di fissare un appuntamento)

Prenota una Demo