La sección Oportunidades de tu informe de Lighthouse marca el tercer nivel de solicitudes en tu cadena de solicitudes crítica como candidatos de precarga:
Cómo las marcas de Lighthouse determinan los candidatos de precarga
Supongamos que la cadena de solicitudes crítica de tu página se ve de la siguiente manera:
index.html |--app.js |--styles.css |--ui.js
Tu archivo index.html
declara <script src="app.js">
. Cuando se ejecuta app.js
, llama a fetch()
para descargar styles.css
y ui.js
. La página no aparecerá completa hasta que se descarguen, analicen y ejecuten los últimos 2 recursos.
Con el ejemplo anterior, Lighthouse marcaría styles.css
y ui.js
como candidatos.
El ahorro potencial se basa en cuánto antes el navegador podría iniciar las solicitudes si declararas vínculos de precarga.
Por ejemplo, si app.js
tarda 200 ms en descargarse, analizarse y ejecutarse, el ahorro potencial de cada recurso es de 200 ms, ya que app.js
ya no es un cuello de botella para cada una de las solicitudes.
Las solicitudes de precarga pueden hacer que tus páginas se carguen más rápido.
El problema es que el navegador solo toma conocimiento de esos 2 últimos recursos después de descargar, analizar y ejecutar app.js
.
Sin embargo, sabes que esos recursos son importantes y debes descargarlos lo antes posible.
Declara tus vínculos de precarga
Declara vínculos de precarga en tu código HTML para indicarle al navegador que descargue los recursos clave lo antes posible.
<head>
...
<link rel="preload" href="styles.css" as="style" />
<link rel="preload" href="ui.js" as="script" />
...
</head>
Consulta también Precarga elementos críticos para mejorar la velocidad de carga a fin de obtener más orientación.
Compatibilidad del navegador
A partir de junio de 2020, la precarga es compatible con los navegadores basados en Chromium. Consulta Compatibilidad con los navegadores para conocer las actualizaciones.
Compatibilidad con herramientas de compilación para la precarga
Consulta la página Precarga de elementos de Tooling.Report.
Orientación específica para pilas
Angular
Precarga las rutas con anticipación para acelerar la navegación.
Magento
Modifica el diseño de tus temas y agrega etiquetas <link rel=preload>
.