Artigo de Huibao Lin e Eyal Peled, publicado originalmente pelo Android Security Team. A tradução foi feita pela Redação iMasters com autorização.

No Google, acreditamos na concepção de produtos tendo a velocidade como um princípio fundamental. O formato de páginas mobile aceleradas – Accelerated Mobile Pages (AMP) ajuda a garantir que o conteúdo seja carregado de forma confiável rapidamente, mas podemos fazer ainda melhor.

O cache inteligente é um dos ingredientes-chave nos experimentos instantâneos do AMP que os usuários recebem em produtos como Google Search e Google News & Weather. Com o cache, podemos tornar o conteúdo, em geral, fisicamente mais próximo dos usuários que o estão solicitando, de modo que os bytes sejam transmitidos mais rapidamente até chegar ao usuário. Além disso, o uso de uma única infraestrutura comum, como um cache, oferece maior consistência nos tempos de veiculação de páginas, apesar do conteúdo originar de muitos hosts, o que pode ter uma latência muito diferente – e muito maior – em servir o conteúdo, comparado ao cache.

Entregas mais rápidas e consistentes são as principais razões pelas quais as páginas veiculadas na experiência de AMP da Pesquisa do Google provêm do Cache do Google AMP. A infraestrutura de serviço de conteúdo unificada do Cache abre a incrível possibilidade de criar otimizações que escalam para melhorar a experiência em centenas de milhões de documentos veiculados. Fazer isso, permitindo que qualquer documento seja capaz de tirar proveito desses benefícios é uma das principais razões para o Cache do Google AMP estar disponível gratuitamente para qualquer pessoa usar.

Neste artigo, vamos destacar duas melhorias que introduzimos recentemente: (1) otimização de entrega de imagens e (2) permitir que o conteúdo seja servido com mais sucesso em condições de largura de banda restrita através de um projeto chamado “AMP Lite”.

Otimizações de imagem pelo Cache do Google AMP

Em média, na web, as imagens compõem 64% dos bytes de uma página. Isso significa que elas são um alvo muito promissor para otimizações impactantes.

A aplicação de otimizações de imagem é uma maneira eficaz de diminuir bytes na transmissão. O Cache do Google AMP emprega a pilha de otimização de imagem usada pelos Módulos PageSpeed e pela Compressão de Dados do Chrome. (Observe que, para fazer as transformações acima, o Cache do Google AMP desconsidera o cabeçalho “Cache-Control: no-transform”.) Os sites podem obter as mesmas otimizações de imagem em sua origem, instalando PageSpeed em seu servidor.

Aqui está um resumo de algumas das otimizações que fizemos:

1) Remover dados que são invisíveis ou difíceis de serem vistos

Removemos dados de imagem invisíveis para os usuários, como os metadados de thumbnails e geolocalização. Para imagens JPEG, também reduzimos a qualidade e as amostras de cor, se elas forem maiores do que o necessário. Para ser exato, reduzimos a qualidade JPEG para 85 e amostras de cores para 4:2:0 – ou seja, uma amostra de cores em cada quatro pixels. A compressão de um JPEG para uma qualidade superior a esta ou com mais amostras de cores exige mais bytes, mas a diferença visual é difícil de notar.

Os dados de imagem reduzidos são, então, comprimidos exaustivamente. Descobrimos que essas otimizações reduzem bytes em mais de 40%, e não são visíveis aos olhos do usuário.

2) Conversão de imagens para o formato WebP

Alguns formatos de imagem são mais mobile friendly. Convertemos JPEG para WebP para navegadores suportados. Esta transformação leva a uma redução adicional de mais de 25% em bytes sem perda de qualidade.

3) Adicionando srcset

Nós adicionamos “srcset” se ele não foi incluído. Isso se aplica a tags “amp-img” com “src”, mas nenhum atributo “srcset”. A operação inclui expansão da tag “amp-img”, bem como o redimensionamento da imagem para várias dimensões. Isso reduz ainda mais a contagem de bytes em dispositivos com telas pequenas.

4) Usando imagens de qualidade inferior em algumas circunstâncias

Diminuímos a qualidade das imagens JPEG quando há uma indicação de que isso é desejado pelo usuário ou por condições de rede muito lentas (como parte do AMP Lite discutido abaixo). Por exemplo, reduzimos a qualidade de imagem JPEG para 50 para usuários do Chrome que ativaram o Data Saver. Esta transformação leva a outra redução de byte em 40% + para imagens JPEG.

Veja nesses links as imagens antes (em jpeg) e depois (em webp) das otimizações. Originalmente, a imagem tem 241.260 bytes e depois de aplicar otimizações 1, 2 e 4 fica com 25.760 bytes. Após as otimizações, a imagem parece essencialmente a mesma, mas 89% dos bytes foram economizados.

 

AMP Lite para condições de rede lentas

Muitas pessoas ao redor do mundo acessam a internet com velocidades de conexão lentas ou em dispositivos com baixa RAM e descobrimos que algumas páginas AMP não são otimizadas para esses usuários com restrições severas de largura de banda. Por esta razão, o Google também lançou AMP Lite para remover ainda mais bytes de páginas AMP para esses usuários.

Com o AMP Lite, aplicamos todas as otimizações acima às imagens. Em particular, usamos sempre níveis de qualidade mais baixos (ver tópico 4 acima).

Além disso, otimizamos fontes externas usando a tag amp-font, definindo o tempo limite de carregamento da fonte em 0 segundos para que as páginas possam ser exibidas imediatamente, independentemente de a fonte externa ter sido previamente armazenada em cache ou não.

A AMP Lite foi lançado para usuários com restrições de banda em vários países, como o Vietnã e a Malásia, e para usuários de dispositivos de baixo nível de RAM globalmente. Observe que essas otimizações podem modificar os detalhes finos de algumas imagens, mas não afetam outras partes da página, incluindo anúncios.

 

 

Em resumo, vemos uma redução combinada de 45% em bytes em todas as otimizações listadas acima.

Esperamos ir ainda mais longe no sentido de tornar o uso mais eficiente dos dados dos usuários para oferecer experiências de AMP ainda mais rápidas.

 

***

Este artigo é do Android Security Team. Ele foi escrito por Huibao Lin e Eyal Peled. A tradução foi feita pela Redação iMasters com autorização. Você pode acessar o original em: https://developers.googleblog.com/2017/01/google-amp-cache-amp-lite-and-need-for.html