Skip to content
Aprender Medir Blog Case studies About
En esta página
  • Cómo funciona la precarga
  • Casos de uso
    • Precarga de recursos definidos en CSS
    • Precarga de archivos CSS
    • Precarga de archivos JavaScript
  • Cómo implementar rel=preload
    • Precarga de módulos JavaScript con webpack
  • Conclusión

Precarga de activos críticos para mejorar la velocidad de carga

Nov 5, 2018 — Actualizado May 27, 2020
Available in: 日本語, 한국어, Português, Русский, 中文, English
Appears in: Tiempos de carga rápidos
Houssein Djirdeh
Houssein Djirdeh
TwitterGitHubGlitchHomepage
Milica Mihajlija
Milica Mihajlija
TwitterGitHubHomepage
En esta página
  • Cómo funciona la precarga
  • Casos de uso
    • Precarga de recursos definidos en CSS
    • Precarga de archivos CSS
    • Precarga de archivos JavaScript
  • Cómo implementar rel=preload
    • Precarga de módulos JavaScript con webpack
  • Conclusión

Cuando abre una página web, el navegador solicita el documento HTML de un servidor, analiza su contenido y envía solicitudes separadas para cualquier recurso referenciado. Como desarrollador, ya conoce todos los recursos que su página necesita y cuáles son los más importantes. Puede utilizar ese conocimiento para solicitar los recursos críticos anticipadamente y acelerar el proceso de carga. Esta publicación explica cómo hacer eso con <link rel="preload">.

Cómo funciona la precarga #

La precarga es más adecuada para los recursos que el navegador suele descubrir más tarde.

Captura de pantalla del panel de red de Chrome DevTools
En este ejemplo, la fuente Pacifico se define en la hoja de estilo con una regla @font-face. El navegador carga el archivo de fuente solo después de que haya terminado de descargar y analizar la hoja de estilo.

Al precargar un determinado recurso, está informando al navegador que le gustaría recuperar dicho recurso antes de que el navegador lo descubra, porque está seguro de que es importante para la página actual.

Captura de pantalla del panel Chrome DevTools Network después de habilitar la precarga. En este ejemplo, se realiza la precarga de la fuente Pacifico, por lo que la descarga ocurre en paralelo con la hoja de estilo.

La cadena de solicitudes críticas representa el orden de los recursos priorizados y buscados por el navegador. Lighthouse identifica los activos que se encuentran en el tercer nivel de esta cadena como descubiertos tardíamente. Puede utilizar la auditoría de solicitudes de claves de precarga para identificar cuáles recursos precargar.

La clave de precarga de Lighthouse solicita auditoría

Puede precargar recursos agregando una etiqueta <link> con el atributo rel="preload" al encabezado de su documento HTML:

<link rel="preload" as="script" href="critical.js">

El navegador almacena en caché los recursos precargados para que estén disponibles de inmediato cuando sean necesarios (no ejecuta los scripts ni aplica las hojas de estilo).

Después de implementar la precarga, muchos sitios, incluidos Shopify, Financial Times y Treebo, presentaron mejoras de 1 segundo en métricas centradas en el usuario, como Time to Interactive: Tiempo de interacción y First Contentful Paint: Despliegue de la primera entrada.

Sugerencias de recursos, por ejemplo, preconnect y prefetch, se ejecutan como el navegador crea conveniente. La preload, por otro lado, es obligatoria para el navegador. Los navegadores modernos ya son muy buenos a la hora de priorizar recursos, por eso es importante usar la preload con moderación y solo precargar los recursos más críticos.

Las precargas no utilizadas activan una advertencia de consola en Chrome, aproximadamente 3 segundos después del evento de load.

Advertencia de la consola Chrome DevTools sobre recursos precargados no utilizados
preload es compatible con todos los navegadores modernos.

Casos de uso #

Precaución

Al momento de escribir este artículo, Chrome tiene un error abierto para las solicitudes precargadas que se recuperan antes de otros recursos de mayor prioridad. Hasta que esto se resuelva, tenga cuidado de cómo los recursos precargados pueden "saltar la cola" y ser solicitados antes de lo debido.

Precarga de recursos definidos en CSS #

Las fuentes definidas con las reglas de @font-face o las imágenes de fondo definidas en archivos CSS no se descubren hasta que el navegador descarga y analiza los archivos CSS correspondientes. La precarga de estos recursos garantiza que se obtengan antes de que se descarguen los archivos CSS.

Precarga de archivos CSS #

Si está utilizando el enfoque CSS crítico, dividirás el CSS en dos partes. El CSS crítico requerido para representar el contenido de la mitad superior de la página está incluido en la <head> del documento y el CSS no crítico generalmente se carga de forma diferida con JavaScript. Esperar a que JavaScript se ejecute antes de cargar CSS no crítico puede causar retrasos en la representación cuando los usuarios se desplazan, por lo que es una buena idea usar <link rel="preload"> para iniciar la descarga de modo anticipado.

Precarga de archivos JavaScript #

Debido a que los navegadores no ejecutan archivos precargados, la precarga es útil para separar la obtención de la ejecución, lo que puede mejorar métricas como Time to Interactive. La precarga funciona mejor si divide sus paquetes de JavaScript y solo precarga fragmentos críticos.

Cómo implementar rel=preload #

La forma más sencilla de implementar la preload es agregar una etiqueta <link> a la <head> del documento:

<head>
<link rel="preload" as="script" href="critical.js">
</head>

Suministrar el atributo as ayuda al navegador a establecer la prioridad del recurso precargado de acuerdo con el tipo, establecer los encabezados correctos y determinar si el recurso ya existe en la caché. Los valores aceptados para este atributo incluyen: script, style, font, image y otros.

Eche un vistazo al documento de Programación y prioridades de recursos de Chrome para obtener más información sobre cómo el navegador prioriza los diferentes tipos de recursos.

Precaución

Omitir el atributo as o introducir un valor no válido equivale a una solicitud XHR, donde el navegador no sabe lo que está buscando, por lo que no puede determinar la prioridad correcta. También puede hacer que algunos recursos, como los scripts, se recuperen dos veces.

Algunos tipos de recursos, como las fuentes, se cargan en modo anónimo. Para estos recursos, debe establecer el atributo crossorigin con la preload:

<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>

Precaución

Las fuentes precargadas sin el atributo crossorigin se recuperarán dos veces.

Los elementos <link> también admiten un atributo de type, que contiene el tipo MIME del recurso vinculado. Los navegadores usan el valor del type para asegurarse de que los recursos se carguen previamente solo si el tipo de archivo es compatible. Si un navegador no admite el tipo de recurso especificado, ignorará el <link rel="preload">.

Pruebelo

Mejore el rendimiento de una página mediante la precarga de fuentes web.

También puede precargar cualquier tipo de recurso a través del encabezado Link HTTP:

Link: </css/style.css>; rel="preload"; as="style"

Una ventaja de especificar la preload en el encabezado HTTP es que el navegador no necesita analizar el documento para descubrirlo, lo que puede ofrecer pequeñas mejoras en algunos casos.

Precarga de módulos JavaScript con webpack #

Si está utilizando un paquete de módulos que crea archivos de compilación de su aplicación, debe verificar si admite la inyección de etiquetas de precarga. Con la versión 4.6.0 o posterior del webpack, la precarga es compatible mediante el uso de magic comments dentro de import():

import(_/* webpackPreload: true */_ "CriticalChunk")

Si está utilizando una versión anterior de webpack, utilice un complemento de terceros como preload-webpack-plugin.

Conclusión #

Para mejorar la velocidad de la página, utilice la precarga en los recursos importantes que el navegador descubre tardíamente. Precargar todos los recursos sería contraproducente, así que use la preload con moderación y mida el impacto en el mundo real.

Rendimiento
Última actualización: May 27, 2020 — Mejorar el artículo
Codelabs

See it in action

Learn more and put this guide into action.

  • Codelab: Preload critical assets to improve loading speed
  • Preload web fonts to improve loading speed
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.