1 comment
8 min read
Jul 13, 2022

El Lazy Loading es un término muy popular que ha decidido acabar con la frustración que genera un sitio web que carga lento.

Esta técnica no ha hecho más que evolucionar para mejorar, por lo que ahora se puede usar sin necesidad de tener que recurrir al código, basta con algún complemento o plugin. 

¿Quieres saber qué es el Lazy Loading y para qué sirve? Pues has dado con el post correcto. No solo te responderemos esa pregunta importante, sino que te explicaremos cómo implementarlo en WordPress y la influencia que tiene en el posicionamiento web.

¿Qué es Lazy Loading?

¿Qué es lazy loading?

El Lazy Loading es una técnica en la que, mediante un script, se configuran ciertos elementos de una web para que carguen solo cuando sea necesario. Así, la página únicamente presenta aquello que el usuario puede ver en su pantalla, maximizando el tiempo de respuesta.

Lo ideal es que un sitio web se cargue entre dos y cinco segundos. Ahora más que nunca, las Core Web Vitals, dan buena cuenta de ello.

Por defecto, las páginas web usan la carga completa, es decir, todos sus elementos se envían al navegador del usuario para que estén disponibles. El problema es que no siempre son necesarios y eso ralentiza la carga y el usuario puede irse antes de que empiecen a aparecer los elementos que a él le importen. 

Mientras que con la carga diferida (en inglés Lazy Loading) el usuario ve llegar a su pantalla los elementos que componen esa porción de la web que está viendo, los demás quedan en espera hasta que el usuario haga scroll o maximice el tamaño de su ventana. Esto último puede ocurrir si este tiene un móvil y activa la versión para escritorio desde su navegador. 

¿Para qué sirve el Lazy Loading?

Usar el Lazy Load permite lograr varios objetivos importantes para todo proyecto web, entre ellos: 

1. Reduce la velocidad de carga inicial

Como no hay que cargar todos los elementos de una vez, los que sí se mostrarán se muestran más rápidamente. Esto permite al usuario obtener la información que busca lo antes posible.

2. Mejora la UX

Si el usuario tiene la información de manera inmediata, mejora su experiencia. Y esto no solo aplica al contenido de la ventana inicial, sino al resto también, pues algunos contenidos se pueden mostrar con ciertos desplazamientos para hacerlo más atractivo. 

3. Consume menos datos

Como hay pocos elementos ejecutándose, el ancho de banda se ahorra para otras cargas que sí los usará, es decir, para los usuarios que sí verán las imágenes o videos. Así, el uso de tus datos de ancho de banda del mes se optimiza. 

4. Se gasta menos recursos del sistema

Los elementos precargados consumen batería y otros recursos del sistema del dispositivo del usuario, pero con la carga diferida esto solo ocurre si la persona lo solicita. 

Beneficios del Lazy Loading o carga diferida

Cuando aplicas bien el Lazy Loading obtienes buena cantidad de beneficios. Te los mostramos para que queden claros:

1. Reducción de la tasa de rebote

Si el usuario ve que la página va rápido y el contenido le convence, se quedará y seguirá bajando para encontrar más de ese contenido tan rápido y útil. Así tu porcentaje de clics será alto y la tasa de rebote baja.

2. Aumento del tiempo de permanencia

Aunque el contenido no le llame la atención en un principio, si este se carga rápido, es probable que el usuario haga el intento de buscar en otras secciones de la página o del sitio. Por lo tanto, tus usuarios se quedarán más tiempo en tu web y mejorarás tu tiempo de permanencia

3. Ayuda a los usuarios con conexiones lentas

No todos los usuarios cuentan con internet de alto rendimiento, y el que tu web se cargue más rápido te permitirá conservar esos usuarios también. Además, dependiendo de la temática, esto puede llegar a influir en que te tomen como referencia.

4. Optimización de la velocidad de carga

Además de las otras estrategias de optimización de la velocidad de carga, como el uso de una CDN, compresión y conversión de las imágenes y videos a un formato ligero, usar lazy load te dará una ayuda extra para ese propósito. 

5. Repercute en el SEO

Todas estas ventajas que mejoran tu web en sentido técnico también impactan en el posicionamiento web de tus contenidos. Los motores de búsqueda ven que tu web prioriza la experiencia del usuario y te posicionarán más alto, y los usuarios ratificarán eso con sus clics. 

¿Cómo se implementa Lazy Loading en WordPress?

El Lazy Loading en WordPress se implementa a través de plugins o complementos especiales, sin embargo, ten presente que algunos otros ya lo incluyen en sus funcionalidades. 

Así que si tienes plugins de SEO o de optimización de imágenes o videos, puedes buscar ajustes como “lazy loading images” o “lazy load video”, dependiendo del tipo de plugin. Un ejemplo de esto es Lite Speed Cache, que ya incluye la carga diferida en sus funciones, por lo que no es necesario un plugin extra.

Pero si resulta que no lo tienes en ningún complemento, puedes instalar uno de los siguientes: 

a3 Lazy Load

a3 Lazy Load es uno de los plugins más populares del repositorio de WordPress. Su principal característica es la velocidad de carga de las imágenes. Las reduce tanto que una página web promedio de 1.7 MB, puede llegar a pesar menos de 150 Kb en su carga inicial. 

Smush

Smush se suele usar para la compresión y conversión de imágenes y videos, pero también cuenta con una función para carga diferida. Esta se activa en automático para todos los archivos, así que debes configurarla si quieres excluir alguno. 

Lazy Load by WP Rocket

En Lazy Load by WP Rocket vas a encontrar una función de carga diferida que te hace que se minimicen las peticiones de HTTP y que las imágenes se carguen solo cuando el usuario llegue al punto donde deben estar. 

BJ Lazy Load

Con BJ puedes optimizar la carga de las imágenes y videos, incluso los que vienen de plataformas externas como YouTube y Vimeo.

Lazy Loading y SEO: factores a tener en cuenta

Si bien es cierto que el Lazy Loading puede ayudarte a mejorar el SEO, hay varios factores que debes cuidar para que no se te vuelva en contra la estrategia por un mal uso o una instalación incorrecta. 

Esto es lo que debes vigilar:

  • Verifica que el contenido aun sea rastreable, ya que algunas veces el contenido almacenado en caché puede generar errores si hay muchos datos. Esto genera que Google no rastree todo el contenido y pierdas posicionamiento. 
  • Colocar el texto alternativo o ALT de las imágenes para garantizar que Google siempre la indexe y las califique para las búsquedas por imágenes. 
  • Usa la API Intersection Observer para asegurar que no haya problemas con la carga de elementos sin importar las variaciones en la ventana gráfica. 

Conclusión 

El Lazy Loading es una solución muy práctica para que tu web cargue bien y que los usuarios estén contentos con todos los contenidos que les ofreces. Para ello tienes una buena cantidad de plugins en el repositorio de WordPress que te hacen muy sencillo el poder usarlo.

Verifica siempre que los demás ajustes estén bien integrados para que no se generen errores y fallas al cargar. Desde la herramienta Google Search Console puede verificar si todo va bien. De ser así, estás camino a mejorar mucho tu SEO. 

¿Ya implementas el Lazy Loading en tu web?

Comparte tu experiencia con nuestra comunidad.

Suscribete a nuestro Blog

Suscríbete a nuestros boletines y resúmenes para recibir noticias, artículos de expertos y consejos de SEO en tu bandeja de entrada.

¡Gracias!
¡Te has suscrito con éxito a nuestro blog!
Revisa tu bandeja para confirmar la suscripción.
One comment
  1. WP Rocket es el plugin que mejores resultados me ha ofrecido en cuanto a carga diferida (entre otras funciones) respecta.

    Un gran artículo acerca de una funcionalidad que pocos usan y marca la diferencia.

    Un saludo.

Publicar
Escribe un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *