¿Cómo implementar lazy loading en imágenes e iframes sin dañar el SEO?
La forma más segura de implementar lazy loading es usando el atributo HTML nativo `loading="lazy"`. Esto garantiza que los navegadores gestionen el retraso, mientras que los motores de búsqueda (como Googlebot) pueden seguir viendo las URL de origen de las imágenes e indexarlas correctamente. Evita el lazy loading complejo basado solo en JavaScript que oculta contenido a los rastreadores.
El lazy loading es una técnica de rendimiento que retrasa la carga de recursos no críticos (como imágenes e iframes) hasta que son necesarios, normalmente cuando el usuario hace scroll hacia ellos. Esto mejora drásticamente la velocidad de carga inicial y reduce el consumo de datos. Para el SEO, la preocupación es si los motores de búsqueda pueden encontrar e indexar ese contenido 'perezoso'. En el pasado, el lazy loading basado en JavaScript a menudo ocultaba las URL a los bots. Hoy en día, la mejor práctica es usar el 'lazy loading nativo' añadiendo el atributo `loading="lazy"` a las etiquetas `<img>` y `<iframe>`. Esto es compatible con todos los navegadores modernos y es totalmente amigable con el SEO, ya que Googlebot puede seguir viendo el atributo `src`. Si debes usar una librería de JavaScript para dar soporte a navegadores antiguos, asegúrate de que siga las directrices de Google usando la API Intersection Observer y proporcionando una alternativa con `<noscript>`. Es crucial no aplicar lazy loading a imágenes 'above the fold' (visibles inmediatamente), como el logo o la imagen principal (hero), ya que afectaría negativamente al LCP.
Guía paso a paso
Identificar contenido bajo el pliegue
Determina qué imágenes e iframes no son visibles cuando la página se carga por primera vez.
Añadir atributo de carga
Inserta `loading="lazy"` en las etiquetas HTML de todas las imágenes e iframes identificados fuera de la pantalla inicial.
Excluir medios principales
Asegúrate de que tu imagen hero principal y cualquier contenido en la parte superior de la página NO tengan lazy loading.
Añadir dimensiones
Incluye siempre atributos de ancho (width) y alto (height) para evitar saltos de diseño (layout shifts) mientras las imágenes se cargan.
Probar la indexación
Usa la herramienta de inspección de URL de GSC para verificar que Google aún puede 'ver' tus imágenes con lazy loading.
Pro Tips
- Combina el lazy loading con el atributo 'decoding="async"' para un rendimiento aún mejor.
- Usa marcadores de posición de imagen de baja calidad (LQIP) o bloques de color sólido para mejorar la experiencia del usuario durante la carga.
- Prueba el lazy loading específicamente en dispositivos móviles, donde el 'pliegue' es mucho más reducido.
- Verifica que el lazy loading no interfiera con tus hojas de estilo para impresión (Print).
Cómo ayuda pSeoMatic
El motor de auditoría de pSeoMatic comprueba la correcta implementación del lazy loading en todo tu sitio. Detectamos imágenes clave para el LCP que están siendo cargadas incorrectamente con lazy loading (ralentizando tus métricas de renderizado) e identificamos la falta de atributos en medios pesados bajo el pliegue, asegurando que tu sitio sea rápido y totalmente indexable.
Prueba pSeoMatic gratisPreguntas relacionadas
¿Puede Google indexar imágenes con lazy loading?
Sí, Googlebot puede indexar imágenes que usan el atributo nativo `loading="lazy"` o métodos de JS compatibles con SEO.
¿Ayuda el lazy loading a las puntuaciones de PageSpeed?
Significativamente. Reduce el peso inicial de la página y mejora el Time to Interactive (TTI).
¿Debo aplicar lazy loading a mi logo?
No, el logo suele estar por encima del pliegue y debe cargarse inmediatamente.
Guías relacionadas
¿Listo para poner esto en práctica?
pSeoMatic genera miles de páginas optimizadas para SEO a partir de tus datos.