Além de eliminar downloads de recursos desnecessários, a melhor coisa que você pode fazer para melhorar a velocidade de carregamento de página é minimizar o tamanho geral do download otimizando e compactando os recursos restantes.
Introdução à compactação de dados
Depois de configurar seu site para evitar o download de recursos não utilizados, a próxima etapa é compactar os recursos qualificados restantes que o navegador precisa fazer o download. Dependendo do tipo de recurso (texto, imagens, fontes etc.), há muitas técnicas diferentes para escolher: ferramentas genéricas que podem ser ativadas no servidor da Web, otimizações de pré-processamento para tipos de conteúdo específicos e otimizações específicas de recursos que exigem entrada do desenvolvedor.
Para oferecer o melhor desempenho, é preciso combinar todas as seguintes técnicas:
- A compactação é o processo de codificação de informações usando menos bits.
- Eliminar dados desnecessários sempre gera os melhores resultados.
- Há muitas técnicas e algoritmos de compactação diferentes.
- Você vai precisar de várias técnicas para conseguir a melhor compactação.
O processo de reduzir o tamanho dos dados é a compactação de dados. Muitas pessoas contribuíram com algoritmos, técnicas e otimizações para melhorar as taxas e a velocidade de compactação, além da memória exigida por vários algoritmos de compactação.
Uma discussão completa sobre compactação de dados está muito além do escopo deste guia. No entanto, é importante entender, em um nível geral, como a compactação funciona e as técnicas que você pode usar para reduzir o tamanho de vários recursos que suas páginas exigem.
Para ilustrar os princípios básicos dessas técnicas, considere o processo de otimização de um formato de mensagem de texto simples que foi inventado apenas para este exemplo:
# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 08/25/16
AAAZZBBBBEEEMMM EEETTTAAA
- As mensagens podem conter anotações arbitrárias, às vezes chamadas de comentários, que são indicadas pelo prefixo "#". As anotações não afetam o significado da mensagem nem os comportamentos dela.
- As mensagens podem conter cabeçalhos, que são pares de chave-valor (separados por
":"no exemplo anterior) que aparecem no início da mensagem. - As mensagens carregam payloads de texto.
O que pode ser feito para reduzir o tamanho da mensagem anterior, que começa com 200 caracteres?
- O comentário é interessante, mas não afeta o significado da mensagem. Elimine-o ao transmitir a mensagem.
- Existem boas técnicas para codificar cabeçalhos de maneira eficiente. Por exemplo, se você souber que todas as mensagens têm "formato" e "data", poderá convertê-las em IDs de números inteiros curtos e enviá-las. No entanto, isso pode não ser verdade, então é melhor não mexer nisso por enquanto.
- O payload é somente texto. Embora não saibamos o que o conteúdo realmente
é (aparentemente, ele está usando um
"secret-cipher"), basta olhar para o texto para ver que há muita redundância nele. Em vez de enviar letras repetidas, você pode contar o número de letras repetidas e codificá-las de forma mais eficiente. Por exemplo,"AAA"se torna"3A", que representa uma sequência de três "A"s.
A combinação dessas técnicas produz o seguinte resultado:
format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A
A nova mensagem tem 56 caracteres, o que significa que você compactou a mensagem original em 72%. Essa é uma redução significativa.
Este é um exemplo simples de como os algoritmos de compactação podem ser eficazes na redução do tamanho de transferência de recursos baseados em texto. Na prática, os algoritmos de compactação são muito mais sofisticados do que o exemplo anterior ilustra e, na Web, eles podem ser usados para reduzir significativamente os tempos de download de recursos. Ao aplicar a compactação a recursos baseados em texto, uma página da Web pode gastar menos tempo carregando recursos, para que os usuários possam ver os efeitos deles mais rapidamente do que sem a compactação.
Minificação: pré-processamento e otimizações específicas do contexto
A primeira técnica discutida aqui é a minificação. Embora a minificação não seja estritamente um algoritmo de compactação, ela é uma maneira de remover caracteres desnecessários e redundantes usados no código-fonte para tornar os recursos mais legíveis para humanos. No entanto, essa legibilidade não é necessária para manter a funcionalidade desse código-fonte em sites de produção e pode atrasar o carregamento de recursos na Web.
A minificação é um tipo de otimização específica de conteúdo que pode reduzir significativamente o tamanho dos recursos entregues. Essas otimizações são mais bem aplicadas como parte do processo de build e implantação. Por exemplo, os bundlers são um tipo de software muito usado que pode minificar recursos automaticamente antes da implantação de um novo código de produção em um site.
A melhor maneira de compactar dados redundantes ou desnecessários é eliminá-los. No entanto, não é possível excluir dados arbitrários. No entanto, em alguns contextos em que temos conhecimento específico do conteúdo do formato de dados e das propriedades dele, é possível reduzir significativamente o tamanho do payload sem afetar o significado ou os recursos reais dele.
<html>
<head>
<style>
/* awesome-container is only used on the landing page */
.awesome-container {
font-size: 120%;
}
.awesome-container {
width: 50%;
}
</style>
</head>
<body>
<!-- awesome container content: START -->
<div>
This is my awesome container, and it is <em>so</em> awesome.
</div>
<!-- awesome container content: END -->
<script>
awesomeAnalytics(); // Beacon conversion metrics
</script>
</body>
</html>
Considere o snippet de HTML anterior e os três tipos de conteúdo diferentes que ele contém:
- Marcação HTML.
- CSS para personalizar a apresentação de uma página.
- JavaScript para potencializar interações e outros recursos avançados de página.
Cada um desses tipos de conteúdo tem regras diferentes para o que constitui conteúdo válido, regras diferentes para especificar comentários e assim por diante. No entanto, a pergunta que permanece é: "como o tamanho dessa página pode ser reduzido?"
- Os comentários de código são os melhores amigos de um desenvolvedor, mas o navegador não precisa
deles. Remover comentários de CSS (
/* ... */), HTML (<!-- ... -->) e JavaScript (// ...) reduz o tamanho total de transferência da página e dos sub-recursos dela. - Um compressor de CSS "inteligente" pode notar que estamos usando uma maneira ineficiente de
definir regras para
.awesome-containere recolher as duas declarações em uma sem afetar outros estilos, economizando mais bytes. Em um grande conjunto de regras CSS, remover esse tipo de redundância pode fazer diferença, mas talvez não seja algo que possa ser aplicado de forma agressiva, já que os seletores geralmente são duplicados em contextos diferentes, como em consultas de mídia. - Espaços e tabulações são conveniências para desenvolvedores em HTML, CSS e JavaScript. Um compressor adicional pode remover todas as guias e espaços. Ao contrário de outras técnicas de eliminação de duplicação, esse tipo de otimização pode ser aplicado de forma bastante agressiva, desde que esses espaços ou guias não sejam necessários para a apresentação da página. Por exemplo, é recomendável preservar os espaços em execuções de texto em um documento HTML, já que eles garantem a legibilidade do conteúdo que os usuários vão ver.
<html><head><style>.awesome-container{font-size:120%;width:50%}</style></head><body><div>This is my awesome container, and it is <em>so</em> awesome.</div><script>awesomeAnalytics()</script></body></html>
Depois de aplicar as etapas anteriores, a página passa de 516 para 204 caracteres, o que representa uma economia de aproximadamente 60%. É verdade que não é muito legível, mas não precisa ser para ser utilizável. As práticas de desenvolvimento modernas também permitem que você mantenha as versões bem formatadas e legíveis do código-fonte separadas do código bem otimizado que você envia para produção. Combinado com mapas de origem, que fornecem uma representação legível do código de produção transformado, você pode resolver bugs na produção com mais facilidade. Assim, você tem uma boa experiência de desenvolvedor e otimiza o desempenho para melhorar a experiência do usuário.
O exemplo anterior ilustra um ponto importante: um compressor de uso geral, como um projetado para compactar texto arbitrário, poderia fazer um bom trabalho ao compactar a página no exemplo anterior, mas nunca saberia remover os comentários, recolher regras CSS ou dezenas de outras otimizações específicas de conteúdo. Por isso, o pré-processamento, a minificação e outras otimizações sensíveis ao contexto são importantes.
Da mesma forma, as técnicas descritas acima podem ser estendidas além dos recursos baseados em texto. Imagens, vídeos e outros tipos de conteúdo têm as próprias formas de metadados e vários payloads. Por exemplo, sempre que você tira uma foto com uma câmera, o arquivo geralmente incorpora muitas informações extras: configurações da câmera, localização etc. Dependendo do aplicativo, esses dados podem ser essenciais (por exemplo, um site de compartilhamento de fotos) ou completamente inúteis. Considere se vale a pena remover. Na prática, esses metadados podem adicionar até dezenas de kilobytes a cada imagem.
Em resumo, como uma primeira etapa para otimizar a eficiência dos seus recursos, crie um inventário dos diferentes tipos de conteúdo e considere quais tipos de otimizações específicas de conteúdo podem ser aplicadas para reduzir o tamanho deles. Depois de descobrir quais são, automatize essas otimizações adicionando-as às etapas de build e lançamento para garantir que sejam aplicadas de forma consistente a cada novo lançamento para produção.
Compactação de texto com algoritmos de compactação
A próxima etapa para reduzir o tamanho dos recursos baseados em texto é aplicar um algoritmo de compactação a eles. Isso vai um passo além, procurando agressivamente padrões repetíveis em payloads baseados em texto antes de enviá-los ao usuário e descompactando-os quando eles chegam ao navegador do usuário. O resultado é uma redução ainda maior e significativa desses recursos e, consequentemente, tempos de download mais rápidos.
- O gzip e o Brotli são algoritmos de compactação usados com frequência que funcionam melhor em recursos baseados em texto: CSS, JavaScript e HTML.
- Todos os navegadores mais recentes são compatíveis com a compactação gzip e Brotli e anunciam
suporte para ambas no cabeçalho da solicitação HTTP
Accept-Encoding. - Seu servidor precisa estar configurado para permitir a compactação. O software servidor da Web geralmente permite que os módulos compactem recursos baseados em texto por padrão.
- Tanto o gzip quanto o Brotli podem ser ajustados para melhorar as taxas de compactação, ajustando o nível de compactação. Para gzip, as configurações de compactação variam de 1 a 9, sendo 9 a melhor. Para o Brotli, esse intervalo é de 0 a 11, sendo 11 o melhor. No entanto, configurações de compactação mais altas exigem mais tempo. Para recursos que são compactados dinamicamente, ou seja, no momento da solicitação, as configurações no meio do intervalo tendem a oferecer o melhor equilíbrio entre taxa de compactação e velocidade. No entanto, é possível usar a compactação estática, que é quando a resposta é compactada com antecedência e, portanto, pode usar as configurações de compactação mais agressivas disponíveis para cada algoritmo de compactação.
- As redes de fornecimento de conteúdo (CDNs) geralmente oferecem compactação automática de recursos qualificados. As CDNs também podem gerenciar a compactação dinâmica e estática para você, o que significa um aspecto a menos para se preocupar.
gzip e Brotli são compactadores comuns que podem ser aplicados a qualquer stream de bytes. Nos bastidores, eles se lembram de parte do conteúdo de um arquivo que foi examinado anteriormente e, em seguida, tentam encontrar e substituir fragmentos de dados duplicados de maneira eficiente.
Na prática, tanto o gzip quanto o Brotli têm melhor desempenho em conteúdo baseado em texto, geralmente alcançando taxas de compactação de até 70% a 90% para arquivos maiores. No entanto, executar esses algoritmos em recursos que já estão compactados usando algoritmos alternativos, como a maioria dos formatos de imagem que usam técnicas de compactação com ou sem perdas, gera pouca ou nenhuma melhoria.
Todos os navegadores mais recentes anunciam suporte para gzip e Brotli no
cabeçalho da solicitação HTTP Accept-Encoding. No entanto, é responsabilidade do provedor de hospedagem
garantir que o servidor da Web esteja configurado corretamente para disponibilizar o
recurso compactado quando o cliente o solicitar.
| Arquivo | Algoritmo | Tamanho descompactado | Tamanho compactado | Taxa de compressão |
|---|---|---|---|---|
| angular-1.8.3.js | Brotli | 1.346 KiB | 256 KiB | 81% |
| angular-1.8.3.js | gzip | 1.346 KiB | 329 KiB | 76% |
| angular-1.8.3.min.js | Brotli | 173 KiB | 53 KiB | 69% |
| angular-1.8.3.min.js | gzip | 173 KiB | 60 KiB | 65% |
| jquery-3.7.1.js | Brotli | 302 KiB | 69 KiB | 77% |
| jquery-3.7.1.js | gzip | 302 KiB | 83 KiB | 73% |
| jquery-3.7.1.min.js | Brotli | 85 KiB | 27 KiB | 68% |
| jquery-3.7.1.min.js | gzip | 85 KiB | 30 KiB | 65% |
| lodash-4.17.21.js | Brotli | 531 KiB | 73 KiB | 86% |
| lodash-4.17.21.js | gzip | 531 KiB | 94 KiB | 82% |
| lodash-4.17.21.min.js | Brotli | 71 KiB | 23 KiB | 68% |
| lodash-4.17.21.min.js | gzip | 71 KiB | 25 KiB | 65% |
A tabela anterior mostra a economia que as compactações Brotli e gzip podem proporcionar para algumas bibliotecas JavaScript conhecidas. A economia varia de 65% a 86%, dependendo do arquivo e do algoritmo. Para referência, o nível máximo de compactação foi aplicado a cada arquivo para Brotli e gzip. Sempre que possível, prefira o Brotli ao gzip.
Ativar a compactação é uma das otimizações mais simples e eficazes de implementar. Se o seu site não estiver aproveitando isso, você está perdendo uma grande oportunidade de melhorar o desempenho para os usuários. Felizmente, muitos servidores da Web oferecem configurações padrão que permitem essa otimização importante, e as CDNs, em particular, são muito eficazes na implementação de uma maneira que equilibra a velocidade e a taxa de compactação.
Uma maneira rápida de ver a compactação em ação é abrir o Chrome DevTools, abrir o painel Rede, carregar uma página de sua escolha e observar a parte inferior do painel de rede.
Como na imagem anterior, você verá um detalhamento de:
- O número de solicitações, que é o número de recursos carregados para a página.
- O tamanho da transferência de todas as solicitações. Isso reflete a eficácia da compactação aplicada a qualquer um dos recursos de uma página.
- O tamanho do recurso de todas as solicitações. Isso reflete o tamanho dos recursos da página depois de serem descompactados.
Efeitos nas Core Web Vitals
As melhorias de desempenho não podem ser medidas, a menos que haja métricas que reflitam essas melhorias. A iniciativa Core Web Vitals existe para criar e aumentar a conscientização sobre métricas que refletem a experiência real do usuário. Isso é diferente de métricas, como o tempo de carregamento da página, por exemplo, que não se traduzem claramente na qualidade da experiência do usuário.
Ao aplicar as otimizações descritas neste guia aos recursos do seu site, os efeitos nas Core Web Vitals podem variar, com base nos recursos otimizados e nas métricas envolvidas. No entanto, veja alguns casos em que aplicar essas otimizações pode melhorar as Core Web Vitals do seu site:
- Os recursos HTML minificados e compactados podem melhorar o carregamento
desse HTML, a facilidade de descoberta dos sub-recursos e, portanto, melhorar o
carregamento deles. Isso pode ser benéfico para a Largest Contentful Paint
(LCP) de uma página. Embora as dicas de recursos, como
rel="preload", possam ser usadas para afetar a facilidade de descoberta de recursos, o uso excessivo delas pode causar problemas com a contenção de largura de banda. Ao garantir que a resposta HTML de uma solicitação de navegação seja compactada, os recursos dentro dela podem ser descobertos o mais rápido possível pelo scanner de pré-carregamento. - Alguns candidatos à LCP também podem ser carregados mais rapidamente usando a compactação. Por exemplo, as imagens SVG que são candidatas à LCP podem ter a duração do carregamento de recursos reduzida com a compactação baseada em texto. Isso é diferente das otimizações que você faria em outros tipos de imagem, que são compactadas de forma intrínseca por outros métodos, como as imagens JPEG, que usam compactação com perda.
- Além disso, os nós de texto também podem ser candidatos à LCP. A forma como as técnicas descritas neste guia dependem do uso de uma fonte da Web para o texto nas páginas da Web. Se você estiver usando uma fonte da Web, as práticas recomendadas de otimização de fontes da Web se aplicam. No entanto, se você não estiver usando fontes da Web, mas sim fontes do sistema que são exibidas sem incorrer em nenhuma duração de carregamento de recursos, a minificação e a compactação do CSS reduzem essa duração, o que significa que a renderização de possíveis nós de texto LCP pode ocorrer mais cedo.
Conclusão
A forma como você otimiza a codificação e a transferência de recursos baseados em texto é um conceito de desempenho básico, mas que tem um grande impacto. Faça tudo o que puder para garantir que os recursos qualificados para minificação e compactação se beneficiem dessas otimizações.
E, mais importante, verifique se esses processos estão sendo automatizados. Para minificação, use um bundler para aplicar a minificação aos recursos qualificados. Verifique se a configuração do seu servidor da Web é compatível com a compactação, mas, mais do que isso, use a compactação mais eficaz disponível. Para facilitar ao máximo, use CDNs para automatizar a compactação, já que elas não apenas podem compactar recursos, mas também podem fazer isso muito rapidamente.
Ao consolidar esses conceitos de performance de referência na arquitetura do seu site, você garante que seus esforços de otimização de performance estejam em uma boa base e que as otimizações subsequentes possam se basear em uma base sólida de boas práticas de referência.