Las imágenes es uno de los recursos que causan un gran impacto en la carga de un sitio web, sin embargo puedes optimizar la carga de imágenes con Lazy Load, que te cargará las imágenes sólo si son necesarias.
Generalidades
El término Lazy Load quiere decir carga diferida, este patrón se usa para retrasar la carga de algún objeto hasta su uso real, en el caso de las imágenes, cuando cargas tu sitio es posible que algunas imágenes que se encuentran en la parte inferior no sea necesario cargarlas, y sólo se deberían cargarse cuando hagas scroll, esto es precisamente lo que consigues con Lazy Load.
Puedes ver algunos ejemplo de uso de Lazy Load con imágenes en: Lazy Load con Jquery
¿Cómo usar Lazy Load en WordPress?
En WordPress te sugiero revisar primero si tu theme ya incluye esta funcionalidad, es posible que tengas alguna opción en la configuración del theme, en caso no tener esta funcionalidad en tu theme podrías evaluar usar un plugin que sería el método más simple para implementar la carga de imágenes con Lazy Load en WordPress.
Para este ejemplo usaremos el plugin BJ Lazy Load
Tras instalar el plugin verás en el menú ajustes una opción adicional del plugin tal como se muestra en la siguiente imagen:
Revisando la carga de imágenes con el Inspector
El inspector de código que viene incluido en los navegadores nos permite revisar la carga de elementos de nuestro sitio web. Tal como vemos en la siguiente imagen al cargar el artículo sólo se cargan los elementos visibles, que es básicamente texto; es sólo cuando desplazas el scroll cuando se carga la imagen y se muestra posteriormente como parte del contenido.
En la imagen anterior :
- 1- Se hace Scroll, ya que hay contenido adicional en la parte inferior que no es visible.
- 2- Se carga la imagen, el contenido no visible incluyó imágenes que a través del plugin Lazy Load se evitó su carga, y que ahora a través del mismo plugin se cargarán.
- 3- Se muestra la imagen, la imagen cargada por el plugin Lazy Load es mostrada por el navegador.
Conclusión
Optimizar la carga de imágenes a través de Lazy Load ayuda a mejorar la respuesta del servidor mejorando el tiempo de carga de tu sitio, como consecuencia tendrás un punto adicional favorable para tu SEO.
¿Aún con dudas?, en el siguiente video se detalla los puntos tratados anteriormente
Artículos Relacionados
(1 votos, promedio: 5,00 de 5)
Cargando…