Acelere a integração do Calendly

Acelere a integração do Calendly

O Calendly é um ótimo software de agendamento online! Ele se integra à sua agenda de trabalho e permite que outras pessoas agendem reuniões diretamente com você. Muitos dos meus clientes usam o Calendly e ele funciona muito bem!

Última revisão por Arjen Karel em março de 2026

Como integrar o Calendly ao site

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

Como o Calendly deixa os Core Web Vitals mais lentos?

Na incorporação inline, o Calendly adiciona um iframe ao site. Se for feita corretamente, as métricas de renderização (Largest Contentful Paint e First Contentful Paint) não serão muito afetadas pela integração do Calendly via iframe. O iframe afetará o Interaction to Next Paint ligeiramente, mas na maioria dos casos isso é aceitável.

O "problema" com os Core Web Vitals ocorre quando você adiciona o Calendly por um Popup widget ou um Popup text. O código fornecido pede para incluir uma folha de estilos (https://assets.calendly.com/assets/external/widget.css) e um script (https://assets.calendly.com/assets/external/widget.js) no 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 enorme de 370ms causado pela folha de estilos do Calendly. A auditoria do Calendly feita pelo DebugBear mostrou que o CSS do widget tem 464KB, em grande parte devido a fontes embutidas em Base64. Isso acontece porque folhas de estilo no head da página são render blocking por padrão. Isso faz todo o sentido: sem os estilos, o navegador não sabe como o HTML final deve ser exibido. Por isso é tão importante ter folhas de estilo otimizadas ao trabalhar nos Core Web Vitals.

O script async também disputa recursos no início do carregamento, mas, como é assíncrono, o atraso que ele causa é bem menor do que o atraso da folha de estilos.

A solução

A solução consiste em "tornar o Calendly não render blocking" e, de bônus, "melhorar o timing". Existe um jeito fácil e outro um pouco mais trabalhoso (e melhor) de fazer isso. Vamos começar!

A correção simples

A maneira mais fácil é tornar a folha de estilos não render blocking usando o "truque do preload". Veja as alterações que fiz no código em negrito. A folha de estilos agora é pré-carregada (e recursos em preload são baixados em paralelo). Depois, quando a folha de estilos termina de carregar, o link de preload é transformado em um link de folha de estilos, o que efetivamente injeta uma folha de estilos que não é 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 -->

A melhor correção

Embora a correção simples certamente melhore as métricas de renderização, ainda não gosto do timing do Calendly. Ninguém na história da internet jamais se incomodou por não conseguir agendar uma reunião nos primeiros 100ms de carregamento da página. Prefiro priorizar os elementos mais importantes da página, como o elemento LCP e scripts críticos que lidam, por exemplo, com a interação do menu. Esse é o mesmo padrão facade que uso para widgets de chat.

Então, vamos usar esse conhecimento e começar a carregar tanto o script quanto o estilo depois que o HTML da página for analisado. Esse evento se chama DOMContentLoaded. Quando esse evento é disparado, aproveitamos esse tempo para carregar o estilo e o script de forma assíncrona. Quando o estilo e o script estiverem carregados, criamos um link clicável (na função de callback) que exibe o popup quando esse link é clicado. Muito 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 main thread antes de abrir o popup. Isso mantém a interação responsiva e evita travar 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);
        });
});

Demo

Confira a demo clicando no link abaixo (e, se precisar de uma auditoria, fique à vontade para agendar um horário)

Agendar uma demonstração