Eliminar recursos que bloqueiam a renderização, reduzir JavaScript não utilizado e minimizar o trabalho da thread principal geralmente são encontrados no topo do relatório do PageSpeed Insights. Eles falam sobre economias potenciais, mas além de usar a tag defer, não há muita informação sobre como fazer isso.
Embora existam algumas maneiras extras de fazer suas páginas carregarem mais rápido ao lidar com JavaScript.
Vamos primeiro resolver o adiamento e depois dar algumas opções extras.
Defer ou async?
Resumindo - adiar o carregamento de scripts faz seu site parecer carregar mais rápido do que usar 'async'. Dependendo do seu uso, pode ou não ser a melhor opção, no entanto.
O atributo 'defer' permite que o navegador continue analisando o HTML enquanto o script é baixado em segundo plano. Mas ele aguarda a execução do script até que a análise do HTML esteja completa. É por isso que a 'pintura' do conteúdo no seu site está carregando mais rápido. A página da web é totalmente carregada para o seu visitante ver mais rapidamente do que sem o atributo ou com o atributo 'async'.
O atributo 'async' permite que o navegador continue analisando o conteúdo HTML enquanto o script está sendo baixado em segundo plano. Mas uma vez que o script é baixado, ele é executado imediatamente. Se a análise do HTML não estiver pronta, isso a interromperia. Então, embora o HTML carregue mais rápido do que sem usar async, a potencial interrupção do carregamento do HTML pode fazer seu site parecer carregar mais lentamente.
Quando usar defer ou async?
Scripts 'async' são executados assim que são baixados, o que não é necessariamente na ordem em que aparecem no documento. O atributo 'defer' preserva a ordem e garante que os scripts sejam executados após o documento ter sido analisado.
'Async' é particularmente útil para scripts que NÃO dependem de nenhum elemento do Document Object Model (DOM) ou de outros scripts. Um script adiado aguarda até que o DOM esteja pronto, tornando-os uma aposta mais segura para scripts que precisam manipular o DOM.
Que tipo de scripts manipulam o DOM?
Bibliotecas como jQuery ou scripts personalizados em geral. Estes manipulam o DOM e devem ser carregados com o atributo 'defer' para garantir que o DOM esteja totalmente carregado antes de serem executados. E, se você tiver scripts que dependem de outros scripts para serem carregados primeiro, usar 'defer' garante que eles sejam executados na ordem em que aparecem no documento.
Scripts de análise, anúncios e coisas menos vitais, geralmente falando, não precisam ser carregados o mais rápido possível. É uma escolha que você tem que fazer, mas a maioria das pessoas prefere um site de carregamento mais rápido em comparação com alguns milissegundos a mais de scripts funcionando mais rápido.
Uma boa regra geral é usar defer para JavaScript não essencial. Se o script não depende do DOM ou de outros scripts, então usar async ou nenhum atributo está bem.
Reduzir JavaScript não utilizado
Hora de fazer uma limpeza de primavera. Sacuda a árvore e livre-se de código morto, aqui significando JavaScript não utilizado. Isso não beneficia apenas a velocidade, mas também a segurança. Escrevemos vários artigos até agora sobre os problemas que podem vir com JavaScript de terceiros. Toda a nossa empresa foi fundada para ajudar a proteger contra as vulnerabilidades associadas a isso. E muitas vezes, sites continuam executando scripts que não são mais usados com grandes riscos que vêm com isso.
Este foi recentemente o caso no ataque à cadeia de suprimentos web do Polyfill, onde um domínio antigo foi comprado por uma nova parte e depois usado para fins maliciosos. Mais de 490.000 sites haviam referenciado este domínio e potencialmente sofreram ataques.
Outras formas são na forma de ferramentas que foram usadas uma vez, mas não mais, ou frameworks que vêm com uma infinidade de bibliotecas JavaScript que não estão em uso em um site específico. Leia mais sobre os riscos de como domínios expirados podem levar a problemas de cibersegurança aqui.
Quanto mais JavaScript você tiver no seu site, maior o risco que você corre.
Costumava ser praticamente impossível detectar mudanças em scripts de terceiros. Felizmente, isso não é mais o caso. Estamos muito orgulhosos de ter construído uma solução que não apenas monitora e alerta, mas é até capaz de bloquear scripts maliciosos de forma autônoma antes que os ataques aconteçam.
Se você usar uma ferramenta de monitoramento como cside, você poderá facilmente ver qual código está sendo carregado onde, bem como o que esse código realmente faz. Com essas informações, é muito mais fácil realizar essa limpeza de primavera e remover scripts indesejados.
Mas cside vai ainda mais longe, o que nos leva ao próximo ponto.
Otimizando JavaScript para carregar mais rápido
cside carrega todos os outros scripts no seu site em um proxy para analisá-lo antes de ser carregado no navegador. Esta é de longe a solução mais segura. Nada malicioso pode tocar o navegador dos seus usuários, o que protege eles e você completamente.
Mas isso vem com alguns desafios. Como o JavaScript é verificado antes de carregar, isso naturalmente adiciona latência. Simplesmente adiar nem sempre é possível, pois carregamos todos os scripts no proxy, também os necessários que impactam os elementos do Document Object Model (DOM) como explicado antes.
Para algumas aplicações, isso ainda estaria bem. Para outras, isso seria um impedimento.
Para nós, isso também foi um impedimento. Sim, segurança em primeiro lugar. Mas se as desvantagens ficarem muito grandes, as empresas hesitarão em adotar os melhores padrões. E devemos garantir que haja o mínimo de desvantagens possível.
É por isso que projetamos cside para realmente otimizar scripts para carregar mais rápido do que o normal, mitigando completamente a latência. Muitas vezes até tornando esses scripts, e portanto sites, mais rápidos em vez de mais lentos.
Como verificamos cada sessão o tempo todo, encontramos os mesmos scripts milhares de vezes por dia. Armazenamos cada versão de um script e, se possível, fazemos cache dele. Isso faz com que possamos carregar as versões em cache, o que é mais rápido do que até mesmo carregar as versões originais de novo.
Reescrevemos especialmente os cabeçalhos de cache para que bloqueemos um script e ainda o tenhamos bloqueado para clientes que já possam tê-lo em seu cache, mantendo o desempenho de cache.
Além disso, projetamos nossa infraestrutura para funcionar incrivelmente rápido. Comparado a outros fornecedores que não serão nomeados, nosso proxy serve um script de 20,3 kb mais rápido do que eles podem servir um script de 1,2 kb. O nosso levou 10ms enquanto o deles levou 13ms em nossos testes, um ganho de velocidade de 22x, assumindo que todos os outros fatores permaneçam constantes.
Finalmente, JavaScript é frequentemente minificado e ofuscado. Minificar é uma maneira comum de obter alguns pequenos ganhos de velocidade. O último pode ter efeitos negativos no desempenho. Saiba apenas que no cside, você pode ver as versões desofuscadas dos scripts para entender melhor o que o código está fazendo.
Compressão
Outra maneira de otimizar JavaScript é usar GZip, Brotli ou outra compressão. São algoritmos que reduzem o tamanho dos arquivos enviados do servidor para o navegador. Funciona identificando e eliminando dados redundantes dentro de um arquivo.
Existem algumas ressalvas para isso, mas geralmente é melhor usá-lo do que não. Leva tempo para compactar e descompactar os arquivos, mas normalmente menos do que o tempo economizado ao baixar um arquivo maior. Portanto, você ainda sai ganhando.
Isso funciona especialmente bem em arquivos de texto, como HTML, CSS e também JavaScript.
Pré-carregamento e pré-busca
O pré-carregamento permite que você busque recursos críticos (como JavaScript) antes que sejam necessários pelo navegador. Esses recursos ficam então disponíveis assim que são necessários, reduzindo os tempos de carregamento. O navegador priorizará esses recursos, baixando-os durante o carregamento inicial da página.
Por exemplo, pré-carregar um arquivo JavaScript garante que ele esteja disponível quando o navegador chegar ao ponto no HTML onde normalmente carregaria esse script. Isso evita atrasos causados pelo navegador precisar buscar o arquivo nesse ponto.
Isso pode soar o mesmo que os atributos 'defer' ou 'async', mas existem algumas diferenças importantes.
O pré-carregamento garante que recursos críticos como CSS, fontes e arquivos JavaScript importantes sejam buscados cedo e priorizados pelo navegador para disponibilidade imediata.
Lembre-se de que o atributo 'defer' é usado para atrasar a execução de JavaScript até que o documento HTML tenha sido totalmente analisado. E então novamente, o atributo 'async' permite que scripts sejam buscados e executados assim que estiverem disponíveis, sem esperar que a análise do HTML seja concluída.
Outro exemplo de pré-carregamento é usar uma fonte personalizada no seu site. Se essa fonte não for carregada rapidamente, os usuários podem ver uma fonte padrão primeiro, levando a um flash de texto sem estilo. Ao pré-carregar a fonte, você garante que isso não ocorra.
A pré-busca então, concentra-se em buscar recursos durante o tempo ocioso do navegador para necessidades futuras, como recursos para a próxima página para a qual o usuário provavelmente navegará. Carregar durante esses tempos ociosos reduz significativamente os tempos de espera.
Minimizar o trabalho da thread principal
A thread principal é onde o navegador faz a maior parte do trabalho necessário para exibir uma página, como analisar e executar HTML, CSS e JavaScript. Mantê-la rápida e eficiente é necessário para uma experiência de usuário geralmente boa.
PageSpeed Insights dá algumas dicas sobre isso.
A renderização pode ser otimizada aderindo a propriedades somente do compositor. Estas são propriedades CSS que podem ser tratadas inteiramente pelo compositor do navegador, ignorando a thread principal e a necessidade de operações de layout ou pintura. Simplificar a complexidade de pintura reduzindo as áreas que precisam ser pintadas pode ajudar ainda mais o navegador a renderizar a página de forma mais eficiente, acelerando os tempos de carregamento.
Quando se trata de estilo e layout, simplificar seu CSS e evitar seletores complexos pode reduzir significativamente o tempo gasto em cálculos de estilo. Isso pode ser alcançado reduzindo o escopo e a complexidade dos cálculos de estilo. Provavelmente será um equilíbrio entre design e desempenho.
Evitar layout thrashing é essencial. Layout thrashing ocorre quando realizamos leituras e escritas consecutivas no DOM, impedindo o navegador de otimizar o layout. Isso força o navegador a calcular um layout que nunca é renderizado na tela.
Considere adiar CSS não crítico, carregando estilos não essenciais de forma assíncrona para evitar que bloqueiem operações da thread principal durante o caminho crítico de renderização.
De volta ao JavaScript.
Para avaliação de script, debouncing de manipuladores de entrada é útil. Ajuda a reduzir a frequência com que os manipuladores de eventos são chamados, diminuindo assim a carga na thread principal. Note que web workers têm um ambiente restrito. Eles não podem manipular diretamente o DOM ou usar certas APIs disponíveis para a thread principal.
Finalmente, a coleta de lixo pode ser otimizada monitorando o uso de memória. Usar ferramentas como 'measureMemory()' ajuda a rastrear e gerenciar o uso de memória, reduzindo o tempo gasto na coleta de lixo. O gerenciamento eficiente de memória ajuda a manter a thread principal livre para tarefas mais críticas.
Vinculando desempenho à segurança
Todas essas soluções ajudarão você a acelerar JavaScript para alcançar melhor desempenho. cside pode ajudar fazendo cache e otimizando scripts também.
Mas gostaríamos de enfatizar que, antes de tudo, somos sobre segurança. O fato de acelerarmos scripts foi principalmente necessário para adoção por nossos usuários. Ataques à cadeia de suprimentos do navegador estão em ascensão. E agentes mal-intencionados frequentemente visam JavaScript de terceiros. cside analisa cada script antes de carregar no navegador e bloqueia qualquer coisa maliciosa.
Uma abordagem proativa que salva tanto você quanto seus usuários antes que qualquer coisa ruim aconteça.
Você pode começar com cside gratuitamente.
