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 "Comando + Opción + J" en Mac) para abrir DevTools.
- 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 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.
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.
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 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.
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.
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 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.
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.
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.
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: