Codelab: Carga previamente recursos críticos para mejorar la velocidad de carga

En este codelab, se mejora el rendimiento de la siguiente página web mediante la carga previa y la carga anticipada de algunos recursos:

Captura de pantalla de la app

Medir

Primero, mide el rendimiento del sitio web antes de agregar optimizaciones.

  • Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completapantalla completa.

Ejecuta la auditoría de rendimiento de Lighthouse (Lighthouse > Options > Performance) en la versión publicada de tu Glitch (consulta también Descubre oportunidades de rendimiento con Lighthouse).

Lighthouse muestra la siguiente auditoría fallida para un recurso que se recupera con retraso:

Lighthouse: Auditoría de solicitudes de claves de carga previa
  • Presiona `Control + Mayúsculas + J` (o `Command + Option + J` en Mac) para abrir Herramientas para desarrolladores.
  • Haga clic en la pestaña Red.
Panel de red con un recurso descubierto tardíamente

Un elemento de vínculo (<link>) ubicado en el documento HTML no recupera el archivo main.css, sino que un archivo JavaScript independiente, fetch-css.js, adjunta el elemento de vínculo al DOM después del evento window.onLoad. Esto significa que el archivo solo se recupera después de que el navegador termina de analizar y ejecutar el archivo JS. Del mismo modo, una fuente web (K2D.woff2) especificada en main.css solo se recupera una vez que se termina de descargar el archivo CSS.

La cadena de solicitudes críticas representa el orden de los recursos que el navegador prioriza y recupera. En este momento, la página web se ve de la siguiente manera:

├─┬ / (initial HTML file)
  └── fetch-css.js
    └── main.css
      └── K2D.woff2

Dado que el archivo CSS se encuentra en el tercer nivel de la cadena de solicitudes, Lighthouse lo identificó como un recurso descubierto tardíamente.

Carga previamente recursos críticos

El archivo main.css es un recurso crítico que se necesita inmediatamente después de cargar la página. Para archivos importantes, como este recurso, que se recuperan tarde en tu aplicación, usa una etiqueta de carga previa de vínculos para informarle al navegador que lo descargue antes. Para ello, agrega un elemento Link al encabezado del documento.

Agrega una etiqueta de carga previa para esta aplicación:

<head>
  <!-- ... -->
  <link rel="preload" href="main.css" as="style">
</head>

El atributo as se usa para identificar qué tipo de recurso se recupera, y as="style" se usa para precargar archivos de hoja de estilo.

Vuelve a cargar la aplicación y consulta el panel Red de Herramientas para desarrolladores.

Panel de red con recurso precargado

Observa cómo el navegador recupera el archivo CSS antes de que el código JavaScript responsable de recuperarlo termine de analizarse. Con la precarga, el navegador sabe que debe realizar una recuperación preventiva del recurso asumiendo que es fundamental para la página web.

Si no se usa correctamente, la carga previa puede afectar el rendimiento, ya que realiza solicitudes innecesarias de recursos que no se usan. En esta aplicación, details.css es otro archivo CSS ubicado en la raíz del proyecto, pero se usa para un /details route independiente. Para mostrar un ejemplo de cómo se puede usar de forma incorrecta la precarga, agrega una sugerencia de precarga para este recurso.

<head>
  <!-- ... -->
  <link rel="preload" href="main.css" as="style">
  <link rel="preload" href="details.css" as="style">
</head>

Vuelve a cargar la aplicación y observa el panel Red. Se realiza una solicitud para recuperar details.css, aunque la página web no la esté usando.

Panel de red con carga previa innecesaria

Chrome muestra una advertencia en el panel de Console cuando la página no usa un recurso precargado en unos segundos después de que se cargó.

Advertencia de precarga en la consola

Usa esta advertencia como indicador para identificar si tienes recursos precargados que tu página web no está usando de inmediato. Ahora puedes quitar el vínculo de carga previa innecesario para esta página.

<head>
  <!-- ... -->
  <link rel="preload" href="main.css" as="style">
  <link rel="preload" href="details.css" as="style">
</head>

Para obtener una lista de todos los tipos de recursos que se pueden recuperar junto con los valores correctos que se deben usar para el atributo as, consulta el artículo de MDN sobre la carga previa.

Cómo recuperar recursos futuros de forma anticipada

La precarga es otra sugerencia del navegador que se puede usar para realizar una solicitud de un recurso que se usa para una ruta de navegación diferente, pero con una prioridad menor que otros recursos importantes necesarios para la página actual.

En este sitio web, si haces clic en la imagen, se te dirige a una ruta details/ distinta.

Ruta de detalles

Un archivo CSS independiente, details.css, contiene todos los estilos necesarios para esta página simple. Agrega un elemento de vínculo a index.html para recuperar este recurso de antemano.

<head>
  <!-- ... -->
  <link rel="prefetch" href="details.css">
</head>

Para comprender cómo esto activa una solicitud del archivo, abre el panel Network en DevTools y desmarca la opción Disable cache.

Inhabilita la memoria caché en las Herramientas para desarrolladores de Chrome

Vuelve a cargar la aplicación y observa cómo se realiza una solicitud de prioridad muy baja para details.css después de que se recuperaron todos los demás archivos.

Panel de red con recurso recuperado previamente

Con las herramientas para desarrolladores abiertas, haz clic en la imagen del sitio web para navegar a la página details. Dado que se usa un elemento de vínculo en details.html para recuperar details.css, se realiza una solicitud para el recurso como se espera.

Solicitudes de red de la página de detalles

Haz clic en la solicitud de red details.css en DevTools para ver sus detalles. Notarás que el archivo se recupera de la caché de disco del navegador.

Solicitud de detalles recuperada de la caché del disco

Aprovechando el tiempo inactivo del navegador, la precarga realiza una solicitud anticipada de un recurso necesario para una página diferente. Esto acelera las solicitudes de navegación futuras, ya que permite que el navegador almacenen en caché el recurso antes y lo entregue desde la caché cuando sea necesario.

Precarga y carga previa con webpack

En la publicación Reduce las cargas útiles de JavaScript con división de código, se explora el uso de importaciones dinámicas para dividir un paquete en varios fragmentos. Esto se demuestra con una aplicación simple que importa de forma dinámica un módulo de Lodash cuando se envía un formulario.

App de Magic Sorter que demuestra la división de código

Puedes acceder a el Glitch de esta aplicación aquí.

El siguiente bloque de código, que se encuentra en src/index.js,, es responsable de importar de forma dinámica el método cuando se hace clic en el botón.

form.addEventListener("submit", e => {
  e.preventDefault()
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

La división de un paquete mejora los tiempos de carga de la página, ya que reduce su tamaño inicial. La versión 4.6.0 de webpack admite la carga previa o la carga anticipada de fragmentos que se importan de forma dinámica. Si se usa esta aplicación como ejemplo, el método lodash se puede cargar previamente en el tiempo de inactividad del navegador. Cuando un usuario presiona el botón, no hay retraso para que se recupere el recurso.

Usa el parámetro de comentario webpackPrefetch específico dentro de una importación dinámica para cargar previamente un fragmento en particular. Así se vería con esta aplicación en particular.

form.addEventListener("submit", e => {
  e.preventDefault()
  import(/* webpackPrefetch: true */ 'lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

Una vez que se vuelve a cargar la aplicación, webpack inserta una etiqueta de precarga para el recurso en la parte superior del documento. Esto se puede ver en el panel Elements de DevTools.

Panel de elementos con etiqueta de carga previa

Si observas las solicitudes en el panel Network, también verás que este fragmento se recupera con una prioridad baja después de que se hayan solicitado todos los demás recursos.

Panel de red con solicitud recuperada previamente

Si bien la carga previa tiene más sentido para este caso de uso, webpack también admite la carga previa de fragmentos que se importan de forma dinámica.

import(/* webpackPreload: true */ 'module')

Conclusión

Con este codelab, comprenderás bien cómo la precarga de ciertos recursos puede mejorar la experiencia del usuario en tu sitio. Es importante mencionar que estas técnicas no se deben utilizar para todos los recursos y que su uso incorrecto puede perjudicar el rendimiento. Para obtener los mejores resultados, solo debes realizar la carga previa o la carga previa selectiva.

En síntesis:

  • Usa la carga previa para los recursos que se descubren tarde, pero que son fundamentales para la página actual.
  • Usa la carga previa para los recursos necesarios para una ruta de navegación o acción del usuario futuras.

Actualmente, no todos los navegadores admiten la carga previa y la carga anticipada. Esto significa que no todos los usuarios de tu aplicación pueden notar mejoras en el rendimiento.

Si deseas obtener más información sobre aspectos específicos de cómo la carga previa y la carga anticipada pueden afectar tu página web, consulta estos artículos: