Acelera la integración de Calendly
Integra Calendly sin ralentizar los Core Web Vitals
Acelera la integración de Calendly
¡Calendly es un increíble software de programación de citas en línea! Calendly se integra con tu calendario de trabajo y permite que otros programen citas contigo directamente. Muchos de mis clientes usan Calendly y ¡funciona bastante bien!
Integrar Calendly en tu sitio web
Básicamente hay 3 formas de integrar Calendly en tu sitio web. Ya sea mediante i-frame, mediante un enlace clicable o mediante un botón. El proceso es simple, solo haz clic en el código de integración, selecciona el código para copiar y pega ese código en tu sitio web. Voilà, ahora has integrado Calendly en tu página. Pero no todo es color de rosa porque también puedes haber ralentizado tu sitio web.
¿Cómo está Calendly ralentizando tus Core Web Vitals?
En la integración inline, Calendly añade un i-frame a tu sitio. Si se hace correctamente, las métricas de pintado (Largest Contentful Paint y First Contentful Paint) no se verán demasiado afectadas al integrar Calendly como i-frame. El i-frame afectará ligeramente al Interaction to Next Paint pero para la mayoría de los casos de uso será aceptable.
El 'problema' con los Core Web Vitals ocurre cuando añades Calendly a través de un Popup widget o un Popup text. El código que se te presenta te hará añadir una hoja de estilos (https://assets.calendly.com/assets/external/widget.css) y un script (https://assets.calendly.com/assets/external/widget.js) a tu sitio.
<!-- 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 -->
El resultado es un enorme retraso de 370ms causado por la hoja de estilos de Calendly. Esto sucede porque las hojas de estilo en el head de la página son render blocking por defecto. Tiene sentido porque sin los estilos el navegador no sabrá cómo debería verse el HTML final. Por eso es tan importante tener hojas de estilo optimizadas al trabajar en los Core Web Vitals.
El script asíncrono también competirá por los recursos tempranos pero dado que ese script es asíncrono, el retraso que causa es mucho menor que el retraso causado por la hoja de estilos.
La solución:
La solución está en 'hacer que Calendly no sea render-blocking' y como bonus 'mejorar el timing'. Hay una forma fácil y una un poco más difícil (y mejor) de hacerlo. ¡Empecemos!
La solución fácil
La forma más fácil sería simplemente hacer que la hoja de estilos no sea render-blocking usando el 'truco de preload'. Solo mira los cambios que hice en el código en negrita. La hoja de estilos ahora se precarga (y los recursos precargados se descargan en paralelo). Luego, cuando la hoja de estilos se ha cargado, el enlace de preload se transforma en un enlace de hoja de estilos, lo que efectivamente inyecta una hoja de estilos que no es 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 mejor solución
Aunque la solución fácil definitivamente mejorará tus métricas de pintado, todavía no me gusta el timing de Calendly. Nadie en la historia de internet se ha molestado porque no pudimos programar una cita dentro de los primeros 100ms de carga de página. Prefiero priorizar los elementos más importantes de la página como el elemento LCP y los scripts críticos que, por ejemplo, manejan la interacción del menú.
Entonces tomemos ese conocimiento y comencemos a cargar tanto el script como el estilo cuando el
HTML de la página haya sido parseado. Este evento se emite a la página y se llama DOMContentLoaded. Cuando este evento se transmite, usamos ese momento para cargar el estilo y el script de forma asíncrona. Cuando tanto el estilo como el script
se han cargado, creamos un enlace clicable (en la función callback) que muestra el popup cuando se hace clic en ese enlace. ¿Genial, no?
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
Mira la demo aquí haciendo clic en el enlace a continuación (y si necesitas una auditoría, no dudes en hacer una cita)
