Cómo mejorar el WPO de tu web con Lazy Load

Desde punto de vista de SEO, siempre nos preocupamos por la velocidad de carga de nuestra web y es que, a parte de ser un factor importante para Google, podemos perder las visitas de nuestros usuarios si nuestra web tarda una eternidad en cargar su contenido, y con eternidad me refiero a varios segundos.

 

Para mejorar la velocidad de carga de nuestra web existen una serie de buenas prácticas SEO, quizá uno de los mayores problemas es el peso de las imágenes o vídeos y, para ello, una de estas técnicas es el llamado Lazy Load o carga diferida.

Lazy Load

Lazy load o carga diferida es una técnica que consiste en la carga progresiva de cierto tipo de contenido, como imágenes o vídeos.

 

A medida que el usuario hace scroll por el navegador, se irán cargando los objetos que no están en el área visible de la web cuando se inicia la página.

 

Con esta técnica evitamos la carga de objetos que pueden llegar a no utilizarse, con lo que reducimos el tiempo de carga de nuestra web y ahorramos los recursos de nuestro servidor.

 

jQuery Lazy Load Plugin

 

jQuery Lazy Load es el plugin que nos permite implementar la carga diferida en nuestra web que podemos descargar aquí.

 

Para implementar el plugin debemos hacer la carga inicial y definir qué clase contiene el grupo de imágenes que se van a cargar de forma diferida.

 

JS

$(function() {

$(‘.lazy’).lazy();

});

 

HTML

<img class=»lazy» data-src=»images1.jpg» />

<img class=»lazy» data-src=»images2.jpg» />

<img class=»lazy» data-src=»images3.jpg» />

 

Haciendo scroll podemos ver como se van cargando las imágenes de forma diferida.

 

Lazy load ejemplo

 

Puedes ver cómo funciona Lazy Load en esta demostración.

 

Lazy Load y WordPress

 

Si nuestra web esta en WordPress, y no queremos entrar en el barro tocando código, tenemos una serie de plugins que implementarán Lazy Load en nuestra web.

 

Uno de los plugin populares es BJ Lazy Load, que además de cargar las imágenes de forma diferida nos sirve para vídeos de YouTube. Una de las ventajas de este plugin es que no necesita configuración, simplemente al activarlo, nuestras imágenes cargarán de manera diferida.

 

BJ Lazy Load

 

Experimentando con Lazy Load

He instalado este plugin en mi web de consejos de jardinería para comprobar como funciona la carga de las imágenes de forma diferida.

 

En el inspector de Chrome, se puede observar que al inicializarse la web, se han cargado 45 peticiones, entre ellas, fuentes, imágenes, texto html, etc.

 

sin carga BJ Lazy Load

 

Según vamos haciendo scroll para ver el contenido que aún no está visible, comprobamos como dos de las imágenes que hay en el cuerpo de la página se van cargando de forma diferida. Se puede apreciar que las imágenes se cargan con un efecto parecido al fadeIn() de JS.

 

En el inspector de Chrome comprobamos que se han cargado dos peticiones más, justo las imágenes que no aparecían en el cuerpo de la página hasta que hemos hecho scroll.

 

 

con carga BJ Lazy Load

 

Resumen

Con Lazy Load vamos a optimizar la carga de las imágenes o vídeos de forma diferida, mejorando así la respuesta del servidor y reduciendo el tiempo de carga de nuestra web.

 



Resumen de privacidad

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada en base a un perfil elaborado a partir de tus hábitos de navegación (por ejemplo, páginas visitadas).

Cookies estrictamente necesarias

Son aquellas que permiten al usuario la navegación a través de la página web, y la utilización de las diferentes opciones o servicios que en ella existen como, por ejemplo, controlar el tráfico y la comunicación de datos, identificar la sesión, acceder a partes de acceso restringido, utilizar elementos de seguridad durante la navegación, almacenar contenidos para la difusión de vídeos o sonido o compartir contenidos a través de redes sociales.
Son cookies técnicas, de sesión, para garantizar que los usuarios sean humanos y no aplicaciones automatizadas. De esta forma se combate el spam.

Analíticas

Cookies que permiten mejorar la funcionalidad de la web realizando un seguimiento del uso del mismo. Pueden mejorar la velocidad con la que podemos procesar tus solicitudes, ya que nos permiten recordar las preferencias del sitio web. Si no se activan el rendimiento podría ralentizarse.