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](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preload/image/a-screenshot-the-lightho-a0f22e9688496.png?authuser=7&hl=es-419)
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.](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preload/image/without-preload-links-st-f9c93e03b4029.png?authuser=7&hl=es-419)
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 tus vínculos de precarga
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.](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preload/image/with-preload-links-style-da7d794e22995.png?authuser=7&hl=es-419)
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>
.