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:
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.jsSu 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.
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>
styles.css y ui.js se solicitan al mismo tiempo que app.jsConsulte 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
Updated on • Improve article