Acelerar a integração do Calendly

Acelerar a integração do Calendly

O Calendly é um excelente software de agendamento online de compromissos! O Calendly se integra ao seu calendário de trabalho e permite que outras pessoas agendem compromissos com você diretamente. Muitos dos meus clientes usam o Calendly e funciona muito bem!

Revisado pela última vez por Arjen Karel em março de 2026

Integrando o Calendly ao seu site

Existem basicamente 3 maneiras de integrar o Calendly ao seu site. Seja por iframe, por um link clicável ou por um botão. O processo é simples, basta clicar no código de incorporação, selecionar o código para copiar e, em seguida, colar esse código no seu site. Pronto, agora você incorporou o Calendly na sua página. Mas nem tudo são flores, pois você também pode ter deixado seu site mais lento.

Como o Calendly está desacelerando seus Core Web Vitals?

Em uma incorporação inline, o Calendly adiciona um iframe ao seu site. Se feito corretamente, as métricas de pintura (Largest Contentful Paint e First Contentful Paint) não serão muito afetadas pela integração do Calendly como um iframe. O iframe afetará levemente a Interaction to Next Paint, mas para a maioria dos casos de uso isso será aceitável.

O "problema" com os Core Web Vitals ocorre quando você adiciona o Calendly por meio de um Popup widget ou um Popup text. O código apresentado a você fará com que você adicione uma folha de estilo (https://assets.calendly.com/assets/external/widget.css) e um script (https://assets.calendly.com/assets/external/widget.js) ao seu site.

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

O resultado é um atraso de impressionantes 370ms causado pela folha de estilo do Calendly. A auditoria do DebugBear sobre o Calendly descobriu que o CSS do widget tem 464KB, em grande parte devido a fontes incorporadas em Base64. Isso acontece porque as folhas de estilo no head da página são bloqueadoras de renderização por padrão. Isso faz sentido porque, sem os estilos, o navegador não saberá como o HTML final deve ser. É por isso que é tão importante ter folhas de estilo otimizadas ao trabalhar nos Core Web Vitals.

O script assíncrono também competirá por recursos iniciais, mas como esse script é assíncrono, o atraso que ele causa é muito menor do que o atraso causado pela folha de estilo.

A solução

A solução está em "tornar o Calendly não bloqueador de renderização" e, como bônus, "melhorar o tempo de carregamento". Existe uma maneira fácil e uma maneira um pouco mais difícil (e melhor) de fazer isso. Vamos começar!

A correção fácil

A maneira mais fácil seria simplesmente tornar a folha de estilo não bloqueadora de renderização usando o "truque de preload". Basta ver as alterações que fiz no código em negrito. A folha de estilo agora é pré-carregada (e recursos com preload são baixados em paralelo). Então, quando a folha de estilo for carregada, o link de preload é transformado em um link de stylesheet, o que efetivamente injeta uma folha de estilo que não bloqueia a renderização!

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

A correção melhor

Embora a correção fácil melhore definitivamente suas métricas de pintura, eu ainda não gosto do tempo do Calendly. Ninguém na história da internet se incomodou por não conseguirmos agendar um compromisso dentro dos primeiros 100ms de carregamento da página. Eu prefiro priorizar os elementos mais importantes da página, como o elemento LCP e os scripts críticos que, por exemplo, lidam com a interação do menu. Este é o mesmo padrão facade que eu uso para widgets de chat.

Então, vamos usar esse conhecimento e começar a carregar tanto o script quanto o estilo quando o HTML da página tiver sido analisado. Este evento é chamado de DOMContentLoaded. Quando este evento é transmitido, usamos esse tempo para carregar o estilo e o script de forma assíncrona. Quando o estilo e o script forem carregados, criamos um link clicável (na função de callback) que mostra o popup quando esse link é clicado. Legal, né? Para mais técnicas como essa, veja 16 métodos para adiar JavaScript.

O código também usa scheduler.yield() para fazer yield para a thread principal antes de abrir o popup. Isso mantém a interação responsiva e evita bloquear o navegador enquanto o Calendly é inicializado.

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);
        });
});

Demonstração

Confira a demonstração aqui clicando no link abaixo (e se precisar de uma auditoria, fique à vontade para marcar um compromisso)

Book a Demo