Widget de chat 100% pagespeed

Como funciona um widget de chat?

Um widget de chat geralmente vem na forma de algum código JavaScript. Adicione este código ao HTML da sua página da web. Sem ter que fazer nenhuma codificação, você verá automaticamente um widget de chat aparecer em sua página.

O JavaScript que criou o widget de chat faz isso colocando 1, 2 ou até 3 iframes em sua página. Um iframe é uma mini página da web incorporada em sua página. O chat não é executado em seu site, mas através do site do próprio plugin de chat. Uma conexão é estabelecida entre o iframe e o servidor de chat que lida com todo o chat.

Impacto de um widget de chat na pontuação do lighthouse

Carregar o iframe do chat geralmente é um assunto relativamente caro. Uma nova página de chat deve ser carregada dentro da sua página. Esta página de chat geralmente requer muito javascript e isso leva tempo para carregar e executar. Ao todo, isso tem um impacto significativo na sua pontuação do lighthouse. Por exemplo: nossa pontuação do lighthouse caiu nada menos que 35 pontos:

1. Speed index +3.6sec
2. Time to interactive +10.9sec.
3. Total blocking time +1 sec.

Como melhorar a pontuação do lighthouse com um widget de chat

Muitos webmasters acham que um widget de chat simplesmente torna a página lenta e que nada pode ser feito a respeito porque eles têm pouco controle sobre o widget de chat. Eles estão parcialmente certos. O pedaço de javascript que você tem que colar em seu site não causa diretamente o atraso. O JavaScript inicia uma série de ações em sua página. Essas ações tornam a página da web lenta e, de fato: você tem pouca influência sobre isso.

É por isso que temos que ser inteligentes e contornar o problema. Não há alternativa. Precisaremos garantir que o widget de chat não atrapalhe a renderização da página. O widget de chat deve ser executado depois que o 'main thread' do seu navegador terminar de carregar e renderizar a página. 

Conseguimos isso usando a função JavaScript setTimeout() e o evento de carregamento da página. O evento de carregamento é acionado quando HTML, CSS e JavaSript são carregados e analisados. A função setTimeout() executa um comando fornecido após um número de milissegundos. Este exemplo: setTimeout(function(){alert('test')},4000)exibirá um alerta em seu navegador após 4 segundos (ou 4000ms).

Podemos usar o evento de carregamento e a função setTimeout para atrasar a renderização do widget de chat para 1500ms depois que HTML, CSS e JacvaScript forem analisados. Neste momento, temos certeza de que o main thread do navegador está ocioso.

. Primeiro temos que envolver o widget de chat em torno de uma função. E então chamar essa função 1500 após o evento de carregamento, quando o main thread provavelmente estiver ocioso. Quando implementamos isso para o plugin de chat do facebook nesta página, você eventualmente obterá este código

var _x = function(d, s, id) {
    window.fbAsyncInit = function() {
        FB.init({
            xfbml: true,
            version: 'v8.0'
        });
    };
    var js, fjs = d.getElementsByTagName (s) [0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
    fjs.parentNode.insertBefore (js, fjs);
};

setTimeout(function() { _x(document, 'script', 'facebook-jssdk') }, 4000);

Você pode realizar este truque para qualquer plugin de chat por aí. Requer algum trabalho manual e você não pode usar plugins do WordPress, por exemplo. Não consegue descobrir? Terei prazer em ajudá-lo!

Resolvemos todos os problemas de page speed agora?

Quando um widget de chat carrega da maneira acima, obtemos uma pontuação Lighthouse de 100% para o nosso widget de chat. Isso significa que resolvemos todos os problemas de page speed?

Sim, em parte, mas não completamente. Usamos renderização progressiva para carregar as partes mais importantes da página cedo durante o carregamento da página, enquanto empurramos as partes menos importantes (o widget de chat) para o final do ciclo de carregamento. Métricas importantes como o LCP (Largest Contentful Paint) e o FCP (First Contentful Paint) melhoraram consideravelmente porque removemos o widget de chat do 'caminho crítico de renderização'. Isso permite que o navegador saia do 'modo de bloqueio' mais cedo, o que reduz substancialmente o tempo de bloqueio inicial.

Depois disso, torna-se outra história. Ao empurrar o widget de chat para o final do ciclo de carregamento da página, ele cai fora da medição do lighthouse. Assim que o widget de chat começar a carregar, o main thread do navegador será bloqueado. A página não é mais interativa por um momento. O impacto desse comportamento depende do widget de chat. A maioria dos widgets de chat populares não bloqueará visivelmente a página quando executados mais tarde.

Os widgets de chat são construídos de forma a causar um atraso no pagespeed por design. Para acelerar uma página, precisamos fazer escolhas. Essas escolhas nunca são perfeitas. Empurrar o widget de chat para o final do ciclo de carregamento resultará em um LCP e FCP muito mais cedo, por outro lado, alguns ganhos de velocidade estão abertos à interpretação.