Can’t make the #ChromeDevSummit this year? Catch all the content (and more!) on the livestream, or join your peers for a CDS Extended event at a hosted location nearby. To learn more, check out the Chrome Dev Summit 2019 website.

Otimizar a codificação e o tamanho de transferência dos recursos baseados em texto

Além de eliminar o download de recursos desnecessários, a melhor coisa que podemos fazer para melhorar a velocidade do carregamento de página é minimizar o tamanho geral do download. Isso poder ser feito otimizando e comprimindo os recursos que ainda restam.

Introdução à compressão de dados

Após eliminar todos os recursos desnecessários, seu próximo passo é comprimir os recursos restantes que o navegador tem que fazer o download. Dependendo do tipo de recurso (texto, imagens, fontes etc.), existem muitas técnicas diferentes a escolher: ferramentas genéricas que podem ser ativadas no servidor, otimizações de pré-processamento para tipos de conteúdo específicos e otimizações de recursos específicos que exigem interação do desenvolvedor.

O fornecimento do melhor desempenho exige uma combinação de todas essas técnicas.

TL;DR

  • A compressão é o processo de codificar informações usando menos bits.
  • A eliminação de dados desnecessários sempre proporciona os melhores resultados.
  • Há diversas técnicas e algoritmos de compressão diferentes.
  • Serão necessárias diversas técnicas para conseguir a melhor compressão.

O processo de reduzir o tamanho dos dados é a compressão de dados. Muitas pessoas contribuíram com algoritmos, técnicas e otimizações para melhorar as taxas de compressão, velocidade e requisitos de memória de vários compressores. A discussão completa sobre a compressão de dados está além do escopo deste tópico. No entanto, é importante entender, em um nível elevado, como a compressã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 fundamentais 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
  1. As mensagens podem conter anotações arbitrárias, indicadas pelo prefixo "#". As anotações não afetam o significado ou qualquer outro comportamento da mensagem.
  2. As mensagens podem conter cabeçalhos, que são pares de chave-valor (separados por ":") que devem aparecer no início da mensagem.
  3. As mensagens podem conter payloads de texto.

O que você pode fazer para reduzir o tamanho da mensagem acima, que atualmente tem 200 caracteres?

  1. O comentário é interessante, mas na verdade não afeta o significado da mensagem. Elimine-o ao transmitir a mensagem.
  2. Existem boas técnicas para codificar cabeçalhos de uma maneira eficiente. Por exemplo, se você sabe que todas as mensagens têm "format" e "date", você pode convertê-las em IDs inteiros curtos e enviar só esses IDs. No entanto, não sabemos se isso é verdade, então não faremos nada por enquanto.
  3. O payload é apenas texto e, embora seu conteúdo real seja desconhecido (aparentemente, é uma "mensagem secreta"), basta olhar o texto para perceber que existe muita redundância. Em vez de enviar letras repetidas, talvez você possa contar o número de letras duplicadas e codificá-las com mais eficiência. Por exemplo, "AAA" torna-se "3A", o que representa uma sequência de três As.

Combinar essas 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ê comprimiu a mensagem original em impressionantes 72%.

Ótimo, mas como isso pode ajudar a otimizar nossas páginas da Web? Não tentaremos inventar nossos algoritmos de compressão, mas como você verá, podemos usar exatamente as mesmas técnicas e os mesmos processos de pensamento ao otimizar vários recursos em nossas páginas: pré-processamento, otimizações específicas ao contexto e algoritmos diferentes para diferentes conteúdos.

Minificação: pré-processamento e otimizações específicas por contexto

TL;DR

  • As otimizações específicas por conteúdo podem reduzir substancialmente o tamanho dos recursos entregues.
  • Elas são mais bem aplicadas como parte do ciclo de compilação/versão.

A melhor forma de comprimir dados redundantes ou desnecessários é eliminá-los totalmente. Não podemos simplesmente excluir dados arbitrários. No entanto, em alguns contextos em que temos conhecimento específico do conteúdo do formato de dados e de suas propriedades, muitas vezes é possível reduzir consideravelmente o tamanho do payload sem afetar seu significado real.

<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>…</div>
   <!-- awesome container content: END -->
   <script>
     awesomeAnalytics(); // beacon conversion metrics
   </script>
 </body>
</html>

Experimente

