Cómo ofrecer aplicaciones rápidas y ligeras con Save-Data

Dave Gash

Ilya Grigorik

Jeremy Wagner

El encabezado de solicitud de Client Hints Save-Data disponible en los navegadores Chrome, Opera y Yandex permite que los desarrolladores entreguen aplicaciones más ligeras y rápidas a los usuarios que habilitan el modo de ahorro de datos en su navegador.

La necesidad de páginas ligeras

Todos están de acuerdo en que las páginas web más rápidas y livianas proporcionan una experiencia del usuario más satisfactoria, permiten una mejor comprensión y retención del contenido, y generan más conversiones e ingresos. La investigación de 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 de bytes. Como estas páginas se cargan mucho más rápido, también observamos un aumento del 50% en el tráfico que reciben".

Y, aunque la cantidad de conexiones 2G finalmente está disminuyendo, la tecnología 2G todavía era la tecnología de red dominante en 2015. La penetración y la disponibilidad de las redes 3G y 4G están creciendo rápidamente, pero los costos de propiedad asociados y las restricciones de red siguen siendo 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 la participación directa de los desarrolladores, como los navegadores proxy y los servicios de transcodificación. Aunque estos servicios son bastante populares, tienen desventajas importantes: compresión de imágenes y texto simple (y, a veces, inaceptable), incapacidad para procesar páginas seguras (HTTPS), solo optimizan las páginas visitadas a través de un resultado de la búsqueda y mucho más. La popularidad de estos servicios es, en sí misma, un indicador de que los desarrolladores web no están abordando de forma adecuada la alta demanda de los usuarios de aplicaciones y páginas rápidas y ligeras. Sin embargo, alcanzar ese objetivo es un camino complejo y, a veces, difícil.

El encabezado de la solicitud Save-Data

Una técnica bastante sencilla es permitir que el navegador ayude con el encabezado de la solicitud Save-Data. Si se identifica este encabezado, una página web puede personalizar y ofrecer una experiencia del usuario optimizada para los usuarios con limitaciones de costo y rendimiento.

Los navegadores compatibles (a continuación) permiten que el usuario habilite un modo de ahorro de datos que le otorga permiso al navegador para aplicar un conjunto de optimizaciones que reducen la cantidad de datos necesarios para renderizar la página. Cuando se expone o se anuncia esta función, el navegador puede solicitar imágenes de menor resolución, aplazar la carga de algunos recursos o enrutar las solicitudes a través de un servicio que aplique 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 la opción "Ahorro de datos" en dispositivos móviles o la extensión "Ahorro de datos" en navegadores para computadoras.
• Opera 35 y versiones posteriores anuncia Save-Data cuando el usuario habilita el modo "Opera Turbo" en computadoras de escritorio o la opción "Ahorro de datos" en navegadores de Android.
• Yandex 16.2 y versiones posteriores anuncia Save-Data cuando el modo Turbo está habilitado en navegadores para computadoras de escritorio o dispositivos móviles.

Detectando el parámetro de configuración Save-Data

Para determinar cuándo ofrecer la experiencia "liviana" a tus usuarios, tu aplicación puede verificar el encabezado de la solicitud de Client Hint Save-Data. Este encabezado de la solicitud indica la preferencia del cliente de reducir el uso de datos debido a los altos costos de transferencia, las velocidades de conexión lentas o por otros motivos.

Cuando el usuario habilita el modo de ahorro de datos en su navegador, este agrega el encabezado de la solicitud Save-Data a todas las solicitudes salientes (tanto HTTP como HTTPS). En el momento de escribir este artículo, el navegador solo anuncia un token *on- en el encabezado (Save-Data: on), pero esto se puede extender en el futuro para indicar otras preferencias del usuario.

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.
  }
}

Verificar la presencia del objeto connection dentro del objeto navigator es fundamental, ya que representa la API de Network Information, que solo se implementa en Chrome, Chrome para Android y los navegadores web de Samsung. Desde allí, solo debes verificar si navigator.connection.saveData es igual a true, y puedes implementar cualquier operación de guardado de datos en esa condición.

Habilitar la extensión de Ahorro de datos en Chrome para computadoras de escritorio

Si tu aplicación usa un service worker, puede inspeccionar los encabezados de la solicitud y aplicar la lógica pertinente para optimizar la experiencia. Como alternativa, el servidor puede buscar las preferencias anunciadas en el encabezado de la solicitud Save-Data y devolver una respuesta alternativa: lenguaje de marcado diferente, imágenes y videos más pequeños, etcétera.

Nota: Si usas PageSpeed para Apache o Nginx para optimizar tus páginas, consulta este debate para aprender a habilitar el ahorro de Save-Data para tus usuarios._

Sugerencias y prácticas recomendadas para la implementación

1. Cuando uses Save-Data, proporciona algunos dispositivos de IU que lo admitan y permite que los usuarios alternen fácilmente entre experiencias. Por ejemplo:
   • Notifica a los usuarios que se admite Save-Data y aliéntalos a usarlo.
   • Permite que los usuarios identifiquen y elijan el modo con mensajes apropiados y botones de activación o desactivación o casillas de verificación intuitivos.
   • Cuando se selecciona el modo de ahorro de datos, anuncia y proporciona una forma fácil y obvia de inhabilitarlo y volver a la experiencia completa si lo deseas.
2. Recuerda que las aplicaciones livianas no son aplicaciones de menor calidad. No omiten funciones ni datos importantes, sino que son más conscientes de los costos involucrados y de la experiencia del usuario. Por ejemplo:
   • Una aplicación de galería de fotos puede ofrecer vistas previas de menor resolución o usar un mecanismo de carrusel con menos código.
   • Una aplicación de búsqueda puede devolver menos resultados a la vez, limitar la cantidad de resultados con mucho contenido multimedia o reducir la cantidad de dependencias necesarias para renderizar la página.
   • Un sitio orientado a las noticias puede mostrar menos historias, omitir categorías menos populares o proporcionar vistas previas de contenido multimedia más pequeñas.
3. Proporciona lógica del servidor para verificar el encabezado de la solicitud Save-Data y considera proporcionar una respuesta de página alternativa y más ligera cuando esté habilitada, p.ej., reduce la cantidad de recursos y dependencias requeridos, aplica una compresión de recursos más agresiva, etcétera.
   • Si publicas una respuesta alternativa basada en el encabezado Save-Data, recuerda agregarla a la lista Vary (Vary: Save-Data) para indicarles a las cachés ascendentes que deben almacenar en caché y publicar 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 la interacción con cachés.
4. Si usas un service worker, tu aplicación puede detectar cuándo está habilitada la opción de ahorro de datos. Para ello, verifica la presencia del encabezado de la solicitud Save-Data o el valor de la propiedad navigator.connection.saveData. Si está habilitada, considera si puedes volver a escribir la solicitud para recuperar menos bytes o usar una respuesta ya recuperada.
5. Considera aumentar Save-Data con otros indicadores, como información sobre el tipo de conexión y la tecnología del usuario (consulta la API de NetInfo). Por ejemplo, es posible que quieras ofrecer la experiencia ligera a cualquier usuario con una conexión 2G, incluso si Save-Data no está habilitado. Por el contrario, el hecho de que el usuario tenga una conexión 4G "rápida" no significa que no le interese ahorrar datos, por ejemplo, cuando está en roaming. Además, podrías aumentar la presencia de Save-Data con la sugerencia de cliente Device-Memory para adaptarte aún más a los usuarios que usan dispositivos con memoria limitada. La memoria del dispositivo del usuario también se anuncia en la sugerencia de cliente navigator.deviceMemory.

Recetas

Lo que puedes lograr con Save-Data se limita solo a lo que se te ocurra. Para darte una idea de lo que es posible, analicemos un par de casos de uso. Es posible que se te ocurran otros casos de uso mientras lees esto, así que no dudes en experimentar y ver qué es posible.

Verifica si hay 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 la propiedad navigator.connection.saveData, a veces es preferible detectarlo en el servidor. 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 al cliente, lo que se incluye 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 que se use, pero la idea básica debería ser la misma para cualquier backend de aplicación. En PHP, por ejemplo, los encabezados de la solicitud se almacenan en el array superglobal $_SERVER en índices que comienzan con HTTP_. Esto significa que puedes detectar el encabezado Save-Data verificando la existencia y el valor de la variable $_SERVER["HTTP_SAVE_DATA"] de la siguiente manera:

// 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 colocas esta verificación antes de que se envíe cualquier lenguaje de marcado al cliente, la variable $saveData contendrá el estado Save-Data y estará disponible en cualquier lugar para su uso en la página. Con este mecanismo ilustrado, veamos algunos ejemplos de cómo podemos usarlo para limitar la cantidad de datos que 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 en la Web implica publicar imágenes en conjuntos de dos: una imagen para pantallas "estándar" (1x) y otra que sea el doble de grande (2x) para pantallas de alta resolución (p.ej., pantalla Retina). Esta clase de pantallas de alta resolución no se limita necesariamente a los dispositivos de alta gama y es cada vez más común. En los casos en los que se prefiere una experiencia de aplicación más ligera, puede ser prudente enviar imágenes de menor resolución (1x) a estas pantallas, en lugar de variantes más grandes (2x). Para lograr esto cuando el encabezado Save-Data está presente, simplemente modificamos el lenguaje de marcado que 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 que cuesta adaptarse a alguien que te pide 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 mod_rewrite de Apache. Existen ejemplos de cómo lograrlo con una configuración relativamente pequeña.

También puedes extender este concepto a las propiedades background-image de CSS con solo agregar una clase al elemento <html>:

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

Desde aquí, puedes segmentar la clase save-data en el elemento <html> de tu CSS para cambiar la forma en que se publican las imágenes. Podrías enviar imágenes de fondo de baja resolución a pantallas de alta resolución, como se muestra en el ejemplo de HTML anterior, o bien omitir ciertos recursos por completo.

Omite las imágenes no esenciales

Parte del contenido de imágenes en la Web simplemente no es esencial. Si bien esas imágenes pueden ser un buen complemento para el contenido, es posible que no sean deseables para quienes intentan aprovechar al máximo los planes de datos medidos. En lo que quizás sea el caso de uso más simple de Save-Data, podemos usar el código de detección de PHP de antes y omitir por completo 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 ver en la siguiente figura:

Comparación de imágenes no críticas que se cargan cuando Save-Data está ausente, en comparación con esas mismas imágenes que se omiten cuando Save-Data está presente.

Por supuesto, omitir imágenes no es la única posibilidad. También puedes actuar en función de Save-Data para evitar enviar otros recursos no críticos, como ciertas fuentes.

Omite las fuentes web no esenciales

Si bien las fuentes web no suelen representar una parte tan grande de la carga útil total de una página determinada como las imágenes, siguen siendo bastante populares. Tampoco consumen una cantidad insignificante de datos. Además, la forma en que los navegadores recuperan y renderizan las fuentes es más complicada de lo que crees, con conceptos como FOIT, FOUT y heurística del navegador que hacen que la renderización sea una operación con matices.

Por lo tanto, es razonable que quieras omitir las fuentes web no esenciales para los usuarios que desean experiencias del usuario más sencillas. Save-Data hace que esto sea una tarea razonablemente sencilla.

Por ejemplo, supongamos que incluiste Fira Sans de Google Fonts en tu sitio. Fira Sans es una excelente fuente para el cuerpo del texto, pero tal vez no sea tan crucial para los usuarios que intentan ahorrar datos. Si agregas una clase de save-data al elemento <html> cuando el encabezado Save-Data está presente, podemos escribir estilos que invoquen el tipo de letra no esencial al principio, pero que luego lo inhabiliten cuando el encabezado 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;
}

Con este enfoque, puedes dejar el fragmento <link> de Google Fonts en su lugar, ya que el navegador carga de forma especulativa los recursos de CSS (incluidas las fuentes web) aplicando primero los estilos al DOM y, luego, verificando si algún elemento HTML invoca alguno de los recursos de la hoja de estilo. Si alguien pasa con Save-Data activado, Fira Sans nunca se cargará porque el DOM con diseño nunca lo invoca. En su lugar, se usará Arial. No es tan agradable como Fira Sans, pero puede ser preferible para los usuarios que intentan estirar sus planes de datos.

Resumen

El encabezado Save-Data no tiene muchos matices; está activado o desactivado, y la aplicación tiene la responsabilidad de proporcionar experiencias adecuadas según su configuración, independientemente del motivo.

Por ejemplo, es posible que algunos usuarios no permitan el modo de ahorro de datos si sospechan que se perderá contenido o funciones de la app, incluso en una situación de mala conectividad. Por el contrario, algunos usuarios pueden habilitarlo de forma habitual para mantener las páginas lo más pequeñas y simples posible, incluso en una situación de buena conectividad. Lo mejor es que tu app asuma que el usuario quiere la experiencia completa y sin limitaciones, hasta que tengas una indicación clara de lo contrario a través de una acción explícita del usuario.

Como propietarios de sitios y desarrolladores web, asumamos la responsabilidad de administrar nuestro contenido para mejorar la experiencia de los usuarios con limitaciones de datos y costos.

Para obtener más detalles sobre Save-Data y excelentes ejemplos prácticos, consulta Ayuda a tus usuarios a Save Data.