Carregar JavaScript de terceiros com eficiência

Milica Mihajlija

Se um script de terceiros estiver reduzindo o carregamento da página, você terá duas opções para melhorar o desempenho:

• Remova-o se ele não agregar um valor claro ao site.
• Otimize o processo de carregamento.

Nesta postagem, explicamos como otimizar o processo de carregamento de scripts de terceiros com as seguintes técnicas:

• Como usar o atributo async ou defer nas tags <script>
• Como estabelecer conexões iniciais com as origens necessárias
• Carregamento lento
• Otimizar a forma como você veicula scripts de terceiros

Use async ou defer

Como os scripts síncronos atrasam a construção e a renderização do DOM, sempre carregue scripts de terceiros de forma assíncrona, a menos que o script precise ser executado antes da renderização da página.

Os atributos async e defer informam ao navegador que ele pode analisar o HTML enquanto carrega o script em segundo plano e executar o script depois que ele for carregado. Dessa forma, os downloads de script não bloqueiam a construção do DOM ou a renderização da página, permitindo que o usuário veja a página antes que todos os scripts terminem de carregar.

<script async src="script.js">

<script defer src="script.js">

A diferença entre os atributos async e defer é quando o navegador executa os scripts.

async

Os scripts com o atributo async são executados na primeira oportunidade após a conclusão do download e antes do evento load da janela. Isso significa que é possível (e provável) que os scripts async não sejam executados na ordem em que aparecem no HTML. Isso também significa que eles podem interromper a criação do DOM se concluirem o download enquanto o analisador ainda estiver em trabalho.

defer

Os scripts com o atributo defer são executados após a conclusão da análise HTML, mas antes do evento DOMContentLoaded. defer garante que os scripts sejam executados na ordem em que aparecem no HTML e não bloqueiem o analisador.

• Use async se for importante que o script seja executado mais cedo no processo de carregamento.
• Use defer para recursos menos essenciais, como um player de vídeo abaixo da dobra.

O uso desses atributos pode acelerar significativamente o carregamento da página. Por exemplo, o Telegraph adiou todos os scripts, incluindo anúncios e análises, e melhorou o tempo de carregamento de anúncios em uma média de quatro segundos.

Estabelecer conexões antecipadas com as origens necessárias

Você pode economizar de 100 a 500 ms estabelecendo conexões antecipadas com origens importantes de terceiros.

Dois tipos de <link>, preconnect e dns-prefetch, podem ajudar aqui:

preconnect

<link rel="preconnect"> informa ao navegador que sua página quer estabelecer uma conexão com outra origem e que você gostaria que o processo fosse iniciado o mais rápido possível. Quando o navegador solicita um recurso da origem pré-conectada, o download começa imediatamente.

<link rel="preconnect" href="https://cdn.example.com">

dns-prefetch

<link rel="dns-prefetch> processa um pequeno subconjunto do que <link rel="preconnect"> processa. O estabelecimento de uma conexão envolve a busca de DNS e o handshake de TCP. Para origens seguras, as negociações de TLS. dns-prefetch instrui o navegador a resolver apenas o DNS de um domínio específico antes de ser explicitamente chamado.

A dica preconnect é melhor usada apenas para as conexões mais críticas. Para domínios de terceiros menos importantes, use <link rel=dns-prefetch>.

<link rel="dns-prefetch" href="http://example.com">

O suporte do navegador para dns-prefetch é um pouco diferente do suporte a preconnect. Portanto, dns-prefetch pode servir como substituto para navegadores que não oferecem suporte a preconnect. Use tags de link separadas para implementar isso com segurança:

<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">

Recursos de terceiros com carregamento lento

Os recursos incorporados de terceiros podem atrasar significativamente o carregamento da página se for construídos de forma incorreta. Se eles não forem críticos ou estiverem abaixo da dobra (ou seja, se os usuários precisarem rolar para visualizá-los), o carregamento lento é uma boa maneira de melhorar a velocidade da página e exibir métricas. Dessa forma, os usuários acessam o conteúdo da página principal mais rapidamente e têm uma experiência melhor.

.

Uma abordagem eficaz é fazer o carregamento lento do conteúdo de terceiros após o carregamento do conteúdo da página principal. Os anúncios são um bom candidato para essa abordagem.

Os anúncios são uma fonte de renda importante para muitos sites, mas os usuários vêm pelo conteúdo. Ao carregar os anúncios lentamente e mostrar o conteúdo principal mais rapidamente, é possível aumentar a porcentagem geral de visibilidade de um anúncio. Por exemplo, a MediaVine mudou para anúncios de carregamento lento e teve uma melhoria de 200% na velocidade de carregamento da página. O Google Ad Manager tem uma documentação sobre o carregamento lento de anúncios.

Também é possível definir que o conteúdo de terceiros seja carregado somente quando os usuários rolarem até essa seção da página pela primeira vez.

A Intersection Observer é uma API do navegador que detecta com eficiência quando um elemento entra ou sai da janela de visualização do navegador, e pode ser usada para implementar essa técnica. Slowsizes (links em inglês) é uma biblioteca JavaScript conhecida para imagens de carregamento lento e iframes. Ele é compatível com incorporações e widgets do YouTube. Ele também tem suporte opcional para o Intersection Observer.

Usar o atributo loading para imagens e iframes de carregamento lento é uma ótima alternativa às técnicas de JavaScript e foi disponibilizado recentemente no Chrome 76.

Otimize a veiculação de scripts de terceiros

Veja a seguir algumas estratégias recomendadas para otimizar o uso de scripts de terceiros.

Hospedagem de CDN de terceiros

É comum que fornecedores terceirizados forneçam URLs para arquivos JavaScript que hospedam, geralmente em uma rede de fornecimento de conteúdo (CDN). A vantagem dessa abordagem é que você pode começar rapidamente, basta copiar e colar o URL, sem sobrecarga de manutenção. O fornecedor terceirizado lida com a configuração do servidor e as atualizações de scripts.

No entanto, como eles não estão na mesma origem que o restante dos recursos, o carregamento de arquivos de uma CDN pública tem um custo de rede. O navegador precisa realizar uma busca DNS, estabelecer uma nova conexão HTTP e, em origens seguras, realizar um handshake SSL com o servidor do fornecedor.

Ao usar arquivos de servidores de terceiros, você raramente tem controle sobre o armazenamento em cache. Depender da estratégia de armazenamento em cache de outra pessoa pode fazer com que os scripts sejam buscados novamente na rede com muita frequência.

Auto-hospedar scripts de terceiros

A auto-hospedagem de scripts de terceiros é uma opção que oferece mais controle sobre o processo de carregamento de um script. Com uma hospedagem própria, você pode:

• Reduza os tempos de busca DNS e ida e volta.
• Melhore os cabeçalhos de armazenamento em cache HTTP.
• Use o HTTP/2 ou a versão mais recente do HTTP/3.

Por exemplo, a Casper conseguiu diminuir o tempo de carregamento em 1,7 segundo hospedando um script de teste A/B.

No entanto, a auto-hospedagem tem uma grande desvantagem: os scripts podem ficar desatualizados e não vão receber atualizações automáticas quando houver uma mudança na API ou uma correção de segurança.

Usar service workers para armazenar scripts em cache de servidores de terceiros

Como alternativa à auto-hospedagem, é possível usar service workers para armazenar scripts em cache de servidores de terceiros. Isso oferece maior controle sobre o armazenamento em cache, mantendo os benefícios de CDNs de terceiros.

É possível controlar a frequência com que os scripts são buscados novamente na rede e criar uma estratégia de carregamento que limite as solicitações de recursos não essenciais de terceiros até que um usuário chegue a uma interação importante na página. Com o preconnect, é possível estabelecer conexões antecipadas e também ajudar a reduzir os custos de rede.