Considere a página HTML simples acima e os três tipos de conteúdo diferentes que contém: marcação HTML, estilos CSS e JavaScript. Cada um desses tipos de conteúdo tem regras diversas para o que constitui conteúdo válido, regras diferentes para indicar comentários e assim por diante. Como podemos reduzir o tamanho dessa página?

  • Os comentários de código ajudam muito os desenvolvedores, mas o navegador não precisa deles. A simples eliminação dos comentários CSS (/* … */), HTML (<!-- … -->) e JavaScript (// …) pode reduzir substancialmente o tamanho total da página.
  • Um compressor de CSS "inteligente" pode notar que estamos usando uma forma ineficiente de definir regras para ".awesome-container" e recolher as duas declarações em uma sem afetar os outros estilos e economizando mais bytes.
  • O espaço em branco (espaços e guias) é conveniente para desenvolvedores no HTML, no CSS e no JavaScript. Um compressor adicional pode eliminar todas as guias e espaços.
<html><head><style>.awesome-container{font-size:120%;width: 50%}</style></head><body><div>…</div><script>awesomeAnalytics();
</script></body></html>

Experimente

Após aplicar as etapas acima, a página diminui de 406 para 150 caracteres, uma economia de compressão de 63%. Sim, não é muito legível. Mas não precisa ser: você pode manter a página original como sua "versão de desenvolvimento" e aplicar as etapas acima sempre que a página estiver pronta para ser enviada ao site.

Voltando um pouco, o exemplo acima ilustra um ponto importante: um compressor genérico, como um compressor projetado para comprimir texto arbitrário, provavelmente pode comprimir a página acima com eficiência, mas não saberia como eliminar comentários, recolher as regras CSS ou executar dezenas de outras otimizações específicas do conteúdo. É por isso que pré-processamento/minificação/otimização sensível ao contexto pode ser uma ferramenta tão eficiente.

Da mesma forma, as técnicas descritas acima podem ser estendidas para além de simples recursos baseados em texto. Imagens, vídeo e outros tipos de conteúdo têm as próprias formas de metadados e diversos payloads. Por exemplo, sempre que você tira uma fotografia com uma câmera, a foto normalmente incorpora várias informações adicionais: configurações da câmera, localização e assim por diante. Dependendo do aplicativo, esses dados podem ser essenciais (por exemplo, um site de compartilhamento de fotos) ou totalmente inúteis, e você deve considerar se vale a pena removê-los. Na prática, esses metadados podem chegar a dezenas de kilobytes para cada imagem.

Resumindo, como primeira etapa na otimização da eficiência dos recursos, crie um inventário dos diferentes tipos de conteúdo e considere os tipos de otimizações específicas que podem ser aplicadas a eles para reduzir seu tamanho. Então, depois de descobrir o que são, automatize essas otimizações adicionando-as aos seus processos de construção e de versão para garantir que sejam aplicadas.

Compressão de texto com GZIP

TL;DR

  • O GZIP tem melhor desempenho em recursos baseados em texto: CSS, JavaScript e HTML.
  • Todos os navegadores modernos são compatíveis com a compressão GZIP e a solicitam automaticamente.
  • Seu servidor deve ser configurado para ativar a compressão GZIP.
  • Algumas CDNs exigem atenção especial para garantir que o GZIP está ativado.

GZIP é um compressor genérico que pode ser aplicado a qualquer stream de bytes. Nos bastidores, ele lembra de alguns dos conteúdos previamente vistos e tenta localizar e substituir fragmentos de dados duplicados de forma eficiente. Caso tenha curiosidade, aqui está uma ótima explicação de nível inferior de GZIP.) No entanto, na prática, o GZIP tem seu melhor desempenho com conteúdo baseado em texto, conseguindo muitas vezes taxas de compressão de até 70% a 90% nos arquivos maiores. Por outro lado, a execução do GZIP em recursos que já estão comprimidos com outros algoritmos (por exemplo, a maioria dos formatos de imagem) proporciona pouca ou nenhuma melhoria.

Todos os navegadores modernos são compatíveis e automaticamente negociam a compressão GZIP para todas as solicitações HTTP. Você precisa garantir que o servidor esteja configurado corretamente para disponibilizar o recurso comprimido quando o cliente solicitá-lo.

Biblioteca Tamanho Tamanho comprimido Proporção de compressão
jquery-1.11.0.js 276 KB 82 KB 70%
jquery-1.11.0.min.js 94 KB 33 KB 65%
angular-1.2.15.js 729 KB 182 KB 75%
angular-1.2.15.min.js 101 KB 37 KB 63%
bootstrap-3.1.1.css 118 KB 18 KB 85%
bootstrap-3.1.1.min.css 98 KB 17 KB 83%
foundation-5.css 186 KB 22 KB 88%
foundation-5.min.css 146 KB 18 KB 88%

A tabela acima mostra as economias que a compressão do GZIP produz para algumas das bibliotecas JavaScript e CSS mais populares. As economias variam de 60% a 88%, e a combinação de arquivos reduzidos (identificados por ".min" nos seus nomes de arquivo) com o GZIP oferece economia ainda maior.

  1. Aplique antes as otimizações específicas do conteúdo: Minimizadores CSS, JS e HTML.
  2. Aplique o GZIP para compactar a saída reduzida.

Ativar o GZIP é uma das otimizações mais simples e mais recompensadoras a implementar e, no entanto, muitas pessoas não implementam. A maioria dos servidores da Web compacta o conteúdo por você. Basta verificar se o servidor está configurado corretamente para compactar todos os tipos de conteúdo que se beneficiam com a compactação do GZIP.

O projeto HTML5 Boilerplate contém exemplos de arquivos de configuração para todos os servidores mais usados, com comentários detalhados para cada sinalizador e a definição da configuração. Para determinar a melhor configuração para seu servidor, faça o seguinte:

  • Encontre seu servidor favorito na lista.
  • Procure a seção GZIP.
  • Verifique se ele está definido de acordo com as configurações recomendadas.

Demonstração de tamanho real x tamanho de transferência no DevTools

Uma forma rápida e simples de ver o GZIP funcionando é abrir o Chrome DevTools e observar a coluna "Size / Content" no painel Network: "Size" indica o tamanho da transferência do recurso e "Content" o tamanho não comprimido dele. Para o recurso HTML no exemplo anterior, GZIP economizou 98,8 KB durante a transferência.

Finalmente, embora a maioria dos servidores compacte automaticamente os recursos ao disponibilizá-los ao usuário, algumas CDNs exigem cuidados especiais e esforço manual para garantir que o recurso do GZIP seja veiculado. Audite o site e verifique se os recursos estão realmente sendo comprimidos.

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.