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íticas como candidatos de precarga:

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

Cómo determina Lighthouse las marcas los candidatos de precarga

Supongamos que el tamaño de la página cadena de solicitudes críticas 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 fetch() para descargar styles.css y ui.js. Al parecer, la página no está completa hasta que esos 2 últimos recursos se descarguen, analicen y ejecuten. Con el ejemplo anterior, Lighthouse marcaría styles.css y ui.js como candidatos.

Los ahorros potenciales se basan en cuánto antes podrá para iniciar las solicitudes si declaraste los vínculos de precarga. Por ejemplo, si app.js tarda 200 ms en descargarse, analizarse y ejecutarse, El ahorro potencial para 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 los vínculos de precarga, los estilos.css y ui.js solo se solicitan después de que se haya descargado, analizado y ejecutado app.js.
Sin vínculos precargados, styles.css y Las ui.js se solicitan solo después de que se descarga el app.js. analizarlos y ejecutarlos.

El problema aquí es que el navegador solo detecta de los últimos 2 recursos después de que descargue, analice y ejecute app.js. Pero sabes que esos recursos son importantes y se descargarán lo antes posible.

Declara vínculos de precarga en tu código HTML para indicarle al navegador que descargue 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 de precarga, style.css y ui.js se solicitan al mismo tiempo que app.js.
Con los vínculos precargados, styles.css y ui.js se solicitan al mismo tiempo que app.js.

Consulta también Precarga los recursos críticos para mejorar la velocidad de carga. para 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 navegadores para ver las actualizaciones.

Compatibilidad de las herramientas de compilación con la precarga

Consulta la sección Precarga de recursos de Tooling.Report. .

Orientación específica de la pila

Angular

Precarga las rutas con anticipación para acelerar la navegación.

Magento

Cómo modificar el diseño de tus temas y agrega las etiquetas <link rel=preload>.

Recursos