Post Top Ad

Your Ad Spot

martes, 21 de abril de 2020

¿Qué son las sugerencias del cliente y si vale la pena implementarlas?

El concepto de diseño web receptivo ha existido por un tiempo, pero todos los problemas aún no se han resuelto. La proliferación exponencial de dispositivos conectados con diferentes capacidades de software y técnicas ha hecho que sea cada vez más difícil proporcionar contenido web a cada usuario.
Además, tratar de acomodar a todos a menudo conduce a un marcado desordenado que afecta negativamente el rendimiento. Las sugerencias de los clientes se crearon para simplificar el proceso de selección de recursos para que los desarrolladores puedan crear mejores aplicaciones web receptivas de manera más eficiente.

¿Qué son las sugerencias del cliente?# #

Google introdujo sugerencias de clientes para Chrome, y otros navegadores las adoptaron (o están en proceso de adoptar) desde que se lanzó la especificación HTTP . Las sugerencias del cliente permiten la negociación proactiva de contenido al permitir que los agentes de usuario determinen cómo se muestran las imágenes y otros recursos en dispositivos individuales. Actúan como una especie de enlace entre el cliente y el servidor para armar el mejor diseño de página posible.

¿Por qué usar sugerencias de clientes?# #

Uno de los mayores desafíos del diseño web receptivo es crear un marcado limpio.
Por ejemplo, hacer que las imágenes respondan puede requerir que especifique múltiples puntos de interrupción de imagen y densidades de píxeles. Si no tienes cuidado, podrías terminar con un código descuidado e hinchado.
La implementación de sugerencias ahorra tiempo tanto para usted como para sus usuarios al reducir drásticamente la cantidad de código necesario para que los elementos de su página respondan . Básicamente, automatizan el proceso de selección de recursos. Por ejemplo, si desea ofrecer varias versiones de una imagen, agregar sugerencias a la solicitud HTTP ayuda al servidor web a elegir automáticamente cuál se adapta mejor al dispositivo del usuario. Desacoplar su marcado de sus imágenes también le permite alterar las imágenes sin que afecte a su marcado.
La automatización de la selección de recursos con sugerencias del cliente no solo le ahorra tiempo y energía. El verdadero beneficio es un rendimiento mejorado, lo que significa una mejor experiencia de usuario . Según las pruebas realizadas por Smashing Magazine , hacer que sus imágenes respondan con sugerencias requiere que se sirvan entre un 19 y un 32 por ciento menos de datos que el uso de puntos de interrupción de imagen preseleccionados. En consecuencia, el servidor enviará imágenes de mejor calidad a un ritmo más rápido.
Las sugerencias del cliente no son solo para imágenes. Son útiles siempre que tenga puntos de interrupción basados ​​en el tamaño de la ventana gráfica o DPR en su CSS. Consulte la sección de la Guía de desarrollo de Google sobre sugerencias de clientes para obtener más información sobre sus usos.

¿Cómo funcionan las sugerencias del cliente?# #

Todas las solicitudes que un navegador envía a un servidor incluyen encabezados de solicitud HTTP. Las sugerencias del cliente toman la forma de campos de encabezado de solicitud HTTP. Agregarlos le indica al servidor que mire ciertos parámetros en los dispositivos de los usuarios al decidir cómo entregar contenido. A continuación se muestra un ejemplo de los encabezados de solicitud y respuesta del cliente y el servidor cuando se utilizan sugerencias de clientes.
client hints negotiation
Fuente: Google
En el ejemplo anterior, el cliente básicamente le dice al servidor que lo recupere /image/thingTambién especifica que acepta el formato WebP y proporciona sugerencias del cliente para el DPR de la imagen, el ancho de la vista y el ancho de visualización previsto. Esta información es procesada por el servidor que devuelve una imagen con las especificaciones de sugerencia de cliente solicitadas. En este caso, el servidor usó las sugerencias de DPR y Ancho como se puede ver dentro del encabezado de respuesta Vary.
Los encabezados de sugerencias de clientes más utilizados incluyen:
  • DPR , o "relación de píxeles del dispositivo", que significa la proporción de píxeles de pantalla física a píxeles de CSS.
  • Viewport-Width , que se cuantifica en píxeles CSS.
  • Ancho o el ancho de una imagen en píxeles físicos.
  • Enlace descendente , que representa la velocidad máxima de descarga del usuario.
Hay algunos otros, pero no todos están disponibles en todos los navegadores. La lista de sugerencias disponibles ciertamente crecerá a medida que más navegadores comiencen a admitirlas.

El cliente sugiere compatibilidad con el navegador#

El cliente sugiere maravillas para los usuarios de Chrome y Opera, pero potencialmente pueden crear problemas para los visitantes que tienen navegadores no compatibles. Con suerte, este inconveniente no será un problema en el futuro; sin embargo, mientras tanto, los desarrolladores pueden considerar combinar sugerencias con anchuras y alturas relativas para evitar interrupciones en el diseño. El uso de un servicio de optimización de imágenes puede ayudar a mitigar los riesgos de servir imágenes excesivamente grandes en navegadores no compatibles.
client hints support

Cómo habilitar sugerencias de clientes#

Antes de que pueda comenzar a incluir sugerencias, debe preparar el servidor para aceptarlas. Dado que habilitar las sugerencias del cliente agrega un poco a su carga útil, no es necesario activarlas si no las necesita . Para habilitar las sugerencias, inserte el siguiente encabezado en el archivo de configuración de su servidor:
Accept-CH: DPR, Width, Viewport-Width
Si agregar el encabezado no es una opción, puede agregar la siguiente metaetiqueta debajo del elemento de encabezado de su marcado:
<meta http-equiv="Accept-CH" content="DPR,Width,Viewport-Width">
Debe enumerar individualmente cada pista que desea que acepte el servidor. Por lo tanto, si desea habilitar la sugerencia de enlace descendente, debe agregar "Enlace descendente" al fragmento anterior. El navegador del usuario ahora debe agregar los encabezados especificados a todas las solicitudes futuras del servidor. Si está viendo su sitio web en Chrome, use el panel "Red" para ver los encabezados que se envían.
client hints example

Uso de sugerencias para entregar imágenes receptivas#

Aunque las sugerencias del cliente tienen otros usos, generalmente se emplean para entregar imágenes web receptivas. Las imágenes receptivas se adaptan al navegador y la pantalla del usuario. Si desea que una imagen responda con sugerencias, hay algunos pasos que debe seguir:
  1. Opte por las sugerencias del cliente al incluir el encabezado HTTP o la metaetiqueta en el elemento principal de su marcado.
  2. Asegúrese de establecer el atributo Tamaños para todas sus etiquetas de imagen.
A partir de ahora, la especificación de sugerencias del cliente requiere que se establezca el atributo de tamaños para que el encabezado Ancho funcione correctamente. Como se mencionó anteriormente, el atributo de tamaños define el diseño y el tamaño de visualización de una imagen.
La forma tradicional de servir varias versiones de una imagen es usar el atributo srcset de la siguiente manera:
<img srcset="image-160.jpg 160w,
             image-320.jpg 320w,
             image-640.jpg 640w,
             image-1280.jpg 1280w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 900px) 33vw,
            254px"
     src="image.jpg" alt="image">
El atributo srcset permite al navegador elegir entre diferentes tamaños de imagen. Este método funciona bien, pero es mucho código para una imagen.
Las sugerencias del cliente eliminan la necesidad de srcset. El atributo Ancho, por ejemplo, usa el valor del atributo tamaños para calcular el ancho exacto de la imagen en la página. Con las sugerencias habilitadas, el navegador envía una solicitud como esta al servidor:
GET image.jpg
Accept: image/webp,image/*,*/*;q=0.8
DPR: 2
Viewport-Width: 1024
Width: 508
En este ejemplo, el navegador le dice al servidor que el dispositivo solicitante tiene una relación de píxeles de 2 y un ancho de vista de 1024. Con esa información, el servidor devolverá una imagen que es dos veces el tamaño del original para encajar perfectamente en el usuario navegador. Ahora, si tiene sugerencias habilitadas, el ejemplo anterior se puede reducir a lo siguiente:
<img sizes="(max-width: 480px) 100vw,
            (max-width: 900px) 33vw,
            254px"
     src="image.jpg" alt="image">
Como puede ver, aprovechar las sugerencias puede reducir la cantidad de código necesario para garantizar que su sitio web responda.

Sugerencias del cliente y el Acceptencabezado#

Si conoce bien el tema del diseño web receptivo, puede estar familiarizado con el Acceptencabezado. Las sugerencias del cliente se pueden combinar con el Acceptencabezado para mostrar la misma imagen en varios formatos.
El Acceptencabezado funciona de manera similar a los otros encabezados de sugerencias de cliente. Le dice al servidor qué tipos de medios son aceptables para el navegador. Por ejemplo, cada vez que Chrome solicita una imagen, incluye automáticamente un Acceptencabezado en las solicitudes HTTP de la siguiente manera:
Accept: image/webp,image/*,*/*;q=0.8
Este fragmento le permite al servidor saber que Chrome prefiere el formato de imagen WebP ; sin embargo, si WebP no es una opción, entonces debería servir un archivo con un tipo mime que comience por image/*Si eso no está disponible, */*indica que el servidor debe servir lo que tenga. Finalmente, la q=0.8parte indica con qué fuerza el navegador prefiere el formato especificado. La Guía del desarrollador de Mozilla tiene más información sobre la especificación del encabezado Aceptar y el parámetro de preferencia de calidad .
Habilitar el Acceptencabezado le permite simplificar aún más su marcado si desea admitir múltiples formatos de imagen. Chrome incluye automáticamente el Acceptencabezado mencionado anteriormente , pero otros navegadores no tienen preferencias integradas. Por lo tanto, debe agregar su propio Acceptencabezado en el elemento de encabezado de su marcado para habilitarlo para todos los usuarios. Siéntase libre de copiar el ejemplo predeterminado de Chrome o utilizarlo como guía para establecer sus propias preferencias.

Sugerencias del cliente y el Varyencabezado#

El encabezado Vary también juega un papel importante en el procesamiento de las sugerencias del cliente cuando se usa un proxy web. Esencialmente, el Varyencabezado asegura que el contenido correcto se entregue al navegador correcto. Por ejemplo, si un navegador antiguo que no admite la compresión Gzip y un navegador más nuevo que sí admite la compresión Gzip solicitan un activo, el Varyencabezado es fundamental para determinar qué versión del activo se entrega a qué navegador.
Según IETF , en el caso de que se proporcione más de una sugerencia de cliente y si el activo es almacenable en caché, el servidor debe generar un Varyencabezado. Esto ayuda a determinar qué sugerencias pueden afectar la respuesta y si la respuesta es adecuada para una solicitud posterior.

Consideraciones de seguridad#

Aunque es muy útil para la entrega de imágenes receptivas, las sugerencias del cliente pueden imponer algunas preocupaciones de seguridad que los implementadores deben tener en cuenta. Dado que las sugerencias del cliente proporcionan información granular sobre el navegador (por ejemplo, el ancho de la ventana gráfica), esto puede ayudar a identificar al usuario en múltiples solicitudes. Además, si un usuario realiza una solicitud domain.com, las sugerencias del cliente no solo se envían a ese dominio, sino también a todos sus subdominios y a terceros.
Si un sitio web de terceros con intenciones negativas tiene acceso a las sugerencias del cliente, puede identificar a algunos usuarios mediante una combinación de los datos de sugerencias del cliente que recopilan y su dirección IP, por ejemplo. Con estos datos, podrían rastrearlo mientras se desplaza por la web.
Según el Grupo de Trabajo HTTP , hay algunas cosas que se pueden hacer para ayudar a reducir las preocupaciones de privacidad:
  • Los implementadores DEBERÍAN restringir la entrega de algunos o todos los campos de encabezado de sugerencias de cliente solo al origen de suscripción voluntaria.
  • Los implementadores PUEDEN proporcionar mecanismos de elección del usuario para que los usuarios puedan equilibrar las preocupaciones de privacidad con las limitaciones de ancho de banda.
  • Las implementaciones específicas para ciertos casos de uso o modelos de amenaza PUEDEN evitar transmitir algunos o todos los campos de encabezado de Sugerencias del cliente.

Resumen#

Configurar las sugerencias del cliente requiere un poco de tiempo y esfuerzo, pero puede dar sus frutos. Tendrá etiquetas de imagen receptivas que son mucho más manejables, y sus usuarios siempre recibirán contenido optimizado para su dispositivo en la menor cantidad de bytes posible.
Sin embargo, por ahora, el soporte del navegador sigue siendo bastante limitado. Esto dificulta la implementación global en el caso de un CDN como KeyCDN ya que esto requeriría un cambio en el lado del servidor de origen. Aunque KeyCDN no admite actualmente sugerencias de clientes, esto podría cambiar en el futuro en función de cómo continúe la tasa de adopción.
  • ETIQUETAS

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas