Oferecer aplicativos rápidos e leves com o Save-Data

Dave Gash

Ilya Grigorik

Jeremy Wagner

A solicitação de dica do cliente Save-Data cabeçalho disponíveis nos navegadores Chrome, Opera e Yandex, permite que os desenvolvedores ofereçam produtos aplicativos mais rápidos para os usuários que ativam o modo de economia de dados no navegador.

A necessidade de páginas leves

Todos concordam que páginas da Web mais rápidas e leves proporcionam uma experiência mais satisfatória ao usuário melhorar a compreensão e a retenção do conteúdo, além de entregar de aumento nas conversões e na receita. Google pesquisa mostrou que "...as páginas otimizadas carregam quatro vezes mais rápido do que a página original e usam 80% a menos de bytes. Como essas páginas carregam muito mais rápido, também registramos um aumento de 50% no tráfego para essas páginas".

E, embora o número de conexões 2G esteja finalmente na recusar, O 2G ainda era a rede dominante tecnologia em 2015. A difusão e disponibilidade de redes 3G e 4G está crescendo rapidamente, mas os custos de propriedade associados e as restrições de rede ainda importante para centenas de milhões de usuários.

Esses são bons argumentos para a otimização das páginas.

Existem métodos alternativos para melhorar a velocidade do site sem o desenvolvedor direto envolvimento do usuário, como navegadores de proxy e serviços de transcodificação. Embora essas e serviços do Google Cloud são muito populares, mas têm desvantagens substanciais: (e às vezes inaceitável) compactação de imagem e texto, incapacidade de processar páginas seguras (HTTPS), otimizando somente páginas acessadas por meio de um resultado de pesquisa; e mais. A popularidade desses serviços por si só é um indicador de que a desenvolvedores não estão lidando corretamente com a alta demanda de usuários aplicativos e páginas. Mas alcançar esse objetivo é uma tarefa complexa caminho difícil.

O cabeçalho da solicitação Save-Data

Uma técnica bem direta é deixar o navegador ajudar, usando o Cabeçalho de solicitação Save-Data. Ao identificar esse cabeçalho, uma página da Web pode personalizar e proporcionam uma experiência do usuário otimizada a custos e desempenho limitados usuários.

Os navegadores compatíveis (abaixo) permitem que o usuário ative um *modo de economia de dados que dá permissão ao navegador para aplicar um conjunto de otimizações para reduzir a quantidade de dados necessária para renderizar a página. Quando esse recurso for exposto ou anunciado, o navegador poderá solicitar imagens de baixa resolução, adiar o carregamento de recursos ou rotear solicitações por um serviço que aplica outros otimizações específicas do conteúdo, como compactação de recursos de imagem e texto.

Suporte ao navegador

• O Chrome 49 ou superior anuncia Save-Data quando o usuário ativa a "Economia de dados" no celular, ou a "Economia de dados" em navegadores de computador.
• O Opera 35+ anuncia o Save-Data quando o usuário ativa o "Opera". Turbo" no computador, ou "Economia de dados" opção em navegadores Android.
• O Yandex 16.2+ anuncia Save-Data quando o Turbo modo é ativado no computador ou dispositivo móvel navegadores.

Detectar a configuração Save-Data

Para determinar quando enviar a "luz" para seus usuários, seus o aplicativo pode verificar o cabeçalho da solicitação de dica do cliente Save-Data. Isso cabeçalho da solicitação indica a preferência do cliente pela redução do uso de dados devido ao custos de transferência altos, velocidades de conexão lentas ou outros motivos.

Quando o usuário ativa o modo de economia de dados, o navegador anexa o cabeçalho da solicitação Save-Data para todas as solicitações enviadas (HTTP e HTTPS). Até o momento, o navegador anuncia apenas um token *on- no cabeçalho. (Save-Data: on), mas isso pode ser estendido no futuro para indicar que outros usuários preferências.

Além disso, é possível detectar se o Save-Data está ativado no JavaScript:

if ('connection' in navigator) {
  if (navigator.connection.saveData === true) {
    // Implement data saving operations here.
  }
}

Verificando a presença do objeto connection no navigator. objeto é vital, pois representa a API Network Information, que é apenas implementadas nos navegadores Chrome, Chrome para Android e Samsung. De lá, você só precisa verificar se navigator.connection.saveData é igual a true, e é possível implementar operações de salvamento de dados nessa condição.

Ativando a extensão Economia de dados no Chrome para computador.

Caso seu aplicativo use um serviço worker, é possível inspecionar os cabeçalhos das solicitações e aplicar a lógica relevante para otimizar a experiência. Como alternativa, o servidor pode procurar as preferências anunciadas no Save-Data e retorna uma resposta alternativa (diferente) marcação, imagens e vídeos menores, e assim por diante.

Dica :se você usa PageSpeed para Apache ou Nginx para otimizar suas páginas, confira este discussão para saber como para economizar em Save-Data para seus usuários._

Dicas de implementação e práticas recomendadas

1. Ao usar Save-Data, forneça alguns dispositivos de interface com suporte a ele e permita que os usuários para alternar facilmente entre as experiências. Por exemplo:
   • Notifique os usuários de que o Save-Data é compatível e incentive-os a usar o recurso.
   • Permitir que os usuários identifiquem e escolham o modo com as instruções e botões ou caixas de seleção intuitivas de ligar/desligar.
   • Quando o modo economia de dados for selecionado, anuncie e ofereça uma maneira fácil e óbvia de desativá-la e voltar para a experiência completa, se quiser.
2. Lembre-se de que aplicativos leves não são aplicativos menores. Eles não omitir funcionalidades ou dados importantes, eles estão apenas cientes os custos envolvidos e a experiência do usuário. Exemplo:
   • Um aplicativo de galeria de fotos pode oferecer visualizações com resolução mais baixa ou usar um mecanismo de carrossel com uso intenso de código.
   • Um aplicativo de pesquisa pode retornar menos resultados por vez, limite o número de resultados com conteúdo pesado de mídia ou reduzir o número de dependências necessárias para renderizar da página.
   • Um site de notícias pode mostrar menos matérias, omitir categorias menos populares, ou fornecer visualizações de mídia menores.
3. Forneça uma lógica de servidor para verificar o cabeçalho da solicitação Save-Data e considerar fornecendo uma resposta de página alternativa e mais clara quando ativado, por exemplo, reduzir o número de dependências e recursos necessários, implementar aplicações compactação de recursos etc.
   • Se você estiver exibindo uma resposta alternativa com base no cabeçalho Save-Data, lembre-se de adicioná-lo à lista Vary (Vary: Save-Data) para informar caches upstream, que devem armazenar em cache e exibir essa versão somente se o O cabeçalho da solicitação Save-Data está presente. Para mais detalhes, consulte as práticas recomendadas para interação com caches.
4. Se você usa um service worker, seu aplicativo pode detectar quando o serviço é ativada verificando a presença da solicitação Save-Data cabeçalho ou verificando o valor do parâmetro navigator.connection.saveData . Se ativado, considere se é possível reescrever a solicitação para buscar menos bytes ou usar uma resposta já buscada.
5. Considere aumentar o Save-Data com outros indicadores, como informações sobre o tipo de conexão e a tecnologia do usuário (consulte NetInfo API). Por exemplo, talvez você oferecer uma experiência leve a qualquer usuário em uma conexão 2G, mesmo que Save-Data não está ativado. Por outro lado, só porque o usuário está em um ritmo "rápido" Conexão 4G do usuário não significa que ele não está interessado em salvar dados — por por exemplo, em roaming. Além disso, você pode aumentar a presença de Save-Data com a dica do cliente Device-Memory para se adaptar ainda mais aos usuários no dispositivos com memória limitada. A memória do dispositivo do usuário também é divulgada Dica do cliente navigator.deviceMemory.

Receitas

O que você pode alcançar com o Save-Data é limitado apenas ao que você pode criar com Para dar uma ideia do que é possível, vamos ver alguns exemplos casos de uso diferentes. Talvez você encontre outros casos de uso próprios enquanto lê isso, então sinta-se à vontade para experimentar e ver o que é possível!

Verificando Save-Data no código do lado do servidor

O estado Save-Data é algo que você pode detectar em JavaScript usando o navigator.connection.saveData, detectá-lo no lado do servidor pode ser preferível. A execução do JavaScript pode falhar em alguns casos. Além disso, a detecção do lado do servidor é a única maneira de modificar a marcação antes de ela ser enviada ao cliente, que está envolvido em alguns dos casos de uso mais benéficos de Save-Data.

A sintaxe específica para detectar o cabeçalho Save-Data no código do lado do servidor depende da linguagem usada, mas a ideia básica deve ser a mesma para qualquer back-end de aplicativos. No PHP, por exemplo, os cabeçalhos das solicitações são armazenados no $_SERVER superglobal matriz nos índices começando com HTTP_. Isso significa que é possível detectar o cabeçalho Save-Data verificar a existência e o valor da variável $_SERVER["HTTP_SAVE_DATA"] assim:

// false by default.
$saveData = false;

// Check if the `Save-Data` header exists and is set to a value of "on".
if (isset($_SERVER["HTTP_SAVE_DATA"]) && strtolower($_SERVER["HTTP_SAVE_DATA"]) === "on") {
  // `Save-Data` detected!
  $saveData = true;
}

Se você fizer essa verificação antes de qualquer marcação ser enviada ao cliente, o $saveData vai conter o estado Save-Data e estará disponível em qualquer lugar para usar na página. Com esse mecanismo ilustrado, vamos conferir alguns exemplos como podemos usá-la para limitar a quantidade de dados que enviamos ao usuário.

Veicular imagens de baixa resolução para telas de alta resolução

Um caso de uso comum de imagens na Web envolve a exibição de imagens em conjuntos de dois: Uma imagem para "padrão" de tela (1x) e outra imagem duas vezes maior (2x) para telas de alta resolução (por exemplo, Retina Display). Essa classe de alta telas de resolução não se limita necessariamente a dispositivos de última geração e é estão se tornando cada vez mais comuns. Nos casos em que uma experiência de aplicativo mais leve é de preferência, pode ser prudente enviar imagens de baixa resolução (1x) para esses em vez de variantes maiores (2x). Para fazer isso quando o Save-Data estiver presente, basta modificar a marcação que enviamos ao cliente:

if ($saveData === true) {
  // Send a low-resolution version of the image for clients specifying `Save-Data`.
  ?><img src="butterfly-1x.jpg" alt="A butterfly perched on a flower."><?php
}
else {
  // Send the usual assets for everyone else.
  ?><img src="butterfly-1x.jpg" srcset="butterfly-2x.jpg 2x, butterfly-1x.jpg 1x" alt="A butterfly perched on a flower."><?php
}

Este caso de uso é um exemplo perfeito de quanto pouco esforço é necessário para acomodar alguém que está pedindo especificamente que você envie menos dados. Se você não gostar modificando a marcação no back-end, você também pode alcançar o mesmo resultado usando um módulo de regravação de URL, como o Apache mod_rewrite. são exemplos de como conseguir isso com configuração relativamente pequena.

Também é possível estender esse conceito para as propriedades CSS background-image ao basta adicionar uma classe ao elemento <html>:

<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">

Aqui, é possível segmentar a classe save-data no elemento <html> da sua CSS para mudar a forma como as imagens são exibidas. Você pode enviar um plano de fundo de baixa resolução imagens para telas de alta resolução, como mostrado no exemplo HTML acima, ou omita alguns recursos completamente.

Omita imagens não essenciais

Alguns conteúdos de imagem na Web simplesmente não são essenciais. Essas imagens podem além de boas coisas para o conteúdo, elas podem não ser desejáveis para pessoas que tentam conseguem remover tudo o que puder dos planos de dados limitados. No que talvez seja o método mais simples caso de uso Save-Data, podemos usar o código de detecção PHP anterior e omitir marcação de imagem não essencial:

<p>This paragraph is essential content. The image below may be humorous, but it's not critical to the content.</p>
<?php
if ($saveData === false) {
  // Only send this image if `Save-Data` hasn't been detected.
  ?><img src="meme.jpg" alt="One does not simply consume data."><?php
}

Essa técnica certamente pode ter um efeito pronunciado, como você pode ver no Figura abaixo:

Uma comparação de imagens não críticas sendo carregadas quando o Save-Data é ausente, enquanto a mesma imagem é omitida quando o Save-Data é presente.

Obviamente, omitir imagens não é a única possibilidade. Você também pode realizar ações Save-Data para abandonar o envio de outros recursos não críticos, como determinados famílias tipográficas.

Omitir fontes da Web não essenciais

Embora as fontes da Web geralmente não representem quase todo o total de uma página, carga útil como as imagens costumam fazer, eles ainda são muito populares. Eles não consomem quantidade insignificante de dados. Além disso, a forma como os navegadores buscam e renderizam fontes é mais complicada do que você pode pensar, com conceitos como FOIT, FOUT e navegador tornando a renderização uma operação com nuances.

Talvez você tenha razão para deixar de fora os recursos fontes para usuários que querem experiências mais simples. Save-Data torna este relativamente simples.

Por exemplo, digamos que você incluiu Fira Sans do Google Fontes no seu site. Fira Sans é um excelente corpo copiar a fonte, mas talvez não seja tão importante para os usuários que tentam salvar dados. Ao adicionar uma classe de save-data para o elemento <html> quando o cabeçalho Save-Data for podemos escrever estilos que invocam a família tipográfica não essencial no início, mas depois desativa quando o cabeçalho Save-Data está presente:

/* Opt into web fonts by default. */
p,
li {
  font-family: 'Fira Sans', 'Arial', sans-serif;
}

/* Opt out of web fonts if the `save-Data` class is present. */
.save-data p,
.save-data li {
  font-family: 'Arial', sans-serif;
}

Com essa abordagem, você pode deixar o snippet <link> do Google Fonts em porque o navegador carrega especulativamente recursos CSS (incluindo fontes) aplicando estilos ao DOM e verificando se há elementos invocam qualquer um dos recursos da folha de estilo. Se alguém acontecer com Save-Data ativado, a Fira Sans nunca é carregada porque o DOM estilizado nunca o invoca. A Arial será aplicada. Não é tão legal quanto Fira Sans, mas ela pode ser preferível para aqueles usuários que estão tentando estender seus planos de dados.

Resumo

O cabeçalho Save-Data não tem muitas nuances. ele está ativado ou desativado. o aplicativo tem o ônus de fornecer experiências adequadas com base sua configuração, independentemente do motivo.

Por exemplo, alguns usuários podem não permitir o modo economia de dados se suspeitarem que há vai resultar na perda de conteúdo ou função do app, mesmo em uma conexão ruim situação. Alguns usuários também podem ativá-lo, obviamente, para manter o mais pequeno e simples possível, mesmo em uma boa situação de conectividade. É melhor para o app presumir que o usuário quer a versão completa e a experiência do usuário até ter uma indicação clara do contrário, por meio de um aviso à ação.

Como proprietários de sites e desenvolvedores web, vamos assumir a responsabilidade de gerenciar nosso conteúdo para melhorar a experiência de usuários com restrições de dados e custo.

Para mais detalhes sobre Save-Data e excelentes exemplos práticos, consulte Ajude seu Usuários Save Data.