La solicitud de sugerencia del cliente Save-Data
encabezado
disponibles en los navegadores Chrome, Opera y Yandex permiten a los desarrolladores publicar
aplicaciones más rápidas a los usuarios que habilitan el modo de ahorro de datos en su navegador.
La necesidad de páginas livianas
Todos coinciden en que las páginas web más rápidas y livianas brindan un usuario más satisfactorio una mejor experiencia, mejorar la comprensión y retención del contenido y ofrecer de aumento en las conversiones y los ingresos. Google demostró que "... las páginas optimizadas se cargan cuatro veces más rápido que la página original y usan un 80% menos bytes. Como estas páginas se cargan mucho más rápido, también observamos un aumento del 50% el tráfico a estas páginas".
Y, aunque el número de conexiones 2G está finalmente en la rechazar, La red 2G seguía siendo la red dominante tecnología en 2015. La penetración y la disponibilidad de las redes 3G y 4G está creciendo. con rapidez, pero los costos de propiedad asociados y las restricciones de red siguen siendo es un factor importante para cientos de millones de usuarios.
Estos son argumentos sólidos para la optimización de páginas.
Existen métodos alternativos para mejorar la velocidad del sitio sin un desarrollador directo involucrada, como los navegadores proxy y los servicios de transcodificación. Aunque este tipo de son bastante populares e incluyen desventajas importantes: simples (y a veces inaceptable), compresión de imágenes y texto, incapacidad de procesar páginas seguras (HTTPS), que optimizan solo las páginas visitadas a través de un resultado de la búsqueda más. La gran popularidad de estos servicios es un indicador de que la Web los desarrolladores no están abordando adecuadamente la alta demanda de usuarios de aplicaciones y páginas. Pero alcanzar ese objetivo es una tarea compleja y, a veces, o camino más difícil.
El encabezado de la solicitud Save-Data
Una técnica bastante sencilla es dejar que el navegador te ayude mediante el
Encabezado de la solicitud Save-Data
. Al identificar este encabezado, una página web puede personalizar
y brindan una experiencia del usuario optimizada
usuarios.
Los navegadores compatibles (a continuación) permiten que el usuario habilite un *modo de ahorro de datos que otorga permiso al navegador para aplicar un conjunto de optimizaciones para reducir la la cantidad de datos necesarios para procesar la página. Cuando se expone esta función anunciado, el navegador puede solicitar imágenes de menor resolución, aplazar la carga de algunos recursos o enrutar solicitudes a través de un servicio que aplica otras optimizaciones específicas del contenido, como la compresión de recursos de imagen y texto.
Navegadores compatibles
- Chrome 49 y versiones posteriores anuncia
Save-Data
cuando el usuario habilita el "Ahorro de datos" en dispositivos móviles o el "Ahorro de datos" en navegadores de escritorio. - Opera 35+ anuncia
Save-Data
cuando el usuario habilita "Opera" Turbo" en computadoras de escritorio, o "Ahorro de datos" opción en navegadores Android. - Yandex 16.2+ anuncia
Save-Data
cuando Turbo el modo es habilitar en computadoras de escritorio o dispositivos móviles del navegador.
Detecta el parámetro de configuración Save-Data
Para determinar cuándo entregar la "luz" una experiencia fluida a los usuarios,
la aplicación puede verificar el encabezado Save-Data
de la solicitud de sugerencia del cliente. Esta
el encabezado de solicitud indica la preferencia del cliente por reducir el uso de datos debido a
altos costos de transferencia, velocidad de conexión lenta y otras razones.
Cuando el usuario habilita el modo de ahorro de datos en su navegador, el navegador agrega
el encabezado de la solicitud Save-Data
a todas las solicitudes salientes (HTTP y HTTPS)
A partir de este momento, el navegador solo anuncia un token *on- en el encabezado.
(Save-Data: on
), pero es posible que se amplíe en el futuro para indicar a otros usuarios
preferencias.
Además, es posible detectar si Save-Data
está activado en JavaScript:
if ('connection' in navigator) {
if (navigator.connection.saveData === true) {
// Implement data saving operations here.
}
}
Comprueba la presencia del objeto connection
en navigator
.
objeto es vital, ya que representa a la API de Network Information, que solo es
en los navegadores Chrome, Chrome para Android y Samsung. Desde
solo tendrás que verificar si navigator.connection.saveData
es igual a
true
y puedes implementar cualquier operación de guardado de datos en esa condición.
![El
El encabezado Save-Data que se muestra en las Herramientas para desarrolladores de Chrome que se muestra junto con el
extensión Reducir datos.](https://web.developers.google.cn/static/articles/optimizing-content-efficiency-save-data/image/the-save-data-header-reve-3d6257f960c6c.png?authuser=5&hl=es)
Si tu aplicación usa un servicio
trabajadora, puede
Inspeccionar los encabezados de la solicitud y aplicar la lógica relevante para optimizar la experiencia
Como alternativa, el servidor puede buscar las preferencias anunciadas en la
Encabezado de solicitud Save-Data
y muestra una respuesta alternativa (diferente)
lenguaje de marcado, imágenes y videos más pequeños, etcétera.
Sugerencias y prácticas recomendadas para la implementación
- Cuando uses
Save-Data
, proporciona algunos dispositivos de IU que lo admitan y permitan a los usuarios para alternar fácilmente entre experiencias. Por ejemplo:- Notifica a los usuarios que
Save-Data
es compatible y anímalos a usarlo. - Permitir que los usuarios identifiquen y elijan el modo mediante las instrucciones correspondientes y botones o casillas de verificación intuitivas.
- Cuando se seleccione el modo de ahorro de datos, anuncia y proporciona una respuesta de inhabilitarla y volver a la experiencia completa si lo deseas.
- Notifica a los usuarios que
- Recuerda que las aplicaciones ligeras no son aplicaciones menores. No
omitir funcionalidades o datos importantes, solo son más conscientes del
los costos involucrados y la experiencia del usuario. Por ejemplo:
- Una aplicación de galería de fotos puede ofrecer vistas previas de menor resolución o usar una mecanismo de carrusel con mucho código.
- Una aplicación de búsqueda puede devolver menos resultados a la vez, limitar el número de mucho contenido multimedia o reduce la cantidad de dependencias necesarias para renderizar la página.
- Un sitio orientado a las noticias puede mostrar menos noticias, omitir categorías menos populares o brindar vistas previas más pequeñas de los medios.
- Proporciona lógica del servidor para verificar el encabezado de la solicitud
Save-Data
y considera y proporciona una respuesta de página alternativa más ligera cuando está habilitada, p.ej., reducir la cantidad de dependencias y recursos requeridos, aplicar medidas compresión de recursos, etcétera- Si entregas una respuesta alternativa basada en el encabezado
Save-Data
, recuerda agregarlo a la lista Vary,Vary: Save-Data
, para contar cachés upstream que deberían almacenarse en caché y entregar esta versión solo si El encabezado de la solicitudSave-Data
está presente. Para obtener más detalles, consulta las prácticas recomendadas para interacción con cachés.
- Si entregas una respuesta alternativa basada en el encabezado
- Si usas un service worker, tu aplicación puede detectar cuándo se guardan
se habilite la opción verificando la presencia de la solicitud
Save-Data
encabezado o verificando el valor denavigator.connection.saveData
propiedad. Si se habilita, considera si puedes reescribir la solicitud para recuperarla. menos bytes o usar una respuesta ya recuperada. - Considera aumentar el
Save-Data
con otros indicadores, como información sobre el tipo de conexión y la tecnología del usuario (consulta NetInfo API). Por ejemplo, podrías quieren ofrecer la experiencia ligera a cualquier usuario con una conexión 2G, incluso siSave-Data
no está habilitada. Por el contrario, el hecho de que el usuario esté 4G no significa que no le interese guardar datos, por ejemplo, por ejemplo, en roaming. Además, puedes aumentar la presencia deSave-Data
con la sugerencia del cliente deDevice-Memory
para adaptarte aún más a los usuarios en dispositivos con memoria limitada. La memoria del dispositivo del usuario también se anuncia Sugerencia del cliente denavigator.deviceMemory
.
Recetas
Lo que puedes lograr con Save-Data
se limita solo a lo que puedes encontrar
tus amigos. Para que tengas una idea de lo que es posible, veamos
diferentes. Es posible que se te ocurran otros casos de uso a medida que lees esto, de modo que
¡no dudes en experimentar y ver las posibilidades!
Buscando Save-Data
en el código del servidor
Si bien el estado Save-Data
es algo que puedes detectar en JavaScript a través de
navigator.connection.saveData
, su detección en el servidor se
a veces preferible. En algunos casos, es posible que JavaScript no se ejecute. Además,
La detección del servidor es la única forma de modificar el lenguaje de marcado antes de que se envíe
que participa en algunos de los casos de uso más beneficiosos de Save-Data
.
La sintaxis específica para detectar el encabezado Save-Data
en el código del servidor
depende del lenguaje utilizado, pero la idea básica debe ser la misma para cualquier
en el backend de una app. En PHP, por ejemplo, los encabezados de las solicitudes se almacenan en el
$_SERVER
superglobal
array en los índices
empezando por HTTP_
. Esto significa que puedes detectar el encabezado Save-Data
si
verificar la existencia y el valor de la variable $_SERVER["HTTP_SAVE_DATA"]
así:
// 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;
}
Si realizas esta verificación antes de que se envíe cualquier lenguaje de marcado al cliente, $saveData
contiene el estado Save-Data
y estará disponible en cualquier lugar
usar en la página. Con este mecanismo ilustrado, veamos algunos ejemplos de
y cómo podemos usarlo para limitar
la cantidad de datos que le enviamos al usuario.
Publica imágenes de baja resolución para pantallas de alta resolución
Un caso de uso común para las imágenes de la Web implica entregar imágenes en conjuntos de dos:
Una imagen para "estándar" pantallas (1x) y otra imagen del doble de grande
(2x) para pantallas de alta resolución (p.ej., Retina
Display). Esta clase de alto
alta resolución no se limita necesariamente a dispositivos de alta gama y es
se están volviendo cada vez más comunes. En los casos en los que se requiere una experiencia de aplicación más ligera
preferente, sería prudente enviar imágenes de menor resolución (1x) a estas
en lugar de variantes más grandes (2x). Para lograr esto cuando Save-Data
encabezado, solo modificamos el lenguaje de marcado que le enviamos al 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 es un ejemplo perfecto de lo poco esfuerzo que se necesita para adaptarse
o una persona que te pida específicamente
que le envíes menos datos. Si no te gusta
modificar el lenguaje de marcado en el backend, también puedes lograr el mismo resultado
con un módulo de reescritura de URL, como Apache's
mod_rewrite
Hay
son ejemplos de cómo lograr
esto con
configuración relativamente pequeña.
También puedes extender este concepto a las propiedades background-image
de CSS:
simplemente agregando una clase al elemento <html>
:
<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">
Desde aquí, puedes orientar la clase save-data
en el elemento <html>
de tu
CSS, para cambiar la forma en que se publican las imágenes. Puedes enviar un fondo de baja resolución
imágenes en pantallas de alta resolución, como se muestra en el ejemplo de HTML anterior, o puedes omitir
ciertos recursos por completo.
Omite imágenes no esenciales
Algunas imágenes de la Web simplemente no son esenciales. Si bien tales imágenes pueden
ofrecen ventajas extra al contenido, es posible que no sean
deseables para quienes intentan
aprovechar al máximo los planes de datos medidos. ¿Cuál es, quizás, la más sencilla
caso de uso de Save-Data
, podemos usar el código de detección de PHP anterior y omitir
el lenguaje de marcado de imágenes
no esencial:
<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
}
Esta técnica puede tener un efecto pronunciado, como se puede observar en el figura a continuación:
![Comparación de imágenes no críticas
se cargan cuando Guardar datos no está disponible, en lugar de omitir esas mismas imágenes
cuando están presentes los datos de guardado.](https://web.developers.google.cn/static/articles/optimizing-content-efficiency-save-data/image/a-comparison-non-critica-f5ac2f016e117.png?authuser=5&hl=es)
Por supuesto, omitir imágenes no es la única posibilidad. También puedes tomar medidas
Save-Data
para no enviar otros recursos no críticos, como ciertos
los tipos de letra.
Omite las fuentes web no esenciales
Si bien las fuentes web no suelen representar una buena parte del total de una página útil como lo hacen las imágenes, siguen siendo muy populares. No consumen un 70% una cantidad insignificante de datos. Además, la manera en que los navegadores recuperan y renderizan fuentes es más complicada que podrías pensar, con conceptos como FOIT: FOUT y navegador de datos que hacen que la renderización sea una operación con matices.
Puede razonar entonces que tal vez quiera omitir los sitios web
fuentes para los usuarios que desean experiencias del usuario más eficientes. Save-Data
hace de este un
razonablemente indoloro.
Por ejemplo, supongamos que has incluido Fira
Sans de Google
Las fuentes de tu sitio. Fira Sans es un excelente cuerpo
copiar la fuente, pero quizás no sea tan crucial para los usuarios que intentan ahorrar datos. Agregando
una clase de save-data
al elemento <html>
cuando el encabezado Save-Data
es
podemos escribir estilos que invoquen al principio el tipo de letra no esencial,
pero luego lo inhabilita cuando está presente el encabezado Save-Data
:
/* 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;
}
Con este enfoque, puedes dejar el fragmento <link>
de Google Fonts en
porque el navegador carga especulativamente recursos CSS (incluida la
fuentes) aplicando, primero, estilos al DOM, y luego verificando si hay algún elemento HTML
invocan cualquiera de los recursos de la hoja de estilo. Si ocurre alguna de estas situaciones,
con Save-Data
activada, Fira Sans nunca se cargará porque el DOM con estilo nunca
lo invoca. En su lugar, se usará Arial. No es tan bonito como Fira Sans, pero
puede ser preferible a aquellos usuarios que intentan extender sus planes de datos.
Resumen
El encabezado Save-Data
no tiene muchos matices. ya sea que esté encendida o apagada y
la aplicación es responsable de proporcionar las experiencias adecuadas según
su configuración, independientemente del motivo.
Por ejemplo, algunos usuarios podrían no permitir el modo de ahorro de datos si sospechan que implicará la pérdida de funciones o contenido de la app, incluso con una conectividad deficiente de la situación actual. Por el contrario, algunos usuarios podrían habilitarla, por supuesto, para mantener páginas tan pequeñas y sencillas como sea posible, incluso en una buena conexión. Es mejor que la app suponga que el usuario desea la app experiencia hasta que tenga una indicación clara de lo contrario a través de un usuario explícito acción.
Como propietarios de sitios y desarrolladores web, asumamos la responsabilidad de administrar nuestro contenido para mejorar la experiencia del usuario con limitaciones de datos y costos.
Para obtener más información sobre Save-Data
y excelentes ejemplos prácticos, consulta Ayuda a
Usuarios Save Data
.