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

  • Autor Autor Carlos Arreola
  • Fecha de inicio Fecha de inicio
Carlos Arreola

Carlos Arreola

Admin
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
¡Excelente comerciante!
¡Usuario popular!
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
 
Última edición:
Gracias por el dato, lo voy a probar en mi sitio 😀
 
gracias carlos. una pregunta parecera pregunta de novato:

esto ayuda a reducir consumo de cpu y memoria? o solo ancho de banda
 
Muchas gracias por la recomendación, es muy útil. Lo acabo de instalar en mi sitio de + visita para que mejore el rendimiento que andaba medio mal últimamente.
 
Es más que nada ancho de banda aunque obviamente si hay menos peticiones también ayuda a reducir la carga al servidor 🙂
 
La verdad es que a mí el efecto me desespera, y prefiero no usarlo... porque pienso que otros usuarios opinarán lo mismo... sería genial si se cargaran las imágenes por debajo de la zona fuera de la vista del navegante, pero de otra manera realmente no me gusta, creo que es mejor usar otros plugins o programas para optimizar las imágenes
 

A mi el efecto no me parece desesperante y pues está relacionado a la carga de imágenes no directamente a la optimización de estas, de hecho para eso ya utilizo el plugin de yahoo:

http://forobeta.com/tutoriales-de-w...ar-imagenes-wordpress-plugin-wp-smush-it.html
 
Gracias por el aporte, el WP Smush.it lo he usado por defecto en muchos sitios, voy a probar con este a ver que tanto se reduce el consumo de ancho de banda, el efecto no me parece muy molesto, al menos en blogs dónde es más común tener en lo que abarca la pantalla, una imagen, el post y unas cuántas imágenes en el sidebar mientras vas haciendo el scroll para abajo, de hecho el efecto me parece agradable, que cargue al mover el scroll da la sensación de un sitio "más inteligente" o que responde a lo que hace el usuario 😛
 
Pues en cuanto al tiempo de carga del sitio, el plugin es toda una maravilla.
Sin embargo, hay cosas que todavía no me terminan de gustar. Y una de ellas, es que el plugin no carga las imágenes del sidebar, hasta que el usuario termina de recorrer todo el blog (osea hasta que llega al footer).

Pero bueno, de todos modos gran aporte Carlos. Estoy seguro que a muchos les sera útil :welcoming:
 
Muchas gracias por el aporte!

una pregunta; ¿En mis sitios solo tengo una imagen en cada post, aun así es recomendable utilizar este plugin, o solo es recomendable para sitios con mas imágenes?

gracias!
 
Interesante el aporte, gracias!
 
esejoker468 dijo:
Muchas gracias por el aporte!

una pregunta; ¿En mis sitios solo tengo una imagen en cada post, aun así es recomendable utilizar este plugin, o solo es recomendable para sitios con mas imágenes?

gracias!
Hacer clic para expandir...

esejoker pues lo puedes utilizar en cualquier tipo de sitios web o blog.
Sin embargo, cuando tienes un blog o sitio web con muchas imágenes. Entonces ahí notas mas claramente la mejor de velocidad; en respuesta y tiempo de carga.
 
Acabo de ptobarlo y me va genial :welcoming:
 
Excelente, la carga es mucho mas rapida que antes... 😱nthego:
 
Se agradece... usando los 2 en algunos sitios, a ver que tal sale
 
No había visto este post, ni mucho menos conocía el plugin.

Pero me convence ya que siempre uso muchas imágenes en los artículos que publico, +1!
 
La verdad no me ha gustado mucho, y se notan algunos pequeños fallos que no se si a otros les ocurra.

Cuando estoy realizando scroll y llego a practicamente los ultimos articulos, estos no cargan las imagenes al llegar a ellas, sino que una vez pasado el sector de la imagen se cargan. Por lo tanto es demasiada tardía la carga de mis imagenes.
 

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
 
Gracias por el aporte Carlos, lo implemente pero no me convecio, tal vez sea por el tipo de blog.
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

R
Mejora la carga de imágenes con Lazy Load for Images
Respuestas
1
Visitas
212
Carlos Arreola
C
R
Picafto Plugin: Lazy Load Images with One Click
Respuestas
1
Visitas
182
Carlos Arreola
C
J
Mejor plugin para aplazar carga de imágenes y vídeos
Respuestas
5
Visitas
285
feni
F
R
Retrasa cargas de imágenes en WordPress - Lazy Load Optimizer
Respuestas
1
Visitas
225
Luis Manolito
L
R
Optimiza la carga de imágenes webP en WordPress
Respuestas
6
Visitas
780
ramonjosegn
R