Tres pasos para habilitar las sugerencias del cliente en su CDN de imágenes

El objetivo de Client Hints es proporcionar un marco para que un navegador informe al servidor sobre el contexto en el que se proporciona una experiencia web.

Las sugerencias de cliente HTTP son un conjunto propuesto de campos de encabezado HTTP para la negociación proactiva de contenido en el Protocolo de transferencia de hipertexto. El cliente puede anunciar información sobre sí mismo a través de estos campos para que el servidor pueda determinar qué recursos deben incluirse en su respuesta.

-Wikipedia​

Con esa información (o sugerencias), el servidor puede proporcionar optimizaciones que ayuden a mejorar la experiencia web, también conocida como Negociación de Contenido . Para las imágenes, una mejor experiencia web significa una carga más rápida, menos carga de datos y una base de código optimizada.

Las sugerencias de cliente tienen un valor inherente, pero se pueden usar junto con la sintaxis de imágenes responsivas para hacer que las imágenes responsivas sean menos detalladas y más fáciles de mantener. Con Client Hints, el lado del servidor, en este caso una CDN de imagen , puede cambiar el tamaño y optimizar la imagen en tiempo real.

Las sugerencias para el cliente existen desde hace un tiempo; de hecho, desde Chrome 35 en 2015. Sin embargo, la compatibilidad con la mayoría de los navegadores Chrome se eliminó en parte debido a problemas de privacidad en la versión 67. Como resultado, el acceso a Client Hints se limitó a ciertas versiones de Chrome en Android y a orígenes propios en otras versiones de Chrome.

¡Ahora, finalmente, Google ha habilitado las sugerencias de cliente de forma predeterminada para todos los dispositivos en la versión 84 de Chrome !

Veamos qué se requiere para utilizar Client Hints.

1) Elija una CDN de imagen que admita sugerencias para el cliente

No muchas CDN de imágenes admiten sugerencias de cliente. Max Firtman realizó una evaluación exhaustiva de las CDN de imágenes que identificó aquellas que admitían sugerencias de clientes. ImageEngine se destaca como la mejor CDN de imágenes con compatibilidad total con Client Hints además de funciones más avanzadas.

ImageEngine funciona como la mayoría de las CDN al asignar el origen de las imágenes, generalmente una ubicación web o un depósito S3, a un nombre de dominio que apunta a la dirección CDN . Regístrese para una prueba gratuita aquí . Después de registrarse, los probadores obtendrán una dirección de entrega exclusiva de ImageEngine que se parece a esta: xxxzzz.cdn.imgeng.in. La dirección de entrega de ImageEngine también se puede personalizar según el propio dominio creando un registro DNS CNAME.

En los siguientes ejemplos, asumiremos que ImageEngine está asignado images.example.comen el DNS.

2) Hacer que el navegador envíe sugerencias al cliente

Ahora que el usuario de prueba tiene una cuenta de ImageEngine con soporte completo para sugerencias de cliente, debemos indicarle al navegador que comience a enviar sugerencias de cliente a ImageEngine. Básicamente, esto significa que el servidor web debe responder a una solicitud con dos encabezados HTTP específicos. Esto se puede hacer manualmente en el sitio web de cada uno o, por ejemplo, usar un complemento si el sitio ejecuta WordPress .

La forma en que se agregan los encabezados manualmente depende del sitio web de cada uno:

• Un proveedor de hosting o CDN probablemente ofrezca una configuración para alterar los encabezados http,
• Uno puede agregar los encabezados en el código de su sitio. La forma en que se hace esto depende del lenguaje de programación o del marco que se esté utilizando. Intente buscar en Google “agregar encabezados http su lenguaje o marco de programación”
• El proveedor de alojamiento puede ejecutar Apache y permitir a los usuarios editar el archivo de configuración .htaccess. También se pueden agregar los encabezados allí.
• Los evaluadores también pueden agregar los encabezados al marcado dentro del headelemento usando el metaelemento http-equiv: meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width".

Agregar encabezado Aceptar-CH

El primer encabezado es el encabezado Accept-CH. Le indica al navegador que comience a enviar sugerencias al cliente :

Accept-CH: viewport-width, width, dpr

Agregue el encabezado Política de funciones

Al momento de escribir este artículo, el mecanismo para delegar sugerencias de clientes a terceros se denomina Políticas de funciones. Sin embargo, está a punto de cambiarle el nombre a Políticas de permisos .

Luego, para asegurarse de que las sugerencias del cliente se envíen junto con las solicitudes de imágenes a la dirección de entrega de ImageEngine obtenida en el paso 1, este encabezado de política de funciones también debe agregarse a las respuestas del servidor.

Una política de característica/permiso es un encabezado HTTP que especifica qué orígenes (dominios) tienen acceso a qué características del navegador.

Feature-Policy: ch-viewport-width https://images.example.com;ch-width https://images.example.com;ch-dpr https://images.example.com;ch-device-memory https://images.example.com;ch-rtt https://images.example.com;ch-ect https://images.example.com;ch-downlink https://images.example.com

example.comdebe reemplazarse con la dirección real que hace referencia a ImageEngine, ya sea la xxxzzz.cdn.imgeng.in-typedirección de entrega genérica o personalizada.

Error 1: tenga en cuenta el ch-prefijo. La notación es ch– +client-hint name

Error 2: ¡Usa minúsculas! Incluso si los documentos y ejemplos dicen, por ejemplo, Accept-CH: DPR¡asegúrese de usarlo ch-dpren el encabezado de la política!

Una vez que se configuran el accept-chencabezado y la política de características, la respuesta del servidor se parecerá a la captura de pantalla anterior.

3) Establecer atributos de tamaños

Por último, pero no menos importante, imgse deben actualizar los elementos del marcado.

Lo más importante es que el src del imgelemento debe apuntar a la dirección de entrega de ImageEngine. Asegúrese de que esta sea la misma dirección utilizada en el paso 1 y mencionada en el encabezado de la política de funciones en el paso 2.

A continuación, agregue el atributo de tamaños a los imgelementos. tamaños es parte de la sintaxis de imágenes receptivas que permite al navegador calcular el tamaño de píxel específico en el que se muestra una imagen. Este tamaño se envía a la CDN de la imagen en la sugerencia del cliente de ancho.

img src="https://images.example.com/test.jpg" alt="image"

Si se conoce el ancho establecido en CSS o el atributo de ancho, se pueden “adaptar” imágenes responsivas copiando ese valor en tamaños.

Cuando se hayan realizado estos pequeños cambios en el imgelemento, la solicitud de imágenes a ImageEngine contendrá las sugerencias del cliente, como se ilustra en la captura de pantalla anterior. El encabezado “ancho” le dice a ImageEngine el tamaño exacto que debe tener la imagen para que encaje perfectamente en la página web.

Disfrute de imágenes perfectas en píxeles

Ahora, si se prueba en un navegador compatible, como Chrome versión 84 e inferiores, las sugerencias del cliente deberían llegar a images.example.com.

El imgelemento es breve y conciso, y está diseñado para proporcionar imágenes responsivas aún mejor adaptadas que una implementación clásica del lado del cliente sin sugerencias del cliente. Menos código , no es necesario producir varios tamaños de imágenes en su servidor web y la selección de recursos aún la realiza el navegador, pero la CDN de imágenes la realiza. ¡Lo mejor de ambos mundos!

Los probadores pueden ver las tuberías en acción en esta implementación de referencia en glitch.com . ¡Asegúrate de probar esto en la versión 84 de Chrome o posterior!

Al utilizar una CDN de imágenes como ImageEngine que admite sugerencias para el cliente, los sitios nunca ofrecerán imágenes más grandes de lo necesario cuando se sigan los pasos anteriores. Además, como beneficio adicional, ImageEngine también optimizará y convertirá imágenes entre formatos como WebP, JPEG2000 y MP4, además de los formatos de imagen más comunes.

Además, los ejemplos anteriores contienen algunas sugerencias para el cliente relacionadas con la red o la conectividad. ImageEngine también puede optimizar imágenes según esta información.

¿Qué pasa con los navegadores que no admiten sugerencias de cliente ? ImageEngine seguirá optimizando y cambiando el tamaño de las imágenes gracias a la detección avanzada de dispositivos en el borde de CDN. De esta manera, todos los dispositivos y navegadores siempre obtendrán imágenes del tamaño adecuado.

ImageEngine ofrece una prueba gratuita y cualquiera puede registrarse aquí para comenzar a implementar sugerencias para el cliente en su sitio web.