lazy loading wordpress

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.

lazy load plugin wordpress

 

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.

bj lazy loading plugin wordpress

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.

lazy load para videos

 

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.

 

10 comentarios en “Los mejores plugin de Lazy Load en WordPress

  1. 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

  2. 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.

  3. 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

    1. 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.

  4. 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 ūüėČ

    1. 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!

  5. 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!

Deja un comentario

El email no ser√° publicado. Vas a introducir datos en la web si comentas:

  • Responsable de los datos Gerardo Garc√≠a Asensio
  • Los datos se usar√°n para gesti√≥n de comentarios y medidas de seguridad
  • Legitimaci√≥n: tu consentimiento.
  • Destinatarios: los datos estar√°n ubicados en los servidores de Siteground.
  • Derechos: podr√°s ejercer tus derechos, entre otros, rectificar, limitar y borrar tus datos.

Pin It on Pinterest

Esta web utiliza cookies para su funcionamiento. Lee y acepta el aviso legal o abandona la web. m√°s info

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar