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

Ilya Grigorik

Jeremy Wagner

Depois de eliminar downloads de recursos desnecessários, a melhor coisa que você pode fazer para melhorar a velocidade de carregamento da página é minimizar o tamanho geral do download otimizando e compactar os recursos restantes.

Introdução à compactação de dados

Depois de configurar seu site para evitar o download de recursos não utilizados, o a próxima etapa é compactar os recursos qualificados restantes para fazer o download. Dependendo do tipo de recurso, como 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 conteúdo específico e otimizações específicas de recursos que exigem entradas da desenvolvedor.

Para alcançar o melhor desempenho, é preciso uma combinação de todos os requisitos a seguir técnicas:

• 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á muitas técnicas e algoritmos de compactação diferentes.
• Serão necessárias diversas técnicas para conseguir a melhor compactação.

O processo de reduzir o tamanho dos dados é a compactação de dados. Muitas pessoas têm contribuíram com algoritmos, técnicas e otimizações para melhorar a compactação. a velocidade e a memória necessárias para os vários componentes algoritmos.

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 elevado, como funciona a compactação e técnicas que você pode usar para reduzir o tamanho de vários recursos que suas páginas precisam.

Para ilustrar os princípios fundamentais dessas técnicas, considere o processo de otimizando 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, às vezes chamadas de comentários, indicados pelo "#" . As anotações não afetam o significado ou os comportamentos da mensagem.
2. 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.
3. As mensagens contêm payloads de texto.

O que pode ser feito para reduzir o tamanho da mensagem anterior, que começa em 200 caracteres?

1. O comentário é interessante, mas não afeta o significado da mensagem. Elimine-o ao transmitir a mensagem.
2. Há boas técnicas para codificar cabeçalhos de maneira eficiente. Para exemplo, se você sabe que todas as mensagens têm "format" e "data", você poderia convertê-los em IDs inteiros curtos e enviá-los. No entanto, isso pode não ser verdade, então é melhor deixar em paz por enquanto.
3. O payload é apenas de texto. Embora não saibamos o conteúdo dele, (aparentemente, está usando uma "secret-cipher"), apenas olhando para o texto mostra que há muita redundância. Em vez de enviar letras repetidas, você pode apenas contar o número de letras repetidas e codificá-los com mais eficiência. Por exemplo, "AAA" se torna "3A", 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ê compactou o a mensagem original em 72%. É uma redução significativa!

Esse é um exemplo prático de como os algoritmos de compressão podem ser eficazes reduzindo o tamanho da transferência de recursos baseados em texto. Na prática, a compactação são muito mais sofisticados do que ilustra o exemplo anterior, e na Web, os algoritmos de compactação podem ser usados para reduzir significativamente os recursos. Ao aplicar a compactação aos recursos baseados em texto, uma página da Web podem gastar menos tempo carregando recursos, para que os usuários possam ver os efeitos da esses recursos mais cedo do que fariam 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, é uma forma de remover 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 do código-fonte em sites de produção e podem atrasar o carregamento recursos na Web.

A minificação é um tipo de otimização específica do conteúdo que pode significativamente reduz o tamanho dos recursos entregues e quais otimizações são mais bem aplicadas como parte do processo de criação e implantação. Por exemplo, bundlers são uma comumente usado que reduz os recursos de modo automático 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 simplesmente excluir dados arbitrários. Mas, em alguns contextos têm conhecimento específico do conteúdo do formato de dados e de suas propriedades, é possível de reduzir significativamente o tamanho da carga sem afetar sua significados ou capacidades reais.

<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 HTML anterior e os três tipos de conteúdo diferentes que ele contém:

1. marcação HTML.
2. CSS para personalizar a apresentação de uma página.
3. JavaScript para incrementar as interações e outros recursos avançados da página.

Cada um desses tipos de conteúdo tem regras diferentes sobre o que constitui um regras diferentes para especificar comentários etc. A pergunta que resta é "como o tamanho desta página pode ser reduzido?"

