Tutorial: Mejorar carga de imágenes en Wordpress con Lazy Load

ramonjosegn dijo:

Es evidente que entre la posición del scroll y el cálculo de si se carga o no la imagen siempre habrá una demora, para mí el sistema no es muy inteligente, lo ideal sería que cargara las imágenes x píxeles por debajo del scroll, o al menos que las precargara para evitar esa demora, pero eso implicaría la pérdida del efecto de ligereza que se supone que aplica el plugin... en fin, como en todos estos sistemas de cacheo, aceleración y demás, lo que ganas por un lado lo pierdes por el otro, a mí realmente no me gusta y no tengo intención de usarlo

Hacer clic para expandir...

Carlos Arreola dijo:

El plugin lazy load en wordpress, se encarga de mostrar solo las imágenes que aparecen en la pantalla del ordenador e ir dejando las que no para cuando el usuario navegue por todo el sitio. De esta forma evitaremos que usuarios que rebotan en el sitio consuman ancho de banda y hagan peticiones innecesarias a nuestro servidor, mejorando la carga de este.

Les mostraré un estudio de caso con uno de mis sitios que tiene imágenes un poco más grandes de lo normal: automoderno.com.

Las pruebas son realizadas en pingdom tools, todas desde el servidor de Nueva York (esto lo pueden cambiar en settings para tener una mejor precisión). Hice 8 peticiones pues los resultados no son exactos por lo que más vale probar en varias ocasiones. Las primeras 4 son sin el plugin y las últimas 4 con este ya instalado.

Carga de página, tamaño de la página y peticiones:

Enlace eliminado

La carga de la página y las peticiones no ha variado significativamente, pero en el tamaño de la página es donde podemos notar como desde unos 900kbs-1mb ha bajado hasta los 480kbs, un ahorro de hasta el 50% de ancho de banda.

Aquí dos imagenes del antes y después del tamaño de la página:

Sin plugin:

Enlace eliminado

Con Lazy Load:

Enlace eliminado

Y por último el historial de las 8 pruebas:

Enlace eliminado
Page speed ha descendido por que ahora carga el js del plugin que no es pesado como podemos observar un poco más arriba.

Instalación de lazy load para wordpress
​

Se puede instalar desde el buscador básico de plugins en el panel de wordpress o descargar y subir los archivos a la carpeta de plugins desde aquí.

Desde el buscador ponemos "lazy load" y nos debe aparecer el siguiente:

Enlace eliminado

Una vez instalado solo se activa y queda listo, además de que queda un lindo efecto en nuestros sitios.

Si les gustó este post tal vez les interese este otro en donde se muestra como optimizar las imágenes de wordpress automaticamente:
http://forobeta.com/tutoriales-de-w...ar-imagenes-wordpress-plugin-wp-smush-it.html

Hacer clic para expandir...

Tony dijo:

A alguien más le da problemas el plugin? últimamente tiene la costumbre de no cargar las imágenes. Alguien más tiene ese problema?


Saludos!

Hacer clic para expandir...

Carlos Arreola dijo:

Sin razón alguna en unos 2 o 3 sitios me ocurre eso, donde pasa simplemente lo desactivo. En los demás no tengo problemas.

Hacer clic para expandir...