En la actualidad, la variedad de capacidades de los dispositivos que se pueden conectar a la Web es más amplia que nunca antes. La misma aplicación web que se entrega a un las computadoras de escritorio también pueden funcionar en un teléfono, un reloj o una tablet de baja potencia, y crear experiencias atractivas que funcionen sin problemas en cualquier dispositivo.
La API de Device Memory es una nueva
de la plataforma que ayuda a los desarrolladores web a manejar el dispositivo moderno
horizontal. Agrega una propiedad de solo lectura al objeto navigator.
navigator.deviceMemory, que muestra cuánta RAM tiene el dispositivo en
y gigabytes, redondeada hacia abajo
a la potencia de dos más cercana. La API también presenta un
Encabezado de Sugerencias de clientes,
Device-Memory, que informa el mismo valor.
La API de Device Memory les permite a los desarrolladores realizar dos acciones principales:
- Tomar decisiones sobre el entorno de ejecución sobre qué recursos entregar en función de los datos que se devuelven de memoria del dispositivo (por ejemplo, mostrar una versión "lite" de una aplicación a los usuarios de dispositivos con poca memoria).
- Informa este valor a un servicio de análisis para comprender mejor cómo la memoria del dispositivo se correlaciona con el comportamiento de los usuarios, las conversiones y otras métricas importantes para tu empresa.
Cómo adaptar contenido de forma dinámica según la memoria del dispositivo
Si ejecutas tu propio servidor web y puedes modificar la lógica que
entrega a los recursos, puedes responder de manera condicional a las solicitudes que contienen
Device-Memory Encabezado de Sugerencias de clientes.
GET /main.js HTTP/1.1
Host: www.example.com
Device-Memory: 0.5
Accept: */*
Con esta técnica, puedes crear una o más versiones de tu aplicación
secuencias de comandos y responder a las solicitudes del cliente de manera condicional según el
configurado en el encabezado Device-Memory. Estas versiones no deben contener
código completamente diferente (ya que es más difícil de mantener). La mayoría de las veces, el
"lite" solo excluirá las funciones que puedan ser costosas y no fundamentales
a la experiencia del usuario.
Usa el encabezado de Client Hints
Para habilitar el encabezado Device-Memory, agrega la etiqueta <meta> de Client Hints
al <head> de tu documento:
<meta http-equiv="Accept-CH" content="Device-Memory">
O incluir "Device-Memory" en los encabezados de respuesta Accept-CH de tu servidor:
HTTP/1.1 200 OK
Date: Thu Dec 07 2017 11:44:31 GMT
Content-Type: text/html
Accept-CH: Device-Memory, Downlink, Viewport-Width
Esto le indica al navegador que envíe el encabezado Device-Memory con todos los subrecursos
para la página actual.
En otras palabras, una vez que implementes alguna de las opciones anteriores para tu
sitio web, si un usuario visita un dispositivo con 0.5 GB de RAM, todas las imágenes, CSS y
Las solicitudes de JavaScript de esta página incluirán el encabezado Device-Memory con
el valor establecido en "0.5", y tu servidor puede responder a esas solicitudes de la forma que
si te parece adecuado.
Por ejemplo, la siguiente ruta Express entrega un
"lite" versión de una secuencia de comandos si se establece el encabezado Device-Memory y su valor es
inferior a 1, o bien se publica una versión si el navegador no admite el
Device-Memory o el valor es 1 o mayor:
app.get('/static/js/:scriptId', (req, res) => {
// Low-memory devices should load the "lite" version of the component.
// The logic below will set `scriptVersion` to "lite" if (and only if)
// `Device-Memory` isn't undefined and returns a number less than 1.
const scriptVersion = req.get('Device-Memory') < 1 ? 'lite' : 'full';
// Respond with the file based on `scriptVersion` above.
res.sendFile(`./path/to/${req.params.scriptId}.${scriptVersion}.js`);
});
Usa la API de JavaScript
En algunos casos (como con un servidor de archivos estáticos o una CDN), no podrás responder de forma condicional a las solicitudes basadas en un encabezado HTTP. En estos casos, puedes usar la API de JavaScript para realizar solicitudes condicionales en tu código de JavaScript.
La siguiente lógica es similar a la ruta Express anterior, con la diferencia de que determina la URL de la secuencia de comandos en la lógica del cliente:
// Low-memory devices should load the "lite" version of the component.
// The logic below will set `componentVersion` to "lite" if (and only if)
// deviceMemory isn't undefined and returns a number less than 1.
const componentVersion = navigator.deviceMemory < 1 ? 'lite' : 'full';
const component = await import(`path/to/component.${componentVersion}.js`);
component.init();
Si bien se entregan condicionalmente diferentes versiones del mismo componente según del dispositivo es una buena estrategia, pero a veces puede ser incluso mejor no para entregar un componente.
En muchos casos, los componentes son puramente mejoras. Le agregan un toque agradable pero no son necesarios para la funcionalidad principal de la app. En en estos casos, se recomienda no cargar tales componentes en primer lugar. Si un componente destinado a mejorar la experiencia del usuario ralentiza la aplicación. o no responde, no está logrando su objetivo.
Con cualquier decisión que tomes que afecte la experiencia del usuario, es fundamental medir su impacto. También es fundamental que tengas un panorama claro de cómo el rendimiento de su aplicación.
Comprender cómo se correlaciona la memoria del dispositivo con el comportamiento del usuario en el momento versión de tu app te informará mejor qué acción debes realizar, y te brinda un modelo de referencia con el que puede medir el éxito de futuros cambios.
Cómo hacer un seguimiento de la memoria del dispositivo con estadísticas
La API de Device Memory es nueva y la mayoría de los proveedores de estadísticas no la hacen un seguimiento de forma predeterminada. Por suerte, la mayoría de los proveedores de herramientas de análisis ofrecen datos (por ejemplo, Google Analytics tiene una función denominada Dimensiones personalizadas) que puedes usar para rastrear la memoria del dispositivo dispositivos.
Cómo usar una dimensión personalizada de memoria del dispositivo
El uso de dimensiones personalizadas en Google Analytics es un proceso de dos pasos.
- Configura la dimensión personalizada en Google Analytics.
- Actualice su código de seguimiento a
setEs el valor de memoria del dispositivo para la dimensión personalizada que acabas de crear.
Cuando crees la dimensión personalizada, asígnale el nombre "Memoria del dispositivo" y elige un alcance de "sesión" ya que el valor no cambiará durante la sesión de navegación del usuario.
A continuación, actualiza tu código de seguimiento. Este es un ejemplo de cómo podría ser. Ten en cuenta que, para los navegadores que no admiten la API de Device Memory, la dimensión el valor será "(not set)".
// Create the tracker from your tracking ID.
// Replace "UA-XXXXX-Y" with your Google Analytics tracking ID.
ga('create', 'UA-XXXXX-Y', 'auto');
// Set the device memory value as a custom dimension on the tracker.
// This will ensure it gets sent with all future data to Google Analytics.
// Note: replace "XX" with the index of the custom dimension you created
// in the Google Analytics admin.
ga('set', 'dimensionXX', navigator.deviceMemory || '(not set)');
// Do any other other custom setup you want...
// Send the initial pageview.
ga('send', 'pageview');
Genera informes sobre los datos de la memoria del dispositivo
Cuando la dimensión de la memoria del dispositivo
set en
de seguimiento, todos los datos que envíes a Google Analytics incluirán este valor.
Esto te permitirá desglosar cualquier métrica que desees (p. ej., tiempos de carga de la página, tasa de finalización de objetivos, etc.) por dispositivo.
la memoria para ver si hay correlaciones.
Como la memoria del dispositivo es personalizada y no integrada, no la verás en ninguno de los informes estándares. Para acceder a estos datos, deberás crear un informe personalizado Por ejemplo, la configuración de un informe personalizado que compara los tiempos de carga según la memoria del dispositivo podría verse de la siguiente manera:
Y el informe que genera podría verse así:
Una vez que recopiles datos de la memoria del dispositivo y tengas un modelo de referencia experimentas tu aplicación en todos los rangos del espectro de la memoria, puedes experimentar con la entrega de diferentes recursos a distintos usuarios (mediante técnicas descritas en la sección anterior). Más adelante, podrás ver los resultados y ver si han mejorado.
Conclusión
En esta publicación, se describe cómo usar la API de Device Memory para adaptar tu aplicación a las capacidades de los usuarios y muestra cómo medir cómo la experiencia de estos usuarios en tu app.
Si bien esta publicación se enfoca en la API de Device Memory, la mayoría de las técnicas que aquí se describen podrían aplicarse a cualquier API que informe las capacidades de los dispositivos o condiciones de la red.
A medida que el panorama de los dispositivos se sigue ampliando, es más importante que nunca desarrolladores web consideran a todo el espectro de usuarios cuando toman decisiones que afectan su experiencia.