En este codelab, se mejora el rendimiento de la siguiente página web mediante la carga previa y la carga anticipada de algunos recursos:
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.
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:
- Presiona `Control + Mayúsculas + J` (o `Command + Option + J` en Mac) para abrir Herramientas para desarrolladores.
- Haga clic en la pestaña Red.
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.
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.
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ó.
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.
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.
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.
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.
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.
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.
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.
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.
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: