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 completa pantalla 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 "Comando + Opción + J" en Mac) para abrir DevTools.
  • 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 el caso de esta página web, actualmente 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 fundamental que se necesita de inmediato apenas se carga 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 observa el panel Network en DevTools.

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 carga previa, el navegador sabe que debe realizar una recuperación anticipada del recurso con la suposición de 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 la carga previa de forma incorrecta, agrega una sugerencia de carga previa 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 Network. 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 carga previa 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 realizar la precarga de recursos futuros

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 diseños 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 entrada Reduce las cargas útiles de JavaScript con la 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 la falla de esta aplicación aquí.

El siguiente bloque de código, que se encuentra en src/index.js,, es responsable de importar el método de forma dinámica 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. Con esta aplicación como ejemplo, el método lodash se puede recuperar previamente durante el tiempo de inactividad del navegador. Cuando un usuario presiona el botón, no hay demora para que se recupere el recurso.

Usa el parámetro de comentario webpackPrefetch específico dentro de una importación dinámica para recuperar 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

Aunque 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, deberías tener una comprensión sólida de cómo la carga previa o la carga anticipada de ciertos recursos puede mejorar la experiencia del usuario de tu sitio. Es importante mencionar que estas técnicas no deben usarse para todos los recursos y que usarlas de forma incorrecta 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 recuperación anticipada para los recursos que se necesitan para una ruta de navegación o una acción del usuario futuras.

Actualmente, no todos los navegadores admiten la carga previa y la carga anticipada. Esto significa que es posible que no todos los usuarios de tu aplicación noten 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: