Recientemente, Google publicó un artículo en el que instaba a los desarrolladores y editores de sitios web a comenzar a utilizar la API de Priority Hints, una nueva función que ayudará a optimizar la carga de recursos del sitio web al priorizar las funciones más esenciales para la experiencia del usuario. Esto, a su vez, mejoraría aún más el Core Web Vitals (CWV).
En una prueba realizada por el equipo del navegador Chrome, se cargó una imagen como fondo con el atributo "rendimiento", lo que provocó que el navegador ahorrara 1,9 segundos en el tiempo de descarga de esa imagen.
Los navegadores tienen su propia priorización de recursos. Pero hay algunas formas en que podemos decirle al navegador que reorganice esta priorización de descarga de recursos haciendo que baje una imagen o script antes que otra o incluso solicite previamente algún recurso específico. Esto lo hace más fácil a la hora de renderizar el sitio.
Todo esto parece puramente técnico, pero piensa en la experiencia del usuario.
Core Web Vitals de Google se trata de brindarle al público la mejor experiencia. Preferirán un sitio web que se cargue más rápido y ahorre tiempo, por supuesto. Lo mismo ocurre con Google.
¿Qué es Priority Hints?
Es una función que le permite al desarrollador manipular el orden de prioridad en el que se solicitarán y cargarán los recursos del sitio web para el usuario.
Imagina que la web es como una carretera. En un extremo estás tú con tu dispositivo y en el otro lado de la calle está la tienda (una analogía a un sitio web) que deseas visitar. La calle en sí es tu conexión a Internet.
El DNS es como la dirección de la tienda a la que deseas ir; el TCP / IP es el mecanismo de transporte que usas para ir a ese lugar (caminando, en bicicleta, en automóvil, etc.) y el HTTP es el idioma que empleas para comunicarte con ese sitio web.
Cuando cargas un sitio web, tu navegador identifica la dirección de la tienda (sitio web) y envía una solicitud al servidor (una computadora donde se almacena el sitio web) pidiendo permiso para acceder a esa página. Si el servidor lo aprueba, el navegador reúne los pequeños fragmentos de información en una página web completa y la muestra.
Entonces, cuando un navegador solicita un recurso (una imagen, script, etc.), recibe una prioridad que variará según el tipo y la ubicación de almacenamiento del recurso que se solicita.
Cada tipo tiene una prioridad diferente para que el navegador solicite, descargue y luego procese el recurso.
Con Priority Hints, podemos manipular esta prioridad para mejorar la experiencia del usuario en nuestras aplicaciones web.
El atributo "importance" acepta uno de tres valores:
- Alta: el recurso se considera de alta prioridad y el usuario quiere que el navegador le dé prioridad siempre que la configuración de usabilidad no impida que esto suceda.
- Baja: la función se considera de baja prioridad y el usuario quiere que el navegador la desconsidere si la configuración de usabilidad predeterminada lo permite.
- Automática: este es el valor predeterminado en el que no tienes una preferencia y permites que el navegador decida la prioridad adecuada.
Más control sobre tus páginas
Al final, Priority Hints puede tener excelentes aplicaciones en la experiencia del usuario, ya que tú, el propietario del sitio, puedes tener más control sobre lo que se carga primero en las páginas.
Si realizas un seguimiento del comportamiento del usuario a través de mapas de calor, widgets, puntos de clic o cualquier otro medio, puedes implementar sugerencias de prioridades basadas en estos datos para mejorar la experiencia del sitio.
Por ejemplo, puedes priorizar la carga de una determinada imagen o botón en tu página principal con más interacción de los usuarios. O, por el contrario, despriorizar scripts sin importancia que pueden estar afectando el rendimiento de otros aspectos más importantes de tu sitio, en términos de marketing.
Además de eso, Priorities Hints también puede ser beneficioso para los esfuerzos de SEO.
Desde 2020, Google utiliza métricas de Core Web Vitals para evaluar el rendimiento de un sitio web.
Si obtienes una puntuación alta en CWV, Google considera que tu página es fácil de usar y, como consecuencia, aumentará sus posibilidades de obtener una clasificación alta en las SERP.
Mediante el uso de Priorities Hints, puedes trabajar junto con tu equipo de TI para realizar cambios activos en los procesos de carga del sitio web, probando versiones que tienen un impacto positivo en las métricas de CWV y en la velocidad de carga.
Es importante que tengas en cuenta que son solo sugerencias y no instrucciones, por lo que el navegador tiene la última palabra. Sin embargo, Google dice que este comportamiento podría cambiar a medida que madura la implementación de Chrome. En cuanto a los otros navegadores, también esperamos ver algunos avances relacionados con esta nueva función.
¿Cómo utilizar Priorities Hints?
Si estás leyendo este artículo y tienes un breve conocimiento de HTML, no es necesario que te pongas en contacto con un desarrollador web para implementar las nuevas funciones.
De lo contrario, busca uno. Sabemos que los especialistas en marketing tienen conocimiento tecnológico general y, con frecuencia, necesitamos aprender cosas nuevas y trabajar con equipos cruzados o externos.
El siguiente es un enfoque técnico de Priority Hints.
Básicamente, Priority Hint es un recurso HTML. Por lo tanto, al especificar un atributo de "importance" en un elemento <script>, <img> o <link>, ya tendrás control sobre el orden de prioridad en el que el navegador solicita estos recursos.
Por ejemplo:
<! - Una imagen a la que el navegador asigna prioridad "Alta", pero no queremos eso. ->
<img src="/images/in_viewport_but_not_important.svg" importance="low" alt="I am an unimportant image!">
Desde <link> los elementos se ven afectados por el atributo de importancia. Esto significa que la prioridad puede cambiarse no solo para las típicas hojas de estilo, sino también para las sugerencias (rel =preload).
- Rel = preload: permite escribir solicitudes de búsqueda declarativas en tu <head>, especificando los recursos que tus páginas necesitarán inmediatamente después del comienzo del ciclo de vida de la carga de una página. El renderizador entra en funcionamiento antes del navegador principal de la máquina.
<! - Queremos comenzar una búsqueda temprana de un recurso, pero también despriorizarlo ->
<link rel = "preload" href = "/js/script.js" as = "script" hints important = "low">
En el extracto de arriba vemos algo diferente porque el “rel = preload” le indica al navegador que nuestro recurso es importante y que no está dirigido a romper el renderizado de la aplicación web, pero pronto pasamos su importancia a “baja”.
Entonces, en este escenario, el navegador sabe que este <link> es esencial para renderizar la aplicación, pero su importancia es baja. Se precargará al abrir el sitio, guardará este recurso en caché y, después de terminar las otras solicitudes, lo volverá a incluir en el DOM tan pronto como se haga referencia al recurso.
Las prioridades no se limitan al uso de HTML.
También puedes cambiar la prioridad de las solicitudes fetch dentro de las aplicaciones de JavaScript utilizando la opción de importancia que asume los mismos valores que el atributo HTML:
fetch ("https://example.com/", { important: "low" }). then (data => {
// Haz lo que normalmente harías con la búsqueda de datos
});
Ejemplos de uso
Las etiquetas <img> normalmente se cargan con prioridad baja / media, pero pueden ser críticas para la experiencia del usuario en ciertos casos. Para ciertas imágenes, el desarrollador puede querer indicar que su importancia está por encima de otras características mientras mantiene la experiencia del usuario con coherencia.
Un ejemplo importante de esto es la imagen de la página en un sitio para compartir imágenes que son el contenido principal buscado por los usuarios.
Los recursos de terceros (por ejemplo, secuencias de comandos de anuncios) a menudo se cargan con una prioridad media / alta, pero los desarrolladores pueden querer cargarlos con una prioridad baja o alta, según las necesidades de su aplicación.
Asimismo, los desarrolladores pueden querer cargar todos los recursos primarios que son críticos con alta prioridad.
A continuación se muestran algunos ejemplos del uso del atributo de importancia:
<script src = foo important = high>: Un script debe cargarse con alta importancia ya que es necesario para la experiencia del usuario.<link rel = preload href = foo as = image important = high>: una imagen debe precargarse con alta importancia (por ejemplo, potencialmente porque la imagen está en la ventana de vista previa o la página no tiene otras características críticas, ya que todas están integradas). Este ya es el comportamiento de precarga del navegador predeterminado en las implementaciones actuales, pero los desarrolladores podrían indicar explícitamente esta preferencia.<link rel = stylesheet href = foo important = low>: se puede usar para indicar un estilo de baja importancia / sin bloqueo que no afecta la experiencia del usuario.<iframe src = foo important = low>: Disminuye la importancia del iframe y todas sus subfunciones.<img src = foo important = auto>: una imagen debe cargarse sin preferencia de importancia. El navegador puede utilizar sus propias heurísticas para decidir la importancia relativa de la imagen.
Siempre prioriza la experiencia del usuario
Sabemos que quizás algunos códigos pueden parecer extraños para los especialistas en marketing. Pero trabajar con otras áreas de tu empresa sería beneficioso y mejoraría tu desempeño.
Al final del día, usar Priority Hints nos ayuda a tener una experiencia de usuario más natural. Y esa es una de las principales condiciones de Google para posicionar un sitio web en una mejor posición en SERP.
Es probable que desarrollemos nuestras aplicaciones principales de Web Vitals, ayudándonos a decirle al navegador qué y cuándo priorizar al renderizar nuestros sitios web.
En particular, me encantó esta nueva función y comenzaré a aplicarla en mis nuevos proyectos. Nos da un control considerable, lo que nos permite crear aplicaciones extraordinarias.
