Entrega de aplicaciones rápidas y ligeras con Save-Data

Dave Gash
Dave Gash
Ilya Grigorik
Jeremy Wagner

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

Estadísticas de Weblight

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

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.
Cómo habilitar la extensión de Ahorro de datos en el escritorio de Chrome.

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

  1. 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.
  2. 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.
  3. 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 solicitud Save-Data está presente. Para obtener más detalles, consulta las prácticas recomendadas para interacción con cachés.
  4. 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 de navigator.connection.saveData propiedad. Si se habilita, considera si puedes reescribir la solicitud para recuperarla. menos bytes o usar una respuesta ya recuperada.
  5. 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 si Save-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 de Save-Data con la sugerencia del cliente de Device-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 de navigator.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.
Una comparación de las imágenes no críticas que se cargan cuando Guardar datos es en lugar de omitirse esas mismas imágenes cuando Guardar datos presente.

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.