• Os comentários no código ajudam os desenvolvedores, mas o navegador não precisa eles! Remoção de CSS (/* ... */), HTML (<!-- ... -->) e JavaScript (// ...) reduz o tamanho total da transferência da página e seu sub-recursos.
• Um "inteligente" O compressor do CSS poderá notar que estamos usando uma forma ineficiente de definindo regras para .awesome-container e recolher as duas declarações em um sem afetar os outros estilos, economizando mais bytes. Em uma grande de regras CSS, a remoção desse tipo de redundância pode resultar, mas talvez ser algo que pode ser aplicado de forma agressiva, pois seletores são muitas vezes necessariamente duplicados em contextos diferentes, como nas consultas de mídia.
• Espaços e guias são conveniências para desenvolvedores em HTML, CSS e JavaScript. Um compressor adicional pode separar todas as guias e espaços. Diferente de outros de duplicação, esse tipo de otimização pode ser aplicado de forma justa de forma agressiva, desde que esses espaços ou tabulações não sejam necessários para o comportamento apresentação; por exemplo, convém preservar os espaços dentro de execuções de em um documento HTML, porque garantem a legibilidade do conteúdo que os usuários veria.

<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>

Após a aplicação das etapas anteriores, a página vai de 516 para 204 caracteres, que são representa uma economia de aproximadamente 60%. Sim, não está muito legível, mas não precisa ser assim para ser utilizável. As práticas de desenvolvimento moderno também permitem que você mantenha as versões bem formatadas e legíveis do seu código-fonte separado do código bem otimizado que você envia para a produção. Combinado com de mapas de origem, que fornecem uma representação legível dos blocos de o código de produção facilita a solução de bugs na produção. tenham uma boa experiência de desenvolvedor e otimizem o desempenho para da experiência do usuário.

O exemplo anterior ilustra um ponto importante: um modelo compressor, por exemplo, projetado para compactar texto arbitrário, poderia fazer um ótimo trabalho de compactar a página no exemplo anterior, mas nunca saberia remover comentários, recolher regras de CSS ou dezenas de outras configurações e otimizações. É por isso que o pré-processamento, a minificação e outras ferramentas baseadas no contexto como as otimizações são importantes.

Da mesma forma, as técnicas descritas acima podem ser estendidas para além de de uma empresa. Imagens, vídeo e outros tipos de conteúdo têm formas próprias de metadados e diversos payloads. Por exemplo, sempre que você tira uma foto com câmera, seu arquivo normalmente incorpora várias informações extras: configurações da câmera, localização e assim por diante. Dependendo do seu aplicativo, esses dados podem ser essenciais (por exemplo, um site de compartilhamento de fotos) ou pode ser completamente inútil. Você se vale a pena removê-la. Na prática, esses metadados podem adicionar até dezenas de kilobytes para cada imagem.

Em suma, como a primeira etapa para otimizar a eficiência de seus recursos, crie um inventário dos diferentes tipos de conteúdo e considere que tipos otimizações específicas do conteúdo que você pode aplicar para reduzir o tamanho deles. Depois, depois você descobriu o que são, automatize essas otimizações adicionando-as ao suas etapas de build e lançamento para garantir que as otimizações 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 uma algoritmo de compressão a eles. Isso vai um passo além, ao criar uma abordagem em busca de padrões repetíveis em payloads baseados em texto antes de enviá-los ao pelo usuário e descompactando-as assim que chegam ao navegador do usuário. A como resultado, é uma redução adicional e significativa desses recursos, e subsequente tempos de download mais rápidos.

• O gzip e o Brotli são algoritmos de compactação usados com frequência e que apresentam melhor desempenho recursos baseados em texto: CSS, JavaScript, HTML.
• Todos os navegadores modernos oferecem suporte à compactação gzip e Brotli e os suporte para ambos no cabeçalho de solicitação HTTP Accept-Encoding.
• Seu servidor deve estar configurado para ativar a compactação. Software servidor da Web muitas vezes permitem que os módulos compactem recursos baseados em texto por padrão.
• O gzip e 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 nota. Para Brotli, esse intervalo é de 0 a 11, com 11 ser a 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: configurações no meio do intervalo tendem a oferecer o melhor entre a taxa de compressão e a velocidade. No entanto, a compactação estática é possível, que é quando a resposta é compactada antecipadamente e pode portanto, use 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. CDNs também podem gerenciar a compactação dinâmica e estática para o que proporciona a você um aspecto de compactação a menos para se preocupar.

O gzip e o Brotli são compressores comuns que podem ser aplicados a qualquer fluxo de bytes. Nos bastidores, eles se lembram de alguns dos conteúdos previamente examinados de um arquivo e, em seguida, tentar localizar e substituir fragmentos de dados duplicados em eficiente.

Na prática, tanto o gzip quanto o Brotli apresentam melhor desempenho em conteúdo baseado em texto, geralmente atingindo taxas de compactação de até 70 a 90% para arquivos maiores. No entanto, executar recursos de algoritmos que já estão compactados usando algoritmos alternativos, como do que a maioria dos formatos de imagem que usam técnicas de compressão com ou sem perda, o que gera com pouca ou nenhuma melhoria.

Todos os navegadores modernos suportam gzip e Brotli no Cabeçalho de solicitação HTTP Accept-Encoding. No entanto, é a conta de serviço responsabilidade de garantir que o servidor da Web seja configurado corretamente para exibir recurso compactado quando o cliente o solicitar.

A tabela anterior mostra as economias que a compactação Brotli e gzip podem para algumas bibliotecas JavaScript bem conhecidas. As economias variam de 65% a 86%, dependendo do arquivo e do algoritmo. Para referência, o valor máximo nível de compactação aplicado a cada arquivo, tanto para o Brotli quanto para o gzip. Onde quer que possível, prefira o Brotli ao gzip.

Ativar a compactação é uma das otimizações mais simples e eficazes para implementar. Se seu site não estiver aproveitando esse recurso, você está perdendo uma grande oportunidade de melhorar o desempenho dos usuários. Felizmente, muitos sites servidores oferecem configurações padrão que permitem essa otimização importante, e CDNs em particular são muito eficazes na implementação de uma forma que equilibra a velocidade e a taxa de compressão.

Uma forma rápida de ver a compactação em ação é abrir o Chrome DevTools, abrir o Rede, carregue uma página de sua escolha e observe a parte inferior da no painel “Network”.

Assim como na imagem anterior, você vai encontrar um detalhamento de:

• O número das solicitações, que é o número de recursos carregados para o página.
• O tamanho da transferência de todas as solicitações. Isso reflete a eficácia da é aplicada a qualquer um dos recursos da página.
• O tamanho do recurso de todas as solicitações. Isso reflete o tamanho dos recursos da página são depois da descompactação.

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 o reconhecimento de métricas que refletem a experiência real do usuário. Isso é diferente em métricas, como tempo simples de carregamento de página, que não se traduzem claramente na qualidade da experiência do usuário.

Quando você aplicar as otimizações descritas neste guia aos recursos na sua os efeitos nas Core Web Vitals podem variar, dependendo dos recursos otimizada e as métricas envolvidas. No entanto, aqui estão alguns casos em que aplicar essas otimizações pode melhorar as Core Web Vitals do seu site:

• Recursos HTML que são minificados e compactados podem melhorar o carregamento de esse HTML, a capacidade de descoberta de seus sub-recursos e, consequentemente, melhorar antes do carregamento delas. Isso pode ser útil para a Maior exibição de conteúdo de uma página (LCP). Embora dicas de recursos, como rel="preload", possam ser usadas para afetar a facilidade de descoberta de recursos, o uso excessivo deles pode causar problemas contenção de largura de banda. Ao garantir que a resposta HTML para uma solicitação de navegação for compactado, os recursos dentro dele poderão ser descobertos o mais rápido possível pelo verificador de pré-carregamento.
• Alguns candidatos à LCP também podem ser carregados mais cedo usando a compactação. Para Por exemplo, imagens SVG que são candidatas a LCP podem ter a carga de recursos duração menor com a compactação baseada em texto. Isso é diferente que você faria em outros tipos de imagem, que são intrinsecamente compactado por meio de outros métodos de compactação, como a forma como usam a compactação com perdas.
• Além disso, os nós de texto também podem ser candidatos à LCP. Como as técnicas descritas neste guia depende de você estar usando uma fonte da Web para texto suas páginas da Web. Se usar uma fonte da Web, Otimização de fontes da Web práticas recomendadas. No entanto, se você não usar fontes da Web, mas sim fontes fontes exibidas sem incorrer em qualquer duração de carregamento de recursos, reduzindo a compactação do seu CSS reduz essa duração, ou seja, a renderização possíveis nós de texto de LCP podem ocorrer mais cedo.

Conclusão

O modo de otimizar a codificação e a transferência de recursos baseados em texto é um valor de referência o conceito de desempenho, mas é um que tem um grande impacto. Tenha certeza de que você está fazendo tudo que puder para garantir que os recursos qualificados para minificação e e compactação se beneficiam dessas otimizações.

Acima de tudo, certifique-se de que esses processos sejam automatizados. Para minificação, use um bundler para aplicar a minificação aos recursos qualificados. Garanta se a configuração do seu servidor da Web oferece suporte à compactação, mas, mais do que isso, use a compactação mais eficaz disponível. Para tornar isso o mais trivial possível, usar CDNs para automatizar a compactação, pois elas não só compactam recursos para você, mas também podem fazer isso muito rapidamente.

Consolidando esses conceitos básicos de desempenho nas do Google, você garante que seus esforços de otimização de desempenho estejam uma boa base e que as otimizações subsequentes possam estar em uma base sólida de boas práticas de referência.