Acelerar la integración de Calendly

Acelerar 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!

Revisado por última vez por Arjen Karel en marzo de 2026

Integrando Calendly con tu sitio web

Básicamente, hay 3 formas de integrar Calendly en tu sitio web. Ya sea a través de un iframe, a través de un enlace en el que se puede hacer clic o a través de un botón. El proceso es simple, solo haz clic en el código de inserción, selecciona el código para copiar y luego pega ese código en tu sitio web. Listo, ahora has insertado Calendly en tu página. Pero no todo es color de rosa porque es posible que también hayas ralentizado tu sitio web.

¿Cómo está Calendly ralentizando tus Core Web Vitals?

En una inserción en línea, Calendly agrega un iframe a tu sitio. Si se hace correctamente, las métricas de pintura (Largest Contentful Paint y First Contentful Paint) no se verán demasiado afectadas al integrar Calendly como un iframe. El iframe afectará ligeramente la Interaction to Next Paint pero para la mayoría de los casos de uso será aceptable.

El "problema" con las Core Web Vitals ocurre cuando agregas Calendly a través de un Popup widget o un Popup text. El código que se te presenta te hará agregar 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;">
   Programar tiempo conmigo
</a>
<!-- Calendly badge widget end -->

El resultado es un enorme retraso de 370 ms causado por la hoja de estilos de Calendly. La auditoría de DebugBear de Calendly encontró que el CSS del widget es de 464 KB, en gran parte debido a las fuentes Base64 incrustadas. Esto sucede porque las hojas de estilo en el head de la página bloquean el renderizado de forma predeterminada. Eso tiene sentido porque sin los estilos el navegador no sabrá cómo debería verse el HTML final. Es por eso que es tan importante tener hojas de estilo optimizadas al trabajar en las Core Web Vitals.

El script async también competirá por 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 reside en "hacer que Calendly no bloquee el renderizado" y como bono "mejorar el tiempo". Hay una forma fácil y una ligeramente más difícil (y mejor) de hacer esto. ¡Comencemos!

La solución fácil

La forma más fácil sería simplemente hacer que la hoja de estilos no bloquee el renderizado usando el "truco de preload". Solo mira los cambios que hice en el código en negrita. Ahora la hoja de estilos se precarga (y los recursos precargados se descargan en paralelo). Luego, cuando la hoja de estilos se ha cargado, el enlace preload se transforma en un enlace stylesheet que efectivamente inyecta una hoja de estilos que no bloquea el renderizado.

<!-- 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;">
   Programar tiempo conmigo
</a>
<!-- Calendly badge widget end -->

La mejor solución

Si bien la solución fácil definitivamente mejorará tus métricas de pintura, todavía no me gusta el tiempo de Calendly. Nadie en la historia de Internet se ha molestado alguna vez porque no pudimos programar una cita dentro de los primeros 100 ms de carga de la 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ú. Este es el mismo patrón de fachada que uso para los widgets de chat.

Así que tomemos ese conocimiento y comencemos a cargar tanto el script como el estilo cuando el HTML de la página se ha analizado. Este evento se llama DOMContentLoaded. Cuando se transmite este evento, usamos ese tiempo para cargar el estilo y el script de forma asíncrona. Cuando tanto el estilo como el script se han cargado, creamos un enlace en el que se puede hacer clic (en la función callback) que muestra el popup cuando se hace clic en ese enlace. Genial, ¿verdad? Para más técnicas como esta, consulta 16 métodos para diferir JavaScript.

El código también usa scheduler.yield() para hacer yield al hilo principal antes de abrir el popup. Esto mantiene la interacción receptiva y evita bloquear el navegador mientras Calendly se inicializa.

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>Reservar una demostración</a>';
            document.getElementById('demo').addEventListener('click', async function () {
                this.innerHTML = 'Cargando...';
                await yieldToMainThread();
                Calendly.initPopupWidget({ url: 'https://calendly.com/corewebvitals/pre-audit-meet' }); return false;
            });
        })
        .catch(function (error) {
            console.error('Error loading resources:', error);
        });
});

Demo

Revisa la demo aquí haciendo clic en el enlace a continuación (y si necesitas una auditoría, no dudes en programar una cita)

Reservar una demostración