Carregue um widget de chat com Core Web Vitals perfeitos

Como carregar um widget de chat da maneira correta!

Eu já disse isso várias e várias vezes. Alguns scripts são mais importantes do que outros. Ninguém na história da internet se incomodou com o fato de um widget de chat não ter carregado nos primeiros 500ms do carregamento da página. Aquele momento em que a página ainda está em branco.

Não faria sentido, certo, carregar um widget de chat antes que o conteúdo principal da página sequer tenha começado a carregar? Não, faria muito mais sentido carregar primeiro as partes mais importantes (seu logotipo, sua imagem principal, suas folhas de estilo, suas fontes, talvez alguns scripts super importantes que lidam com navegação e conversão).

Infelizmente, não é assim que a maioria dos sites está fazendo as coisas. Diariamente, vejo scripts sem importância (como scripts de chat) carregarem com a prioridade mais alta imediatamente no início do carregamento da página.

Neste artigo, vou explicar como carregar corretamente um script de chat e como isso afeta métricas importantes como o Largest Contentful Paint e a Interaction to Next Paint.

Histórico: como funcionam os widgets de chat

Um widget de chat geralmente funciona carregando um pequeno script na sua página. Esse script carregará alguns estilos e injetará um iframe na sua página. Um iframe é uma pequena página da web isolada dentro de uma página da web. E esse iframe lidará com tudo o que precisa para conversar com seus clientes.

Como os widgets de chat afetam os Core Web Vitals?

Os widgets de chat afetam os Core Web Vitals de algumas maneiras:

1. Eles afetam a First Contentful Paint & o Largest Contentful Paint ao competir por recursos de rede antecipados.

2. Eles afetam a Interaction to Next Paint ao bloquear a thread principal e, às vezes, ao atualizar lentamente após a interação.

3. Eles podem causar Cumulative Layout Shift quando não são renderizados corretamente na página.

Problemas de Largest Contentful Paint causados por widgets de chat

Um widget de chat pode afetar os Core Web Vitals quando está competindo por recursos de rede. O JavaScript geralmente é colocado na fila para download antes das imagens. Isso significa que, no pior cenário (quando o script de chat é um bloqueador de renderização), o navegador tem que esperar que o script de chat seja baixado e executado antes de poder continuar com qualquer outra coisa.

Mesmo quando o script de chat é adiado (deferred), ele ainda pode impactar as métricas de pintura de algumas maneiras. Primeiro, deixe-me explicar o que os scripts adiados fazem. O navegador pode baixar scripts adiados em paralelo e o navegador pode continuar a renderização até o evento DomContentLoaded. Depois disso, ele executará os scripts. O problema é que, para visitantes recorrentes, o elemento LCP provavelmente não será carregado no evento DomContentLoaded, mas o script de chat (em cache) será executado, causando um atraso nas métricas de LCP.

Problemas de Interaction to Next Paint (INP) causados por widgets de chat.

Um widget de chat pode e irá impactar a Interaction to Next Paint de 2 maneiras. A primeira maneira é bloqueando a thread principal por um curto período enquanto o widget de chat executa seus scripts ou verifica se há atualizações. É assim que as coisas funcionam. Tudo o que você 'adiciona a uma página' deixará a página um pouco mais lenta. 

A segunda maneira pela qual pode causar problemas de INP é por meio de código malfeito (e acredite em mim, existem alguns widgets de chat mal codificados por aí). Quando se trata de widgets de chat, 'mais popular' não significa 'melhor codificado'. Então o código ruim demora a atualizar a apresentação, você automaticamente terá problemas de INP. Eu acho que alguns provedores de chat precisam melhorar o nível. Essa parte, infelizmente, está fora do meu controle. Se você escolheu um widget de chat 'mal codificado', não há como eu melhorar esse código. 

Problemas de Cumulative Layout Shift (CLS) causados por widgets de chat

Às vezes, os widgets de chat causam um Cumulative Layout Shift. Existem 3 suspeitos habituais que eu procuro ao verificar por Cumulative Layout Shift relacionados a widgets de chat.

• Cumulative Layout Shifts que ocorrem todas as vezes no carregamento do chat
• Cumulative Layout Shifts que acontecem em uma 'abertura de chat' atrasada
• Cumulative Layout Shifts que ocorrem quando um histórico de chat é carregado (visitante recorrente do chat)

Como corrigir problemas de Core Web Vitals causados por scripts de chat

<script>
/* requestIdleCallback fallback for older browsers  */
var safeRequestIdleCallback = window.requestIdleCallback || function (cb) {
    return setTimeout(function () {
        cb();
    }, 1);
}   

/* execute after the load event */
window.addEventListener('load', function () {
    /* when browser is idle */
    safeRequestIdleCallback(function () {
        /* inject script, bypass preload scanner */
        var script = document.createElement('script');
        script.src = 'your-chat-script.js';
        document.body.appendChild(script);
    });
});
<script>

Corrigir problemas de Cumulative Layout Shift causados por widgets de chat

<style>
/*hide chat widget by default*/
.chatwidget{opacity:0}
/*show chat widget after .showchat body class*/
body.showchat .chatwidget {opacity:1}
<style>

<script>
chat.ready(function(){
  document.documentElement.classList.add('showchat');
})
<script>

É isso! Boa sorte ao acelerar o seu widget de chat