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.

 

Pin It on Pinterest

Shares