Carregar JavaScript de terceiros com eficiência

Milica Mihajlija

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

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

Esta postagem explica como otimizar o processo de carregamento de scripts de terceiros. com as seguintes técnicas:

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

Use async ou defer

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

Os atributos async e defer informam ao navegador que ele pode fazer a análise. o HTML enquanto carrega o script em segundo plano e, em seguida, executa o script após o carregamento. Dessa forma, os downloads de scripts não bloqueiam a construção ou a página do DOM renderização, permitindo que o usuário veja a página antes que todos os scripts tenham terminado carregando.

<script async src="script.js">

<script defer src="script.js">

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

async

Os scripts com o atributo async são executados na primeira oportunidade depois de o download e antes que a janela load. Isso significa que é possível (e provável) que os scripts async não sejam executados na ordem em que elas aparecem no HTML. Isso também significa que eles podem interromper a criação do DOM se concluir o download enquanto o analisador ainda está em andamento.

Scripts com async ainda podem ser bloqueados análise HTML.

defer

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

Os scripts com defer aguardam execução o navegador termina de analisar o HTML.

• Use async se for importante que o script seja executado mais cedo no carregamento de desenvolvimento de software.
• Use defer para recursos menos críticos, 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 melhoramos o tempo de carregamento do anúncio em uma média de quatro segundos.

Observação :os scripts do Google Analytics geralmente são carregados com antecedência para que você não perca nenhum valor valioso dados de análise de dados. Felizmente, existem padrões para inicializar análises lentamente mantendo os dados do carregamento de página antecipado.

Estabelecer conexões antecipadas com as origens necessárias

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

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 gostaria que o processo iniciasse o mais rápido possível. Quando o navegador solicita um recurso da origem pré-conectada, o download será iniciado imediatamente.

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

Cuidado :faça a pré-conexão somente com domínios importantes que serão exibidos na página em breve, porque o navegador encerra qualquer conexão que não seja usada em dez segundos. Desnecessária a pré-conexão pode atrasar outros recursos importantes, portanto, limite o número de domínios pré-conectados e testar o impacto da pré-conexão.

dns-prefetch

<link rel="dns-prefetch> processa um pequeno subconjunto do que Identificadores <link rel="preconnect">. Estabelecer uma conexão envolve a rede do DNS e handshake de TCP. Para origens seguras, negociações TLS. dns-prefetch diz ao navegador para resolver apenas o DNS de um domínio específico antes que ele seja explicitamente chamado.

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

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

Compatibilidade do navegador com dns-prefetch é um pouco diferente do suporte para preconnect, portanto, dns-prefetch pode servir como substituto para navegadores sem suporte preconnect. Use tags de link diferentes para fazer essa implementação com segurança:

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

Carregamento lento de recursos de terceiros

Os recursos incorporados de terceiros podem retardar significativamente o carregamento da página se se elas forem mal construídas. Se não forem essenciais ou estiverem abaixo da dobra (ou seja, se os usuários precisarem rolar a tela para visualizá-los), o carregamento lento é uma boa maneira de melhorar a velocidade da página e as métricas de pintura. Dessa forma, os usuários recebem o conteúdo da página principal mais rápido e ter uma experiência melhor.

Conteúdo com carregamento lento abaixo da dobra

.

Uma abordagem eficaz é carregar lentamente o conteúdo de terceiros depois da página principal o conteúdo é carregado. Os anúncios são uma boa opção para essa abordagem.

Os anúncios são uma importante fonte de renda para muitos sites, mas os usuários vêm pelos conteúdo. Com o carregamento lento de anúncios e a exibição do conteúdo principal com mais rapidez, você pode aumentar a porcentagem geral de visibilidade de um anúncio. Por exemplo, MediaVine mudou para o carregamento lento de anúncios e notamos uma melhoria de 200% na velocidade de carregamento da página. O Google Ad Manager tem documentos sobre como usar o carregamento lento de anúncios.

Também é possível configurar o conteúdo de terceiros para carregar apenas quando os usuários rolarem pela primeira vez até essa seção da página.

Observador de interseção é uma API de navegador que detecta eficientemente quando um elemento entra ou sai da janela de visualização do navegador e você pode usá-lo para implementar essa técnica. Lazysizes é uma biblioteca JavaScript popular para imagens de carregamento lento e iframes. Ela é compatível com incorporações e widgets. Ele também tem suporte opcional para o Intersection Observer.

Atenção: tenha cuidado ao carregar recursos lentamente com JavaScript. Se JavaScript não carrega, talvez devido a condições de rede instáveis, os recursos carregam.

Como usar o atributo loading para imagens e iframes de carregamento lento é uma ótima alternativa às técnicas de JavaScript e recentemente se tornou disponível no Chrome 76.

Otimizar a forma como você veicula scripts de terceiros

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

Hospedagem de CDN de terceiros

É comum que fornecedores terceirizados forneçam URLs para arquivos JavaScript geralmente em uma rede de fornecimento de conteúdo (CDN). Os benefícios dessa abordagem são que você pode começar rapidamente, apenas copie e cole o URL, sem sobrecarga de manutenção. A um fornecedor terceirizado cuida da configuração do servidor e das atualizações de script.

Mas como eles não estão na mesma origem que os outros recursos, o carregamento de arquivos usando 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, executar um handshake SSL com o servidor do fornecedor.

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

Scripts de terceiros auto-hospedados

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

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

Por exemplo, o Casper conseguiu eliminar 1,7 segundo menos tempo de carregamento com a auto-hospedagem de 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.

Cuidado: a atualização manual de scripts pode sobrecarregar muito seu desenvolvimento. e talvez perca atualizações importantes. Se você não usa CDN do Google para veicular todos os seus recursos de terceiros, também estará perdendo armazenamento em cache de borda e você precisa otimizar a compactação do servidor.

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

Use service workers para armazenar em cache scripts de servidores de terceiros. como uma alternativa à auto-hospedagem. Isso oferece maior controle sobre o armazenamento em cache, mantendo os benefícios das CDNs de terceiros.

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