Carga diferida de imágenes: cuándo ayuda y cuándo perjudica
La carga diferida significa que el navegador espera para descargar una imagen hasta que el visitante está a punto de verla. Bien usada, ahorra datos y hace que las páginas parezcan más rápidas. Usada en todas partes, puede hacer que tu imagen más importante aparezca más tarde de lo debido. Esta guía explica dónde ayuda y dónde perjudica.
Qué es la carga diferida y cómo funciona
Normalmente, un navegador empieza a descargar casi de inmediato todas las imágenes de una página, incluso las que están muy por debajo de la pantalla y a las que el visitante quizá nunca llegue. La carga diferida cambia esto: las imágenes alejadas de la zona visible solo se descargan cuando el visitante se acerca a ellas al desplazarse.
Los navegadores modernos lo admiten de forma nativa. Añade loading="lazy" a un elemento img, por ejemplo <img src="photo.jpg" loading="lazy" width="800" height="600" alt="...">, y el navegador se encarga del resto. WordPress añade este atributo a las imágenes por defecto.
Beneficios y riesgos
Beneficios
- Las páginas cargan antes su contenido importante, porque al principio compiten menos archivos por el ancho de banda.
- Los visitantes que no se desplazan no descargan imágenes que nunca ven, lo que ahorra datos.
- Los artículos largos, las galerías y las listas de productos se vuelven notablemente más ligeros.
Riesgos
- Aplicar carga diferida a la primera imagen grande la retrasa y puede empeorar el Largest Contentful Paint.
- Sin dimensiones, las imágenes aparecen de golpe y empujan el contenido, lo que aumenta el cambio de diseño.
- Si las imágenes cargan demasiado tarde, los visitantes ven huecos en blanco al desplazarse con rapidez.
- Algunas bibliotecas de carga diferida en JavaScript ocultan a los buscadores la dirección real de la imagen.
El objetivo es diferir solo lo que el visitante no va a ver de inmediato.
Dónde usarla y dónde no
| Imagen | ¿Carga diferida? | Por qué |
|---|---|---|
| Imagen de cabecera o banner en la parte superior | No | Suele ser el elemento LCP y debe cargar primero |
| Primera imagen de una diapositiva visible de un carrusel | No | El visitante la ve de inmediato |
| Imágenes más abajo en el artículo | Sí | No se necesitan hasta que el visitante se desplaza |
| Cuadrícula de productos a partir de la primera fila | Sí | Ahorra ancho de banda en listas largas |
| Imágenes dentro de pestañas o acordeones ocultos | Sí | No son visibles hasta que se abren |
Como norma, las imágenes de la primera pantalla de la página cargan normalmente, y todo lo demás puede tener carga diferida.
Paso a paso: configúrala correctamente
- 1Haz una lista de las imágenes de la página y marca cuáles se ven sin desplazarse.
- 2Déjalas sin
loading="lazy". En la imagen principal, añade tambiénfetchpriority="high". - 3Añade
loading="lazy"al resto. - 4Añade
widthyheight(o una proporción CSS) a todas las imágenes. Redimensionar imagen muestra el tamaño exacto en píxeles de cada archivo. - 5Haz que cada archivo sea ligero. Comprime con Comprimir imagen para que las imágenes salgan baratas cuando se carguen.
- 6Revisa los plugins y los temas. Algunos plugins de optimización aplican carga diferida a todo. Asegúrate de excluir la primera imagen.
- 7Prueba en un móvil con una conexión limitada y desplázate. Las imágenes deben aparecer justo antes de llegar a ellas.
¿Carga diferida nativa o una biblioteca de JavaScript?
loading="lazy"nativo: la opción más sencilla y segura. Sin código adicional, compatible con los navegadores modernos, y los buscadores pueden encontrar las imágenes. Ofrece menos control sobre con qué antelación empiezan a cargarse las imágenes.- Una biblioteca de JavaScript: da control sobre los umbrales y los marcadores de posición, pero añade código que mantener y puede ocultar las direcciones de las imágenes a los rastreadores si la URL real no está en el HTML.
Para la mayoría de las webs, la carga diferida nativa es la opción correcta por defecto.
Errores frecuentes
- Aplicar carga diferida a la imagen de cabecera. Es el error más común y el más costoso. Consulta la guía sobre Core Web Vitals e imágenes.
- Omitir las dimensiones, lo que provoca saltos de diseño cuando aparecen las imágenes.
- Poner la dirección real de la imagen solo en un atributo data, que los buscadores pueden no seguir.
- Suponer que la carga diferida sustituye a la optimización. Un archivo pesado sigue siendo pesado cuando carga, así que además hay que redimensionar y comprimir.
Preguntas frecuentes
¿Perjudica la carga diferida al SEO?
La carga diferida nativa no perjudica al SEO, porque los buscadores pueden encontrar las imágenes. Los problemas surgen cuando la dirección real de la imagen se oculta en JavaScript, o cuando se aplica a la imagen principal y ralentiza la página.
¿Debo aplicar carga diferida a todas las imágenes?
No. Las imágenes visibles en la primera pantalla, sobre todo la principal, deben cargar con normalidad. Aplica la carga diferida al resto.
¿Qué hace loading="lazy"?
Indica al navegador que retrase la descarga de una imagen hasta que el visitante se acerque a ella al desplazarse. Funciona de forma nativa en los navegadores modernos, sin JavaScript.
¿Por qué mis imágenes con carga diferida hacen que la página salte?
El navegador no conoce el tamaño de la imagen hasta que carga, así que no puede reservar espacio. Añade atributos width y height, o una proporción CSS, a todas las imágenes.
¿WordPress aplica carga diferida a las imágenes por defecto?
Las versiones recientes añaden loading="lazy" a las imágenes automáticamente e intentan evitarlo en la primera. Revisa el HTML de tu página, porque los temas y los plugins pueden cambiarlo.