Velocizza l'integrazione di Calendly
Incorpora Calendly senza rallentare i Core Web Vitals
Velocizza l'integrazione di Calendly
Calendly è un fantastico software di pianificazione degli appuntamenti online! Calendly si integra con il tuo calendario di lavoro e permette agli altri di programmare direttamente gli appuntamenti con te. Molti dei miei clienti usano Calendly e funziona piuttosto bene!
Integrare Calendly con il tuo sito web
Ci sono fondamentalmente 3 modi per integrare Calendly nel tuo sito web: tramite i-frame, tramite un link cliccabile o tramite un pulsante. Il processo è semplice: basta fare clic sul codice da incorporare, selezionare il codice da copiare e incollare quel codice nel tuo sito web. Voilà, ora hai incorporato Calendly nella tua pagina. Ma non è tutto rose e fiori, perché potresti aver anche rallentato il tuo sito web.
Come sta rallentando i tuoi Core Web Vitals Calendly?
L'integrazione in linea di Calendly aggiunge un i-frame al tuo sito. Se fatto correttamente, le metriche di rendering (Largest Contentful Paint e First Contentful Paint) non saranno influenzate troppo dall'integrazione di Calendly come i-frame. L'i-frame 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 chiederà di 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. Questo accade perché i fogli di stile nell'head della pagina bloccano il rendering per impostazione predefinita. Ciò ha senso perché senza gli stili il browser non saprà che aspetto dovrebbe avere 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 prime risorse, ma poiché tale script è asincrono, il ritardo che causa è molto inferiore a quello causato dal foglio di stile.
La soluzione:
La soluzione sta nel rendere Calendly non bloccante per il rendering ('making Calendly non-render-blocking') e come bonus nel migliorarne il tempismo ('improve the timing'). C'è un modo facile e uno un po' più difficile (e migliore) per farlo. Iniziamo!
La soluzione facile
Il modo più semplice sarebbe quello di rendere il foglio di stile non bloccante per il rendering utilizzando il 'trucco del preload'. Guarda semplicemente le modifiche che ho apportato al codice in grassetto. Il foglio di stile è ora precaricato (e le risorse precaricate vengono scaricate in parallelo). Quindi, quando il foglio di stile è stato caricato, il link di preload viene trasformato in un link del foglio di stile, iniettando efficacemente un foglio di stile che non blocca il rendering!
<!-- 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
Mentre la soluzione facile migliorerà sicuramente le tue metriche di rendering, il tempismo di Calendly continua a non piacermi. Nessuno nella storia di Internet è mai stato infastidito dal fatto di non poter fissare un appuntamento entro i primi 100 ms dal caricamento della pagina. Preferisco dare priorità agli elementi più importanti della pagina come l'elemento LCP e gli script critici che, ad esempio, gestiscono l'interazione con il menu.
Quindi prendiamo questa conoscenza e iniziamo a caricare sia lo script che lo stile quando
l'HTML della pagina è stato analizzato. Questo evento viene emesso nella pagina ed è chiamato DOMContentLoaded. Quando questo evento viene trasmesso, usiamo quel momento 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 si fa clic su quel link. Forte, vero?
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 facendo clic sul link sottostante (e se hai bisogno di un audit sentiti libero di fissare un appuntamento)
