Precargar consultas claves

Published on Updated on

Translated to: English, Português, 한국어, Pусский

La sección Oportunidades de su informe Lighthouse marca el tercer nivel de consultas en su cadena de consultas críticas como candidatos de precarga:

Una captura de pantalla de la auditoría de precargar consultas claves de Lighthouse

Cómo las banderas de Lighthouse determinan los candidatos de precarga

Suponga que la cadena de consultas críticas de su página tiene el siguiente aspecto:

index.html |--app.js |--styles.css |--ui.js

Su archivo index.html declara <script src="app.js">. Cuando app.js, llama a fetch() para descargar styles.css y ui.js La página no aparece completa hasta que esos 2 últimos recursos sean descargados, analizados y ejecutados. Usando el ejemplo anterior, Lighthouse marcaría styles.css y ui.js como candidatos.

Los ahorros potenciales se basan en cuánto antes el navegador podría iniciar las consultas si declara los enlaces de precarga. Por ejemplo, si app.js tarda 200 ms en descargar, analizar y ejecutar, el ahorro potencial para cada recurso es de 200 ms, ya que app.js no causa un cuello de botella para cada una de las consultas.

Precargar las consultas puede hacer que sus páginas se carguen más rápido.

Sin enlaces de precarga, styles.css y ui.js se consultan después de que app.js se haya descargado, analizado, y ejecutado.
Sin enlaces de precarga, styles.css y ui.js se consultan después de que app.js se haya descargado, analizado y ejecutado.

El problema aquí es que el navegador solo se da cuenta de esos 2 últimos recursos después de descargar, analizar y ejecutar app.js. Pero sabe que esos recursos son importantes y deben descargarse lo antes posible.

Declare sus enlaces de precarga

Declare enlaces de precarga en su HTML para indicar 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 enlaces de precarga, styles.css y ui.js se solicitan al mismo tiempo que app.js.
Con los enlaces de precarga, styles.css y ui.js se solicitan al mismo tiempo que app.js

Consulte también Precarga de archivos 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. Consulte Compatibilidad del navegador para obtener actualizaciones.

Compatibilidad con herramientas de compilación para precarga

Consulte la página de Precargando archivos (Preloading Assets) de Tooling.Report.

Orientación de recursos tecnológicos específicos

Angular

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

Magento

Modifique el diseño de sus temas y agregue etiquetas <link rel=preload>

Recursos

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.