Precarga de activos críticos para mejorar la velocidad de carga
Cuando abre una página web, el navegador solicita el documento HTML de un servidor, analiza su contenido y envía solicitudes separadas para cualquier recurso referenciado. Como desarrollador, ya conoce todos los recursos que su página necesita y cuáles son los más importantes. Puede utilizar ese conocimiento para solicitar los recursos críticos anticipadamente y acelerar el proceso de carga. Esta publicación explica cómo hacer eso con <link rel="preload">.
Cómo funciona la precarga #
La precarga es más adecuada para los recursos que el navegador suele descubrir más tarde.
@font-face. El navegador carga el archivo de fuente solo después de que haya terminado de descargar y analizar la hoja de estilo.
Al precargar un determinado recurso, está informando al navegador que le gustaría recuperar dicho recurso antes de que el navegador lo descubra, porque está seguro de que es importante para la página actual.
. En este ejemplo, se realiza la precarga de la fuente Pacifico, por lo que la descarga ocurre en paralelo con la hoja de estilo.
La cadena de solicitudes críticas representa el orden de los recursos priorizados y buscados por el navegador. Lighthouse identifica los activos que se encuentran en el tercer nivel de esta cadena como descubiertos tardíamente. Puede utilizar la auditoría de solicitudes de claves de precarga para identificar cuáles recursos precargar.
Puede precargar recursos agregando una etiqueta <link> con el atributo rel="preload" al encabezado de su documento HTML:
<link rel="preload" as="script" href="critical.js">El navegador almacena en caché los recursos precargados para que estén disponibles de inmediato cuando sean necesarios (no ejecuta los scripts ni aplica las hojas de estilo).
Sugerencias de recursos, por ejemplo, preconnect y prefetch, se ejecutan como el navegador crea conveniente. La preload, por otro lado, es obligatoria para el navegador. Los navegadores modernos ya son muy buenos a la hora de priorizar recursos, por eso es importante usar la preload con moderación y solo precargar los recursos más críticos.
Las precargas no utilizadas activan una advertencia de consola en Chrome, aproximadamente 3 segundos después del evento de load.
Casos de uso #
Precarga de recursos definidos en CSS #
Las fuentes definidas con las reglas de @font-face o las imágenes de fondo definidas en archivos CSS no se descubren hasta que el navegador descarga y analiza los archivos CSS correspondientes. La precarga de estos recursos garantiza que se obtengan antes de que se descarguen los archivos CSS.
Precarga de archivos CSS #
Si está utilizando el enfoque CSS crítico, dividirás el CSS en dos partes. El CSS crítico requerido para representar el contenido de la mitad superior de la página está incluido en la <head> del documento y el CSS no crítico generalmente se carga de forma diferida con JavaScript. Esperar a que JavaScript se ejecute antes de cargar CSS no crítico puede causar retrasos en la representación cuando los usuarios se desplazan, por lo que es una buena idea usar <link rel="preload"> para iniciar la descarga de modo anticipado.
Precarga de archivos JavaScript #
Debido a que los navegadores no ejecutan archivos precargados, la precarga es útil para separar la obtención de la ejecución, lo que puede mejorar métricas como Time to Interactive. La precarga funciona mejor si divide sus paquetes de JavaScript y solo precarga fragmentos críticos.
Cómo implementar rel=preload #
La forma más sencilla de implementar la preload es agregar una etiqueta <link> a la <head> del documento:
<head>
<link rel="preload" as="script" href="critical.js">
</head>Suministrar el atributo as ayuda al navegador a establecer la prioridad del recurso precargado de acuerdo con el tipo, establecer los encabezados correctos y determinar si el recurso ya existe en la caché. Los valores aceptados para este atributo incluyen: script, style, font, image y otros.
Algunos tipos de recursos, como las fuentes, se cargan en modo anónimo. Para estos recursos, debe establecer el atributo crossorigin con la preload:
<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>Los elementos <link> también admiten un atributo de type, que contiene el tipo MIME del recurso vinculado. Los navegadores usan el valor del type para asegurarse de que los recursos se carguen previamente solo si el tipo de archivo es compatible. Si un navegador no admite el tipo de recurso especificado, ignorará el <link rel="preload">.
También puede precargar cualquier tipo de recurso a través del encabezado Link HTTP:
Link: </css/style.css>; rel="preload"; as="style"
Una ventaja de especificar la preload en el encabezado HTTP es que el navegador no necesita analizar el documento para descubrirlo, lo que puede ofrecer pequeñas mejoras en algunos casos.
Precarga de módulos JavaScript con webpack #
Si está utilizando un paquete de módulos que crea archivos de compilación de su aplicación, debe verificar si admite la inyección de etiquetas de precarga. Con la versión 4.6.0 o posterior del webpack, la precarga es compatible mediante el uso de magic comments dentro de import():
import(_/* webpackPreload: true */_ "CriticalChunk")Si está utilizando una versión anterior de webpack, utilice un complemento de terceros como preload-webpack-plugin.
Conclusión #
Para mejorar la velocidad de la página, utilice la precarga en los recursos importantes que el navegador descubre tardíamente. Precargar todos los recursos sería contraproducente, así que use la preload con moderación y mida el impacto en el mundo real.