Error de conexión. Inténtalo de nuevo.

Saltar al contenido
SEO Tools
Ayuda y documentación
Velocidad Impacto bajo Medio 15 a 30 minutos

Precarga de recursos clave (precarga)

Los recursos importantes se pueden cargar antes mediante rel="preload".

Qué es

rel="preload" le dice al navegador que descargue, con alta prioridad y por adelantado, un recurso que pronto será necesario (la imagen principal de la mitad superior de la página, una fuente clave, CSS crítico).

Por qué importa

Sin precarga, el navegador descubre tarde algunos recursos importantes (por ejemplo, una fuente a la que se hace referencia únicamente desde CSS), lo que retrasa su aparición. La precarga acelera esto y mejora el LCP.

Cómo hacerlo

  1. 1Precargue la imagen LCP (la imagen principal de la mitad superior de la página).
  2. 2Precargue las fuentes clave y agregue font-display: swap.
  3. 3No se exceda: precargar todo diluye la prioridad y perjudica.

Ejemplo

Correcto
<link rel="preload" href="/fonts/jakarta.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/img/hero.webp" as="image">

Conclusión

La precarga es una herramienta específica para algunos recursos verdaderamente clave (la imagen LCP, la fuente principal). Usado con prudencia mejora el LCP; usado en todos los ámbitos, en cambio duele. Menos es más.

Temas relacionados