Skip to content
Aprender Medir Blog Case studies About
En esta página
  • Cómo las banderas de Lighthouse determinan los candidatos de precarga
  • Declare sus enlaces de precarga
    • Compatibilidad del navegador
    • Compatibilidad con herramientas de compilación para precarga
  • Orientación de recursos tecnológicos específicos
    • Angular
    • Magento
  • Recursos

Precargar consultas claves

May 2, 2019 — Actualizado Jun 4, 2020
Available in: 한국어, Português, Русский, English
Appears in: Auditorías de rendimiento
En esta página
  • Cómo las banderas de Lighthouse determinan los candidatos de precarga
  • Declare sus enlaces de precarga
    • Compatibilidad del navegador
    • Compatibilidad con herramientas de compilación para precarga
  • Orientación de recursos tecnológicos específicos
    • Angular
    • Magento
  • Recursos

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 #

  • Código fuente para la auditoría de Precargar consultas claves
Última actualización: Jun 4, 2020 — Mejorar el artículo
Return to all articles
Compartir
suscribir

Contribute

  • Presentar un error
  • Ver fuente

Contenido relevante

  • developer.chrome.com
  • Chrome Actualizaciones
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos los productos
  • Condiciones y privacidad
  • Principios de la Comunidad

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.