Acelere a integração do Calendly
Incorpore o Calendly sem desacelerar o Core Web Vitals
Acelere a integração do Calendly
Calendly é um incrível Software de Agendamento de Consultas Online! O Calendly se integra ao seu calendário de trabalho e permite que outras pessoas agendem consultas diretamente com você. Muitos dos meus clientes usam o Calendly e funciona muito bem!
Integrando o Calendly ao seu site
Existem basicamente 3 maneiras de integrar o Calendly ao seu site. Seja via i-frame, via um link clicável ou via um botão. O processo é simples, basta clicar no código de incorporação, selecionar o código para copiar e colar esse código no seu site. Voilá, agora você incorporou o Calendly na sua página. Mas nem tudo são flores porque você também pode ter deixado o seu site mais lento.
Como o Calendly está desacelerando os seus Core Web Vitals?
Na incorporação inline, o Calendly adiciona um i-frame ao seu site. Se feito corretamente, as métricas de pintura (Largest Contentful Paint e First Contentful Paint) não serão muito afetadas ao integrar o Calendly como um i-frame. O i-frame afetará levemente a Interaction to Next Paint, mas para a maioria dos casos de uso, será aceitável.
O 'problema' com os Core Web Vitals ocorre quando você adiciona o Calendly através 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;">
Agende um horário comigo
</a>
<!-- Calendly badge widget end -->
O resultado é um enorme atraso de 370ms causado pela folha de estilo do Calendly. Isso acontece porque folhas de estilo no cabeçalho (head) da página bloqueiam a renderização por padrão. Isso faz sentido porque sem os estilos, o navegador não saberá como o HTML final deve se parecer. É 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 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 ligeiramente 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 do preload'. Basta olhar as mudanças que fiz no código em negrito. A folha de estilo agora é pré-carregada (e recursos pré-carregados são baixados em paralelo). Então, quando a folha de estilo é carregada, o link de preload é transformado em um link de folha de estilo 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;">
Agende um horário comigo
</a>
<!-- Calendly badge widget end -->
A correção melhor
Embora a correção fácil melhore definitivamente as suas métricas de pintura, eu ainda não gosto do tempo de carregamento do Calendly. Ninguém na história da internet jamais se irritou por não conseguirmos agendar uma consulta nos 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.
Então vamos pegar esse conhecimento e começar a carregar tanto o script quanto o estilo quando o
HTML da página tiver sido analisado. Esse evento é emitido para a página e é chamado de DOMContentLoaded. Quando este evento é transmitido, usamos esse tempo para carregar o estilo e o script de forma assíncrona. Quando tanto o estilo quanto o script
tiverem sido carregados, criamos um link clicável (na função de callback) que mostra o popup quando esse link é clicado. Legal, né?
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>Agendar uma Demonstração</a>';
document.getElementById('demo').addEventListener('click', async function () {
this.innerHTML = 'Carregando...';
await yieldToMainThread();
Calendly.initPopupWidget({ url: 'https://calendly.com/corewebvitals/pre-audit-meet' }); return false;
});
})
.catch(function (error) {
console.error('Erro ao carregar recursos:', error);
});
});
Demonstração
Confira a demonstração aqui clicando no link abaixo (e se você precisar de uma auditoria, sinta-se à vontade para marcar uma consulta)
