Las sugerencias de prioridad de Google mejoran CWV


Google publicó un artículo que anima a los desarrolladores y editores a utilizar el nuevo (y experimental) atributo de sugerencia de prioridad de «importancia» que puede ayudar a mejorar Core Web Vitals y la experiencia del usuario.

El equipo del navegador Chrome compartió un ejemplo en el que una imagen de fondo cargada con el atributo HTML Priority Hint ahorró 1.9 segundos en tiempo de descarga, solo en esa imagen.

El problema que resuelve Priority Hints

Los editores pueden acelerar el descubrimiento de recursos de páginas web utilizando y también puede indicar cómo y cuándo se descargan y ejecutan los scripts con el uso de la «asincrónico» y «aplazar”Atributos.

Pero los editores no pueden enviar una señal para decirle al navegador qué recursos son importantes y cuáles no.

Google proporciona estos ejemplos de los problemas que resuelve Priority Hints:

“Las imágenes heroicas dentro de la ventana gráfica comienzan con una prioridad baja. Una vez que se completa el diseño, Chrome descubre que están en la ventana gráfica y aumenta su prioridad (desafortunadamente, las herramientas de desarrollo solo muestran la prioridad final; WebPageTest mostrará ambas).

Esto generalmente agrega un retraso significativo a la carga de la imagen. Proporcionar la sugerencia de prioridad en el marcado permite que la imagen comience con una prioridad alta y comience a cargarse mucho antes.

El navegador asigna a CSS y fuentes una alta prioridad, pero todos estos recursos pueden no ser igualmente importantes o necesarios para LCP. Puede utilizar sugerencias de prioridad para reducir la prioridad de algunos de estos recursos «.

Anuncio publicitario

Continuar leyendo a continuación

La sugerencia de recurso de atributo de importancia

En HTML, las partes que componen una página web se denominan Elementos. Eso sería el div, encabezados, etiquetas de párrafo, etiquetas de imagen, el elemento de enlace, etc.

Estoy bastante seguro de que todo lo que se llama una etiqueta HTML es en realidad un elemento HTML, esa es una manera fácil de recordar qué es un elemento.
Cada elemento se puede modificar con lo que se llama un atributo. ¿Recuerda el atributo nofollow? El atributo nofollow modifica el elemento .

El atributo de importancia modifica los elementos de la página web dando al navegador web una pista sobre si un elemento de la página web es importante, no importante o simplemente para dejar que el navegador decida.

El atributo de importancia se denomina Sugerencia de prioridad. El atributo le da al navegador una pista de que un elemento específico es importante (o no importante) y le da una prioridad más alta (o más baja).

Los valores que el “importancia”Atributo que se puede comunicar son:

La sugerencia de recurso de atributo de importancia es aplicable a los siguientes elementos:

Cómo las sugerencias de recursos mejoran los elementos fundamentales de la Web

Los navegadores calculan automáticamente los niveles de prioridad para descargar recursos.

Las herramientas actuales, como el atributo «preload», ayudan a proporcionar sugerencias de recursos para la descarga de recursos importantes como, por ejemplo, fuentes e imágenes.

Otras sugerencias de recursos son asincrónicas y diferidas.

Todos ellos ayudan a acelerar la descarga del documento total y hacen que el documento sea visible e interactivo más rápido.

Pero el navegador aún tiene que decidir cuál es más importante.

Según Web.dev, se descargará una imagen precargada, pero el navegador aún le asignará una prioridad baja y se retrasará.

Esta es la explicación:

“Tome una imagen de pintura con contenido más grande, que, una vez precargada, seguirá teniendo una prioridad baja.

Si otros recursos tempranos de baja prioridad la rechazan, el uso de sugerencias prioritarias puede ayudar a determinar qué tan pronto se carga la imagen «.

Un ejemplo de cómo el atributo de importancia es útil es cuando una página web tiene un carrusel de imágenes en la parte superior de la ventana gráfica (la parte del navegador que el visitante del sitio ve actualmente).

Si el carrusel contiene cinco imágenes, todas se pueden precargar. Pero si al primero se le asigna el «elevado«Atributo de importancia y los demás dados el»bajo”, La página web se mostrará más rápido porque el navegador ahora sabrá que debe dar una prioridad alta a la primera imagen.

Otro ejemplo dado por Google es la imagen destacada en la parte superior de la página web. El navegador le da a la imagen una prioridad baja y solo la procesa después de que se completa el resto del diseño de la página web.

Google explica:

“Proporcionar la sugerencia de prioridad en el marcado permite que la imagen comience con una prioridad alta y comience a cargarse mucho antes.

Tenga en cuenta que la precarga todavía es necesaria para el descubrimiento temprano de imágenes LCP incluidas como fondos CSS y se puede combinar con sugerencias de prioridad al incluir la importancia = ‘alta’ en la precarga; de lo contrario, seguirá comenzando con la prioridad «Baja» predeterminada para las imágenes. . «

Lo mismo ocurre con los scripts que se descargan asíncronos o diferidos, a ambos se les asigna una prioridad baja.

Al agregar una sugerencia de prioridad a los scripts importantes, el navegador podrá representar la página más rápido y brindar una mejor experiencia de usuario.

Los visitantes del sitio experimentarán una carga más rápida

Priority Hints está pasando por lo que Google llama una prueba de Origin. Chrome realizó una prueba hace dos años, pero no recibió mucha atención.

Chrome está implementando esto en Chrome 96, cuyo lanzamiento está programado para el 21 de noviembre de 2021. Las sugerencias de prioridad ya están disponibles en Chrome Canary, que es la versión de prueba de Chrome.

Estas funciones se pueden habilitar en las versiones actuales de Chrome escribiendo lo siguiente en la barra de direcciones:

chrome://flags/

y luego desplazarse hacia abajo y habilitar la sección etiquetada: Funciones experimentales de la plataforma web

Captura de pantalla: Funciones experimentales de la plataforma web

Captura de pantalla de las funciones de la plataforma web experimental de Chrome

Cómo revisar el nivel de prioridad de los recursos

Los niveles de prioridad de recursos están disponibles para su revisión en cualquier versión de Chrome, en las Herramientas de desarrollo en la pestaña Red.

Haga clic en los tres puntos (menú de puntos suspensivos) en la esquina superior derecha,> Más herramientas> Herramientas para desarrolladores (luego seleccione la pestaña Red).

Desde allí, carga una página web, haga clic con el botón derecho en una de las columnas (como Tiempo o Cascada) y seleccione Prioridad y podrá ver los niveles de prioridad.

Cuando se registre para la prueba de Priority Hints, puede usar Chrome Canary para ver la prioridad actualizada de los recursos y también en la versión 96 de Chrome cuando se implemente.

Cuando participe en esta prueba, las sugerencias de prioridad se mostrarán a los navegadores de los visitantes de su sitio y cualquier mejora en Core Web Vitals se reflejará a partir de eso.

Sin embargo, es importante tener en cuenta que estas son sugerencias de prioridad y no una directiva.

Eso significa que el navegador no tiene que seguir estrictamente las sugerencias de prioridad. El navegador puede optar por ignorar las sugerencias y asignarle a la computadora su propio orden.

Esto se puede verificar en Chrome Dev Tools en la pestaña Red como se describe anteriormente.

Cómo registrarse para la prueba de Priority Hints

Los editores deben registrarse en Chrome para participar en las pruebas de origen para obtener sugerencias de prioridad.

El formulario de registro de Priority Hints está aquí:

https://developer.chrome.com/origintrials/#/view_trial/365917469723852801

Prueba de origen de Priority Hints

Esta es la segunda versión de esta prueba de origen. La primera vez que se probó no hubo mucha respuesta. Pero esta vez podría ser diferente debido a Core Web vitals.

La prueba está abierta para el registro ahora y se extenderá hasta el 22 de marzo de 2022. El propósito de la prueba es medir el interés de los desarrolladores y ver si da como resultado mejoras significativas.

El hecho de que la función continúe después de esa fecha depende de sus comentarios. Esta es una gran oportunidad para mejorar la experiencia del usuario y ser uno de los primeros en utilizar esta nueva función.

Citas

Lea el anuncio de la prueba de origen de New Priority Hints

Optimización de la carga de recursos con sugerencias prioritarias

Regístrese para participar en la prueba de Origin

Página de registro de sugerencias prioritarias

Anuncio publicitario

Continuar leyendo a continuación

Siga el progreso de las sugerencias de prioridad de Chrome

Página de estado de sugerencias de prioridad de Chrome

Leer el Explicador de sugerencias de prioridad en GitHub

Sugerencias de prioridad

Descarga Chrome Canary para desarrolladores con las funciones más recientes

Canario de cromo





Consultar el artículo en la publicación original

Las sugerencias de prioridad de Google mejoran CWV
A %d blogueros les gusta esto: