More share buttons
Share on Pinterest
There are no images.

Los consejos prioritarios de Google mejoran CWV


Google ha publicado un artículo que anima a los desarrolladores y editores a utilizar el atributo nuevo (y experimental) de la pista de prioridad “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 resuelto por las sugerencias prioritarias

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 “asincrónico“Y”diferir de“Atributos.

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

Google proporciona estos ejemplos de los problemas resueltos por los consejos prioritarios:

“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 y aumenta su prioridad (lamentablemente, las herramientas de desarrollador solo muestran la prioridad final; WebPageTest mostrará ambas).

Esto generalmente agrega un retraso significativo a la carga de la imagen. Al proporcionar la sugerencia de prioridad en el marcado, la imagen comienza con una prioridad alta y comienza a cargarse mucho antes.

El navegador otorga a CSS y a las fuentes una alta prioridad, pero es posible que todos estos recursos no sean igualmente importantes o necesarios para LCP. Puede utilizar sugerencias de prioridad para reducir la prioridad de algunos de estos recursos. “

Anuncio

Sigue leyendo a continuación

La importancia del atributo Hint Resource

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

Estoy bastante seguro de que cualquier cosa llamada etiqueta HTML es en realidad un elemento HTML, es una forma 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 la importancia de un elemento de página web sin importancia o simplemente dejando 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 “importancia“Los atributos que pueden comunicar son:

Anuncio

Sigue leyendo a continuación

La sugerencia de recurso del atributo de importancia se aplica a lo siguiente:

Cómo los consejos sobre recursos mejoran los puntos vitales clave de la Web

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

Las herramientas actuales, como el atributo “preload”, ayudan a proporcionar sugerencias de recursos para descargar recursos importantes como fuentes e imágenes.

Otras sugerencias de recursos son asincrónicas y diferidas.

Todo esto ayuda a acelerar la descarga del documento total y hace 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 dará una prioridad baja y se retrasará.

Esta es la explicación:

“Tome una imagen más grande de Contentful Paint, que, una vez precargada, seguirá teniendo una prioridad baja.

Si es rechazado por otros recursos principales de baja prioridad, el uso de sugerencias de prioridad aún puede ayudar a la velocidad a la que se carga la imagen. “

Un ejemplo de la utilidad del atributo de importancia 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 “alto“Atributo de importancia y otros datos i”bajo“Atributo, la página web se mostrará más rápido porque el navegador ahora podrá dar una alta prioridad a la primera imagen.

Otro ejemplo proporcionado 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 la procesa solo 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 important = ‘high’ en la precarga; de lo contrario, seguirá comenzando con la prioridad “Baja” predeterminada para las imágenes. “

Anuncio

Sigue leyendo a continuación

Lo mismo sucede con los scripts que se descargan de forma asincrónica o diferida, a los cuales se les asigna una prioridad baja.

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

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

Priority Hints está en marcha, 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. Los consejos 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 denominada: Funciones experimentales de la plataforma web

Captura de pantalla: funcionalidad de la plataforma web experimental

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 para desarrolladores en la pestaña Red.

Anuncio

Sigue leyendo a continuación

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.

Una vez que 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 lance.

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 verá reflejada en esto.

Sin embargo, es importante señalar que estas son sugerencias prioritarias y no una directiva.

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

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

Anuncio

Sigue leyendo a continuación

Cómo registrarse para la prueba de consejos prioritarios

Los editores deben registrarse en Chrome para participar en las pruebas de origen para recibir sugerencias prioritarias.

El formulario de registro para consejos prioritarios está aquí:

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

Prueba de origen de sugerencias prioritarias

Esta es la segunda versión de esta prueba de origen. La primera vez que se probó no hubo mucha respuesta. Pero esta vez puede ser diferente debido a los aspectos vitales del Core Web.

El proceso ya está disponible para el registro y se extenderá hasta el 22 de marzo de 2022. El propósito del proceso es medir el interés de los desarrolladores y ver si se traduce en mejoras significativas.

Si la función continúa 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 nueva prueba de origen de sugerencias prioritarias

Optimización de la carga de recursos con sugerencias prioritarias

Regístrese para realizar la prueba de Origin

Página de registro de consejos prioritarios

Anuncio

Sigue leyendo a continuación

Siga el progreso de los consejos prioritarios de Chrome

Página de estado de sugerencias de prioridad de Chrome

Lea la explicación de los consejos de prioridad de GitHub

Consejos prioritarios

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

Cromo canario





Source link

MArketing

Se ve que quieres mejorar

Regístrate en nuestras consultorIAS GRATIS, Te mandaremos una confirmación

AGENCIA DE MARKETING DIDITAL EN MEXICO

Todo lo que necesitas para vender y crecer tu negocio por Internet con una agencia de marketing digital.