Precargue los activos críticos

Precargue los activos críticos para mejorar la velocidad de carga

Precargue los activos críticos con rel=»preload» (spec) es un nuevo estándar web destinado a mejorar el rendimiento y proporcionar un control de carga más granular a los desarrolladores web. Ofrece a los desarrolladores la capacidad de definir una lógica de carga personalizada sin sufrir la penalización de rendimiento en que incurren los cargadores de recursos basados ​​en scripts.

La precarga de los activos críticos es más adecuada para los recursos que el navegador suele descubrir tarde.

Al precargar un determinado recurso, le está diciendo al navegador que desea obtenerlo antes de lo que el navegador lo descubriría porque está seguro de que es importante para la página actual.

Preload permite declarar solicitudes de búsqueda en los HTML <head>, especificando los recursos que su página necesitará muy pronto, que desea comenzar a cargar temprano, antes de que la maquinaria principal de representación de los navegadores entre en funcionamiento.Esto asegura que estén disponible antes y es menos probable que bloquee el procesamiento de la página, mejorando el rendimiento.

Como autor, usted sabe qué recursos son los más importantes para representar su página. Algunos de ellos a menudo están enterrados en CSS o scripts y puede llevar bastante tiempo al navegador incluso antes de que los descubra. Para esos recursos importantes, ahora puede utilizar <link rel="preload"> para comunicar al navegador que desea cargarlos lo antes posible.

Cómo implementar rel = preload

Todo lo que necesitas escribir es:

<link rel="preload" href="muy_importante.js" as="script">

Puede vincular casi cualquier cosa y el atributo as le dice al navegador lo que se descargará. Algunos de los valores posibles son:

  • script
  • style
  • image
  • font
  • audio
  • video

El atributo as, permite al navegador hacer una serie de cosas que los recursos secundarios y la captación previa no permiten:

  • El navegador puede establecer la prioridad de recursos correcta, de modo que se cargue en consecuencia, y no retrasará los recursos más importantes, ni se ubicará detrás de los recursos menos importantes.
  • El navegador puede asegurarse de que la solicitud esté sujeta a las directivas correctas de Política de seguridad de contenido y no salga al servidor si no debería.
  • El navegador puede enviar los encabezados Acceptapropiados según el tipo de recurso. (p. ej. anunciar soporte para «image/webp» al buscar imágenes)
  • El navegador conoce el tipo de recurso para que luego pueda determinar si el recurso podría reutilizarse para futuras solicitudes que necesiten el mismo recurso.

Puede consultar el resto de los tipos de contenido en MDN.

Precargue los activos críticos: Precargue fuentes

Las fuentes son probablemente lo más importante que se oculta en el CSS. Son fundamentales para representar el texto en la página, pero no se cargan hasta que el navegador esté seguro de que se van a utilizar. Esa verificación ocurre solo después de que CSS se ha analizado y aplicado, y el navegador ha hecho coincidir las reglas de CSS con los nodos DOM. Esto sucede bastante tarde en el proceso de carga de la página y a menudo resulta en un retraso innecesario en la representación del texto. Puede evitarlo utilizando el atributo de precarga cuando vincula las fuentes.

Una cosa a la que debe prestar atención al precargar fuentes es que también debe establecer el atributo crossorigin incluso si la fuente está en el mismo dominio:

<link rel="preload" href="font.woff" as="font" crossorigin>

La función de precarga permite que precargue los activos críticos y tiene un soporte limitado en este momento, ya que los navegadores todavía la están implementando, pero puede verificar el progreso.

Precarga de activos definidos en CSS

Las fuentes definidas con @font-facereglas o imágenes de fondo definidas en archivos CSS no se descubren hasta que el navegador descarga y analiza esos archivos CSS. La precarga de estos recursos garantiza que se obtengan antes de que se descarguen los archivos CSS.

Precargue los activos críticos: Precarga de archivos CSS

Si está utilizando el enfoque CSS crítico, divide su CSS en dos partes. El CSS crítico requerido para representar el contenido de la mitad superior de la página está incluido en <head>el documento y el CSS no crítico generalmente está cargado con JavaScript. Esperar a que se ejecute JavaScript antes de cargar CSS no crítico puede causar demoras en el procesamiento cuando los usuarios se desplazan, por lo que es una buena idea usar <link rel="preload">para iniciar la descarga antes.

Precargue los activos críticos: Precarga de archivos JavaScript

Debido a que los navegadores no ejecutan archivos precargados, la precarga es útil para separar la búsqueda de la ejecución, loque puede mejorar métricas como Time to Interactive. La precarga funciona mejor si divide sus paquetes de JavaScript y solo precarga fragmentos críticos.

Conclusión

Los navegadores son bestias complejas que han evolucionado desde los años 90. Para mejorar la velocidad de la página, precargue los activos críticos que el navegador descubre tarde. Precargar todo sería contraproducente, así que preload úselo con moderación y mida el impacto en el mundo real. Escribir su código con estas pautas lo ayudará a elegir las mejores estrategias para brindar una experiencia de navegación fluida.

Contenido Relacionado:

Cumulative Layout Shift. Cómo optimizar CLS
Cómo conseguir tráfico a mi sitio web o blog
Cómo saber si un enlace es dofollow
Los malos enlaces entrantes como afectan el posicionamiento
Herramienta de palabras clave de Google. Importancia y uso
Consejos de email marketing

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

This function has been disabled for Blog de Marketing digital.