En este tutorial de Lazy Load para WordPress vamos a ver la técnica de optimización para las imágenes Lazy loading.
Esta técnica consiste en la carga progresiva de las imágenes de la web a medida que el usuario se desplaza por el navegador.
Es decir que las imágenes no se empezaran a cargar hasta que el usuario no haga scroll con el ratón hasta la zona donde están las imágenes.
Aquí puedes ver un ejemplo de Lazy Load.
De esta manera estamos ahorrando recursos del servidor y aumentando la velocidad de la web al no cargar las imágenes que no aparecen en el navegador del usuario.
Esta medida es muy conveniente en páginas web con muchas imágenes como por ejemplo el portfolio de un fotógrafo.
Lazy Load
Podemos implementar la carga lenta de las imágenes de WordPress con un plugin que se llama Lazy Load (¿Lógico no?).
Lazy Load es gratuito y es uno de los plugin más veteranos. Y aunque no ha sido actualizado en algun tiempo sus más de 90.000 instalaciones activas demuestran que sigue siendo un plugin muy fiable.
La carga progresiva de este plugin se hace mediante Lazy Load jQuery.sonar es muy suave y apenas se aprecia que las imágenes cargan progresivamente si tu conexión es buena, lo que es un plus para la experiencia de usuario ya que no se nota el efecto de la carga de las imágenes que a veces puede molestar a algunos usuarios.
BJ Lazy Load
Bj Lazy Load es otro plugin que realiza Lazy Load de las imágenes pero además también sirve para los videos de YouTube y Vimeo, También afecta a las cajas de Widgets.
La carga progresiva de este plugin es mediante JavaScript, los navegadores que no admitan JavaScrippt mostrara el contenido sin Lazy Load.
Este tipo de carga progresiva es mucho más agresiva y se nota bastante que los elementos se cargan al desplazarse por la web, lo que puede afectar a la experiencia de navegación.
Pero su punto fuerte es que acelera mucho más la carga principal de nuestra web y reduce el tamaño de la página y las peticiones a la base de datos.
Este plugin viene muy bien si en nuestra web tenemos una cantidad enorme de fotografías de gran tamaño y mucha calidad, como por ejemplo las de un fotógrafo profesional.
¿Sabes qué es lo mejor de estos dos plugins?
¡Que no necesitan configuración!
¡Lo instalas lo activas y ya está! A partir de ahora todas las imágenes de tu página web cargaran de manera progresiva cuando el usuario llegue a ellas en el navegador.
Lazy Load para videos
Si utilizamos muchos videos de YouTube o Vimeo en nuestra página web, podemos mejorar el tiempo de carga con un plugin específico para cargar los videos con la técnica Lazy load.
Lazy load for videos es un plugin gratuito que reemplaza el reproductor de video por una imagen de previsualización que al hacer clic en ella cargara el reproductor de video.
De esta manera se reduce mucho el tiempo de carga de una página web con videos ya que no se carga el js hasta que no se hace clic en la imagen de previsualización.
Además este plugin permite mostrar el título del vídeo en su imagen de vista previa, cambiar el color del reproductor de Youtube y eliminar los videos relacionados.
Hola Gerardo,
Muy buen post sobre una propuesta muy interesante de cara a que una pagina web cargue rápido. Yo uso esta opción dentro de un plugin de optimización y va muy bien, se nota el activar el lazy load.
Un saludo
Me encanta la idea de poder conseguir que mi página cargue con mayor rapidez. Gracias por la información, Lo probaremos! Saludos!
Pues tengo que mirar seriamente el Lazy Load este, porque a veces mis tiempos de carga son un poco locura. Y el de los videos también es muy interesante. Gracias por el artículo.
Un plugin muy muy interesante para poder optimizar tu sitio. Gran artículo Gerardo.
Gracias por post Gerardo, sabes un montón, jajaja, flipo contigo. Un saludo.
La verdad estuve buscando un plugin que me ayude con las mas de 3 mil imágenes de mi WP creo que este plugin bien utilizado puede ayudar mucho al seo de la web , muchas gracias por la info
Hola Mateo, si dices que tienes tantas imágenes y las tienes un poco descontroladas, otro plugin que te recomendaría es el WP Smush. Este plugin te comprime todas la imagenes. Eso hace que no solo reduzcas el peso y los recursos de tu servidor, si no que también te ayudará a que tus imágenes carguen más rápido.
Muy interesante Gerardo,
Gracias por el post. Solo una duda… el plugin Lazy Load y el Lazy load for videos son compatibles? Es el segundo una extensión del primero o son completamente independientes? en resumen… Recomendarías el uso de los dos plugins en una misma instalación de wordpress o crees sería redundante el uso de los dos?
Gracias de antemano y un saludo 😉
Son plugins diferentes y no se si son compatibles uno con otro, en principio no tendrían que tener problema los dos combinados, aunque t e recomiendo que hagas pruebas por si acaso… Si utilizas pocos videos en tu web, yo no instalaria el Lazy Load para videos por que no le vas a sacar realmente utilidad.
Un saludo!
Hola Gerardo! En mi caso el BJ Lazy Load no era compatible con mi plantilla en el tema videos, así que desmarqué la opción que afecta a los iframes e instalé el Lazy Load for videos, ya que tiene una opción que te carga todos los videos a un responsive 16:9. Así que respondiendo a la pregunta de arriba sí que son compatibles 🙂 un buen ejemplo es este artículo en el que utilizo un total de 50 videos https://www.wakeandlisten.com/mejores-discos-internacionales-2018/
Un Saludo!