More share buttons
Share on Pinterest

La nueva API de sugerencias de prioridad de Google puede acelerar su sitio web

http://rockcontent.com/wp-content/uploads/2021/11/Everybody-Writes-Social-Feed-1200×627-1.png

Recientemente, Google publicó un artículo instando a los desarrolladores y editores de sitios web a comenzar a usar API de índice de prioridad, una nueva función que ayudará a optimizar la carga de los 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 Core Web Vitals (CWV).

En una prueba realizada por el equipo del navegador Chrome, se cargó una imagen en segundo plano con el atributo “rendimiento” que permite al navegador ahorrar 1,9 segundos en el tiempo de descarga de esta imagen.

Los navegadores tienen su propia priorización de recursos predeterminada. Pero hay algunas formas de decirle al navegador que reorganice la prioridad de descarga de este recurso haciendo que descargue una imagen o secuencia de comandos antes que otra o incluso solicitando previamente un recurso específico. Esto facilita la representación del sitio.

Todo suena puramente técnico, pero piense en la experiencia del usuario.

Core Web Vitals de Google tiene como objetivo brindar a su audiencia 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.

¿Cuáles son los índices de prioridad?

Las clasificaciones de prioridad son una función que 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á su dispositivo y al otro lado de la calle está la tienda (una analogía del sitio web) que desea visitar. La calle misma es tu conexión a Internet. DNS es como la dirección de la tienda a la que desea ir; TCP / IP es el mecanismo de transporte que utiliza para llegar a esta ubicación (a pie, en bicicleta, en coche, etc.) y HTTP es el idioma que utiliza para comunicarse con este sitio web.

Lorsque vous chargez un site Web, ce qui se passe est : votre navigateur identifie l’adresse du magasin (site Web) et envoie une demande au serveur (un ordinateur sur lequel le site Web est stocké) demandant l’autorisation d’accéder à esta página. Si el servidor lo aprueba, el navegador recopila los pequeños fragmentos de información en una página web completa y se la muestra.

Así, cuando un navegador solicita un recurso (una imagen, un script, etc.), recibe una prioridad que variará según el tipo y la ubicación de almacenamiento del recurso solicitado.

Cada tipo tiene una prioridad diferente para que el navegador solicite, descargue y devuelva el recurso.

Con señales de prioridad, podemos manipular esta prioridad para mejorar la experiencia del usuario en nuestras aplicaciones web.

El atributo “importancia” acepta uno de los siguientes 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 del navegador no impida que esto suceda.
  • Baja: la función se considera de baja prioridad y el usuario quiere que el navegador la desprecie si la configuración de uso predeterminada lo permite.
  • Automático: este es el valor predeterminado en el que no tiene preferencia y permite que el navegador decida la prioridad adecuada.

Más control sobre sus páginas

En última instancia, Priority Hints puede tener excelentes aplicaciones de UX porque usted, el propietario del sitio, puede tener más control sobre lo que se carga primero en sus páginas.

Si está rastreando el comportamiento del usuario a través de mapas de calor, widgets, puntos de clic o cualquier otro medio, puede implementar señales de prioridad basadas en estos datos para mejorar la experiencia de su sitio.

Por ejemplo, puede priorizar la carga de una determinada imagen o botón en su página principal con la que ha visto a los usuarios interactuar más. O, por el contrario, puede despriorizar scripts irrelevantes que pueden afectar el rendimiento de otros aspectos más importantes de su sitio, desde el punto de vista del marketing.

Además de eso, Priorities Hints también puede ser beneficioso para sus esfuerzos de SEO.

A partir de 2020, Google ha estado utilizando métricas de Core Web Vitals para evaluar el rendimiento de un sitio web.

Si obtiene una puntuación alta en CWV, Google considera que su página es fácil de usar y, por lo tanto, aumentará sus posibilidades de posicionarse bien en las SERP.

Mediante el uso de Sugerencias de prioridades, puede trabajar con su equipo de TI para realizar cambios activos en los procesos de carga de su sitio web para probar qué lanzamientos tienen un impacto positivo en las métricas de CWV y la velocidad de carga.

Pero cuidado: son solo pistas y no instrucciones, por lo que el navegador tiene la última palabra. Sin embargo, Google dice que este comportamiento puede cambiar a medida que madura la implementación de Chrome. En cuanto a otros navegadores, también esperamos ver algunos avances relacionados con esta nueva función.

Cómo utilizar índices de prioridad

Si está leyendo este artículo y tiene un breve conocimiento de HTML, no es necesario que se ponga en contacto con un desarrollador web para implementar las nuevas funciones. De lo contrario, busque uno. Sabemos que los especialistas en marketing tienen una pila de tecnología completa, y la mayoría de las veces tenemos que aprender cosas nuevas y trabajar con equipos cruzados.

El siguiente es un enfoque técnico para el asesoramiento prioritario.

Básicamente, el índice de prioridad es un recurso HTML. Por lo tanto, al especificar un atributo “importancia” en un <script>, <img> Dónde <link> item, ya tendrá control sobre el orden de prioridad en el que el navegador solicita estos recursos.

Por ejemplo:

<!-- An image that the browser assigns "High" priority, but we don't want that. -->

<img src="https://rockcontent.com/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 se puede cambiar no solo para las inclusiones típicas de la hoja de estilo, sino también para los consejos de precarga rel =:

  • rel = preload: le permite escribir consultas de búsqueda declarativas en su , especificando los recursos de sus páginas que necesitará inmediatamente después de la carga, que desea comenzar a precargar al comienzo del ciclo de vida de la carga de una página, antes de que se active el renderizador del navegador principal de la máquina.

<!-- We want to start an early search for a resource, but also deprioritize it -->

<link rel="preload" href="https://rockcontent.com/js/script.js" as="script"hints importance="low">

En el fragmento anterior vemos algo diferente ya que “rel = preload” le dice al navegador que nuestro recurso es importante y que no interrumpe el procesamiento de la aplicación web, pero pronto pasamos su importancia como “baja”.

Entonces, en este escenario, el navegador sabe que esto es esencial para renderizar la aplicación pero su importancia es baja. Se carga previamente cuando se abre el sitio, guarda ese recurso en la caché y, después de completar otras solicitudes, lo vuelve a incluir en el DOM tan pronto como se hace referencia al recurso.

Las prioridades no se limitan al uso de HTML.

También puede cambiar la prioridad de las solicitudes de recuperación en aplicaciones javascript utilizando la opción de importancia que toma los mismos valores que el atributo HTML:

fetch("https://example.com/", { importance: "low" }).then(data = > {

      // Do what you would normally do with data fetching

});

Ejemplos de uso

Etiquetas normalmente se cargan con una prioridad baja / media, pero pueden ser fundamentales para la experiencia del usuario en algunos casos. Para algunas imágenes, es posible que el desarrollador desee indicar que su importancia es mayor que la de otras funciones, al mismo tiempo que mantiene la experiencia del usuario de manera constante.

Un ejemplo importante de esto es la imagen de la página en un sitio para compartir imágenes donde la imagen es el contenido principal buscado por los usuarios.

Los recursos de terceros (por ejemplo, los scripts 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 críticos con alta prioridad.

A continuación, se muestran algunos ejemplos del uso del atributo de importancia:

  • <script src=foo importance=high>: Un script debe cargarse con mucha importancia ya que es necesario para la experiencia del usuario.
  • <link rel=preload href=foo as=image importance=high>: Una imagen debe estar precargada con gran 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 especificar explícitamente esta preferencia.
  • <link rel=stylesheet href=foo importance=low>: se puede usar para indicar un estilo de poca importancia / sin bloqueo que no tiene ningún impacto en la experiencia del usuario.
  • <iframe src=foo importance=low>: Disminuye la importancia del iframe y todas sus subfuncionalidades.
  • <img src=foo importance=auto>: Una imagen debe cargarse sin ninguna preferencia de importancia. El navegador puede utilizar sus propias heurísticas para decidir la importancia relativa de la imagen.

Priorice siempre la experiencia del usuario

Sabemos que algunos códigos pueden parecer extraños para los especialistas en marketing. Pero trabajar con otras áreas de su negocio sería beneficioso y mejoraría su desempeño.

En última instancia, usar Priority Hints nos ayuda a tener una experiencia de usuario más natural. Y esta es una de las principales condiciones para que Google clasifique un sitio web en una mejor posición en las SERP.

Probablemente estaremos evolucionando nuestras aplicaciones Core Web Vitals, ayudándonos a decirle al navegador qué y cuándo priorizar al renderizar nuestros sitios web.

Me gustó especialmente esta nueva función y comenzaré a aplicarla en mis nuevos proyectos. Esto nos da un tremendo control en nuestras manos, lo que nos permite crear aplicaciones increíbles.

#nueva #API #sugerencias #prioridad #Google #puede #acelerar #sitio #web

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.