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.
![A
Cabeçalho Save-Data revelado nas Ferramentas para desenvolvedores do Chrome, junto com o
Economia de dados.](https://web.developers.google.cn/static/articles/optimizing-content-efficiency-save-data/image/the-save-data-header-reve-3d6257f960c6c.png?authuser=6&hl=pt)
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.
Dicas de implementação e práticas recomendadas
- 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.
- Notifique os usuários de que o
- 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.
- 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çãoSave-Data
está presente. Para mais detalhes, consulte as práticas recomendadas para interação com caches.
- Se você estiver exibindo uma resposta alternativa com base no cabeçalho
- 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âmetronavigator.connection.saveData
. Se ativado, considere se é possível reescrever a solicitação para buscar menos bytes ou usar uma resposta já buscada. - 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 queSave-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 deSave-Data
com a dica do clienteDevice-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 clientenavigator.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 carregado quando Save-Data está ausente, versus a mesma imagem sendo omitida
quando Save-Data estiver presente.](https://web.developers.google.cn/static/articles/optimizing-content-efficiency-save-data/image/a-comparison-non-critica-f5ac2f016e117.png?authuser=6&hl=pt)
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
.