Lazy loading (carga diferida) y su importancia en el SEO
Cuando se trata del uso de plataformas en línea como sitios web, la rapidez de carga y optimización de los portales se hace esencial, con los usuarios demandando cada vez más velocidad y respuesta.
Por esa razón, el patrón de diseño para páginas conocido como lazy loading está tomando cada vez más y más importancia. Pero, ¿qué es lazy loading (carga diferida)?
Eso es lo que estaremos abordando a continuación.
¿Qué es Lazy Loading?
De manera concreta, el lazy loading es una técnica, un patrón de diseño de programación que se aplica para sitios web, en los cuales los elementos y recursos no se cargan de manera completa, sino que se ejecutan sobre la marcha u on-demand de acuerdo a la utilización del usuario, se produce una “carga diferida” de los contenidos.
De esta manera, se optimizan los recursos y carga de contenido como texto, vídeos, imágenes y otro material solo cuando son requeridos, mejorando la velocidad, uso de memoria y procesamiento, respuesta y tiempos de carga. Esto cae en en contrapartida de la carga total, donde un sitio o página se carga completamente, aunque el usuario no utilice cada uno de los elementos.
Ventajas generales del lazy loading
Siendo el propósito principal del lazy loading la optimización de la carga de elementos sólo cuando se utilizan, son múltiples las ventajas que tiene y que pueden resumirse como:
- Rapidez en mostrar elementos principales de un sitio web.
- Relevante mejora en la experiencia de usuario en el sitio UX.
- Mejora en el rendimiento en dispositivos móviles sobre todo cuando se encuentran con pocos recursos de conexión de red, el tener activo Lazy Loading, permitirá navegar en páginas que en dichas condiciones de poca cobertura sería inviable.
- Optimización general y total de recursos como CPU, RAM y batería en dispositivos móviles.
- El aumento del tiempo de permanencia en nuestras páginas, al no tener problemas de carga se traduce indirectamente en mejora en el ranking.
- Disminución de bounce rate o tasa de rebote.
Del mismo modo, el enfoque de programación lazy loading tiene ventajas y novedades desde un punto de vista más técnico, tales como:
- Lazy loading es completamente compatible con marcos de trabajo o frameworks en JS como React y Angular y también plataformas de CMS como WordPress, de hecho recientemente han informado que vendrá incluida la carga lazy loading en imágenes por defecto en la versión de wordpress 5.5.
- Gracias a la API IntersectionObserver no esconde las imágenes a los motores de búsqueda.
- Soporte para múltiples tipos de contenido como imágenes y recursos de clase responsive.
- Permite que imágenes de los sitios sean indexadas, siendo vital en lo que respecta a SEO.
- Es un recurso 100% SEO Friendly, ya que mejora directa e indirectamente muchos puntos clave en SEO.
¿Cómo implementar lazy loading en Wordpress?
Si tenemos nuestra web en Wordpress, debemos saber que contamos con una gran ventaja ya que existen multitud de soluciones para implementar lazy loading en nuestras páginas para que carguen mucho más rápido. Esta captura que se verá a continuación muestra algunas de las posibles soluciones que tenemos en el repositorio de plugins:
Vista de los plugins más destacados de Wordpress para implementar lazy loading.
Para llevar a cabo esta implementación, tenemos varias soluciones:
- Escoger un plugin específico de lazy loading "Lazy loader", "a3 lazy load"...
- Escoger un plugin de optimización web como "WP Rocket", el cual tiene esta opción ya incluida por defecto junto con otras mejoras.
Aspectos SEO en relación al Lazy Loading
Ya sabemos la misión principal que tiene la carga diferida y sus principales ventajas, y como afecta a la mejora de nuestro page performance, nuestra UX y el SEO
Ahora, se debe hacer un uso inteligente de la carga diferida para sacarle el mayor provecho, ya que si se usa de mala manera podría causar el efecto contrario.
Por ejemplo, el lazy loading hace uso de la caché para mejorar la rapidez, por lo que si se aloja mucho contenido allí puede haber ralentización o producir errores si no se implementa correctamente, incluso no dejando que Google indexe páginas y elementos y tener un efecto grave en la clasificación del sitio. Algunos consejos son:
- Optimizar la cache y hacer uso inteligente de ella.
- Usar Google Search Console para verificar el contenido que rastrea Google del sitio.
- Agregar el texto de tipo ALT para hacer a cada imagen indexable por Google.
- Siempre hacer uso de la API IntersectionObserver.
- Añadir la etiqueta loading a contenido de tipo iframe o incrustado en la plataforma de otras páginas o fuentes, gracias a la función Blink LazyLoad del navegador Chrome. Aplica para imágenes, fotos, vídeos, texto y demás contenido.
Lazy loading y UX
Si se trata de un sitio web, la optimización tanto técnica como general para ofrecer una buena experiencia de usuario o UX es primordial, respecto a los tiempos de carga, respuesta, uso de recursos y comportamiento general. Si un sitio es poco responsivo, su tasa de rebote será alta y si ofrece una mala experiencia de usuario, eso afectara su tráfico, visibilidad e incluso SEO.
Con la carga diferida, se busca mejorar con un solo paso y de manera drástica la UX de un sitio, al cargar su contenido de manera progresiva y cuando el usuario requiere al desplazar la página, ya sean imágenes o texto y que optimiza el uso de los recursos en comparación a si se cargará la plataforma completa, probablemente mostrando elementos no importantes para el internauta.
Lazy loading nativo (HTML) en Chrome
Demostrando la importancia que le da Google a la UX, desde el año 2020 y desde la versión 75 de su navegador Chrome, se permite agregar lazy loading nativo a las etiquetas de las páginas HTML y su contenido multimedia como fotos, vídeos, entre otros.
De esta manera, agregando el atributo HTML lazy loading de manera automática el navegador Chrome entiende que el contenido de la página se cargará de acuerdo a la navegación del usuario y no todo completo, mejorando rapidez y respuesta. Para usarlo, se agrega el atributo loading al valor lazy en cada etiqueta de los recursos visuales y multimedia, así como iframes:
<img src="imagen.jpg" loading="lazy" alt="..." />
<iframe src="video-reproductor.html" loading="lazy"></iframe> Este recurso lo podemos usar tanto en imágenes que suponen gran parte de la información que el navegador precisa descargar como en los iframes, recordemos que estos los utilizamos para embeber recursos externos a nuestra web.
Es importante destacar el uso en iframes, ya que estos pueden suponer puntos críticos de carga en nuestro site.
Como contrapartida, el lazy loading nativo solo es compatible con Chrome, aunque puede implementarse su uso en otros navegadores mediante librerías compatibles, en caso de que no haya soporte como sucede en Mozilla Firefox.
Usos del Lazy loading
Como ya hemos comentado, el lazy loading se enfoca en demorar la carga de elementos en página para optimizar su respuesta, en este sentido, el uso de que se le da a la herramienta se enfoca en todos los recursos visuales, aunque se enfatiza en las imágenes, vídeos y iframes que pueden incluir documentos y otros archivos, todo mediante la modificación de las etiquetas e inclusión de atributo loading y valor lazy, optimizando la velocidad general del sitio inclusive si posee elementos pesados o contenido multimedia de gran tamaño.
¿Tienes dudas sobre lazy loading o quieres implementarlos en tu proyecto? ¡Estamos a tu disposición!
Documentación y Referencias:
Autor: David Kaufmann
Llevo más de 10 años completamente obsesionado con el SEO — y sinceramente, no lo cambiaría por nada.
Mi carrera dio un salto cuando trabajé como especialista SEO sénior en Chess.com — uno de los 100 sitios web más visitados de todo Internet. Operar a esa escala, con millones de páginas, decenas de idiomas y uno de los SERPs más competitivos, me enseñó cosas que ningún curso podría. Esa experiencia cambió mi perspectiva sobre lo que significa hacer SEO de verdad — y se convirtió en la base de todo lo que he construido desde entonces.
De esa experiencia nació SEO Alive — una agencia para marcas que se toman en serio el crecimiento orgánico. No vendemos dashboards ni informes mensuales. Construimos estrategias que realmente mueven la aguja, combinando lo mejor del SEO clásico con el nuevo mundo del Generative Engine Optimization (GEO) — asegurando que tu marca aparezca no solo en los enlaces azules de Google, sino también en las respuestas generadas por IA que ChatGPT, Perplexity y Google AI Overviews entregan a millones de personas cada día.
Y como no encontré una herramienta que gestionara ambos mundos correctamente, construí la mía propia — SEOcrawl, una plataforma de inteligencia SEO empresarial que une rankings, auditorías técnicas, monitorización de backlinks, salud del crawl y seguimiento de visibilidad de marca en IA, todo en un solo lugar. Es la plataforma que siempre deseé que existiera.
Descubre más contenido de este autor
