• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Plugins / Optimizar la carga de imágenes con Lazy Load

Optimizar la carga de imágenes con Lazy Load

carga de imágenes con Lazy Load en WordPress

[ 4 julio 2018 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Básico] [ ]

imagen optimización

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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

Para trabajar con Lazy Load en la carga de imágenes en un sitio web se usa Javascript, en el caso anterior Javascript a través de la librería Jquery
Adicional a usar Lazy Load, recuerda siempre optimizar la carga de tus imágenes ya sea a través de los diferentes tamaños de miniaturas que ofrece WordPress y también cuidando el tamaño de la imagen a subir así como el formato de archivo a usar.

 

¿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:

Pantalla configuración plugin Lazy Load

La configuración por defecto es adecuada para la mayoría de los casos, por lo que no será necesario que la cambies.

 

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.

Uso del inspector de código para verifiar la carga de imágenes con Lazy Load

 
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

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
  • Sincronizar WooCommerce y Google SheetsSincronizar WooCommerce y Google Sheets
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 3,75 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. jorge

    24 enero, 2019

    Hola gracias por tu post instale el plugin pero al hacer el scroll las imagenes salen corrido ya elimine las coookies . que podras ser.

    • Jhon Marreros Guzmán

      25 enero, 2019

      Hola, tal vez conflicto con algún otro plugin, ve probando desactivando plugins hasta ver si alguno te causa el problema, aunque también podría ser alguna configuración en tu theme.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Cómo usar los campos Personalizados en WordPress

Crear un Child Theme en WordPress de manera correcta

Aprende a usar mu-plugins en WordPress

Botones para el campo de cantidad en WooCommerce

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados