En este codelab, se mejora el rendimiento de la siguiente página web cargando previamente y obteniendo por adelantado algunos recursos:
Medir
Primero, mide el rendimiento del sitio web antes de agregar cualquier optimización.
- Para obtener una vista previa del sitio, presiona Ver app y, luego, Pantalla completa
.
Ejecuta la auditoría de rendimiento de Lighthouse (Lighthouse > Opciones > Rendimiento) en la versión activa de tu Glitch (consulta también Descubre oportunidades de rendimiento con Lighthouse).
Lighthouse muestra la siguiente auditoría con errores para un recurso que se recupera tarde:
- Presiona "Control + Mayúsculas + J" (o "Comando + Opción + J" en Mac) para abrir DevTools.
- Haga clic en la pestaña Red.
El archivo main.css no se recupera con un elemento Link (<link>) colocado en el documento HTML, sino que un archivo JavaScript independiente, fetch-css.js, adjunta el elemento Link 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 dentro de main.css solo se recupera una vez que finaliza la descarga del archivo CSS.
La cadena de solicitudes críticas representa el orden de los recursos que el navegador prioriza y recupera. En 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 tarde.
Precarga los recursos críticos
El archivo main.css es un recurso crítico que se necesita de inmediato en cuanto se carga la página. Para los archivos importantes, como este recurso que se recupera tarde en tu aplicación, usa una etiqueta de precarga de vínculos para informar al navegador que lo descargue antes agregando 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 cargar previamente los archivos de hojas de estilo.
Vuelve a cargar la aplicación y consulta el panel Network en DevTools.
Observa cómo el navegador recupera el archivo CSS antes de que se termine de analizar el código JavaScript responsable de recuperarlo. Con la precarga, el navegador sabe que debe realizar una recuperación anticipada del recurso, ya que se supone que es fundamental para la página web.
Si no se usa correctamente, la carga previa puede perjudicar 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 precarga de forma incorrecta, agrega una sugerencia de precarga para este recurso también.
<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 lo esté usando.
Chrome muestra una advertencia en el panel de la consola cuando la página no usa un recurso precargado 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 usa de inmediato. Ahora puedes quitar el vínculo de precarga 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 precarga.
Prefetch future resources
Prefetch es otra sugerencia del navegador que se puede usar para solicitar un recurso que se usa para una ruta de navegación diferente, pero con una prioridad más baja que otros recursos importantes necesarios para la página actual.
En este sitio web, si haces clic en la imagen, se te redirecciona a una ruta details/ independiente.
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 realizar una recuperación previa de este recurso.
<head>
<!-- ... -->
<link rel="prefetch" href="details.css">
</head>
Para comprender cómo se activa una solicitud para el archivo, abre el panel Red en Herramientas para desarrolladores y desmarca la opción Inhabilitar caché.
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 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 según lo esperado.
Haz clic en la solicitud de red details.css en Herramientas para desarrolladores para ver sus detalles. Notarás que el archivo se recupera de la caché de disco del navegador.
Al aprovechar el tiempo de inactividad del navegador, la recuperación previa realiza una solicitud anticipada de un recurso necesario para otra página. Esto acelera las futuras solicitudes de navegación, ya que permite que el navegador almacene 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 JavaScript payloads with code splitting, 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 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) });
});
Dividir 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 precarga o la obtención previa de fragmentos que se importan de forma dinámica. Si usamos esta aplicación como ejemplo, el método lodash se puede prefetch en el tiempo de inactividad del navegador. Cuando un usuario presiona el botón, no hay demora para recuperar el recurso.
Usa el parámetro de comentario webpackPrefetch específico dentro de una importación dinámica para obtener 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 inyecta una etiqueta de obtención previa para el recurso en el encabezado del documento. Esto se puede ver en el panel Elements de las Herramientas para desarrolladores.
Si observas las solicitudes en el panel Red, también verás que este fragmento se recupera con una prioridad baja después de que se solicitan todos los demás recursos.
Si bien la recuperación previa tiene más sentido para este caso de uso, webpack también admite la precarga de fragmentos que se importan de forma dinámica.
import(/* webpackPreload: true */ 'module')
Conclusión
Con este codelab, deberías comprender bien cómo la precarga o la recuperación previa de ciertos recursos pueden mejorar la experiencia del usuario en tu sitio. Es importante mencionar que estas técnicas no se deben usar para todos los recursos, y que usarlas de forma incorrecta puede perjudicar el rendimiento. Los mejores resultados se obtienen solo con la precarga o la recuperación previa selectivas.
En síntesis:
- Usa preload para los recursos que se descubren tarde, pero son fundamentales para la página actual.
- Usa prefetch para los recursos que se necesitan para una ruta de navegación o acción del usuario futuras.
Actualmente, no todos los navegadores admiten la precarga y la recuperación previa. Esto significa que no todos los usuarios de tu aplicación notarán mejoras en el rendimiento.
Si deseas obtener más información sobre aspectos específicos de cómo la precarga y la obtención previa pueden afectar tu página web, consulta estos artículos: