Precarga las solicitudes de claves

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:

Captura de pantalla de la auditoría de solicitudes de claves de precarga de Lighthouse

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.

Sin vínculos de precarga, styles.css y ui.js solo se solicitan después de que se descarga, analiza y ejecuta app.js.
Sin los vínculos de precarga, styles.css y ui.js se solicitan solo después de que se haya descargado, analizado y ejecutado app.js.

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 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>
Con los vínculos precargados, style.css y ui.js se solicitan al mismo tiempo que app.js.
Con los vínculos de precarga, styles.css y ui.js se solicitan al mismo tiempo que app.js.

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>.

Recursos