Carga Diferida de Imágenes en WordPress con a3 Lazy Load

Categorias: Wordpress

Carga Diferida de Imágenes en WordPress con a3 Lazy Load

WordPress es un gestor de contenidos al que le encantan las imágenes y así lo demuestra con su gestor de medios y la cantidad de opciones que ofrece para añadir imágenes.

Las imágenes en una web son muy importantes, mejoran el aspecto visual y facilitan la usabilidad de cualquier proyecto web.

Hace años, los que ya hacíamos páginas web, nos teníamos que pelear con HTML y la velocidad de la red hacía prácticamente inviable añadir muchas imágenes.

Hoy todo esto ha cambiado, las redes son mucho más rápidas y eso facilita añadir imágenes por doquier , ¡incluso vídeos!.

Aun así, hay factores que comprometen el sitio web si se abusa de las imágenes o del tamaño de las mismas.

Por ejemplo el SEO, a Google y demás buscadores les gusta que los sitios web carguen lo antes posible y si se usan muchas imágenes o no se optimizan puede bajar nuestra clasificación en los resultados de las búsquedas.

IMPORTANTE: Si tu WordPress no carga rápido, Google no te querrá y perderás usuarios / clientes.

Otro handicap muy importante son los dispositivos móviles, ya que las redes móviles no son tan rápidas como las que podemos disfrutar en el hogar o la oficina.

Cada vez más los usuarios usan su teléfono para navegar por Internet y si nuestro WordPress no está optimizado para que se muestre bien y rápido, dejarán de navegar por nuestra web y se irán a otro sitio.

Además, Google también mira con buenos ojos que tratemos a los visitantes de dispositivos móviles lo mejor posible y que adaptemos nuestro WordPress a las velocidades de los datos móviles.

Así que tenemos que llegar a un equilibrio entre las imágenes a mostrar y la velocidad de la web. Cuantas más imágenes añadamos, más tardará el sitio en cargar, pero por otro lado, ¿quién quiere entrar en una web que solo tiene texto?

Por suerte, existen personas que se encargan de solucionarlos la vida en este aspecto y que se inventaron el Lazy Load o Carga Diferida se podría traducir al español.
 

Qué es el Lazy Load o la Carga Diferida

Si pensamos en un artículo o página con mucho contenido que hayamos publicado en nuestro WordPress, nos daremos cuenta que hemos tenido que añadir varias imágenes o vídeos que acompañen a tanto texto.

Una página donde tengamos que hacer varios scrolls para llegar al final puede plantearnos el dilema del que hemos hablado.

Si añadimos mucho contenido adicional, podemos acabar con una página lenta que no le guste a los usuarios y a Google, pero por otro lado, si no los añadimos la página quedará poco atractiva y sosa.

Cuando entramos en una página web con mucho contenido, es normal que tengamos que esperar un poco a que todo ese contenido se cargue .

Después nos podemos desplazar a lo largo de la página para ver todo el contenido que ya ha sido cargado.

Con Lazy Load o Carga Diferida los contenidos no se cargan mientras no se muestren en la pantalla.

Con la carga diferida se consigue evitar esto, ya que solo carga el contenido que se muestre en la pantalla.

De esta forma, no tenemos que esperar a que se carguen todas las imágenes o vídeos para poder empezar a visualizar el contenido, rebajando considerablemente los tiempos de carga.

El contenido se irá cargando según la pantalla lo solicite, así de sencillo y efectivo.

Esto funciona muy bien en sitios con mucho contenido, imágenes en alta resolución, vídeos, etc… Si tenemos una página con un par de imágenes, apenas notaremos diferencia.

Ahora viene la pregunta del millón, ¿como implementamos la carga diferida en nuestro WordPress?.
 

Plugin a3 Lazy Load para WordPress

Como os habréis imaginado, para usar la carga diferida en WordPress haremos uso de un plugin.

El plugin a3 Lazy Load es perfecto para este cometido, es gratuito, sencillo de usar y compatible con WordPress 5.xx.

Lo podéis descargar desde aquí o simplemente buscarlo desde la sección de plugins de vuestro WordPress.

Una vez lo hayamos activado, encontraremos las opciones de configuración en el menú lateral, dentro de Ajustes > a3 Lazy Load.

menu a3 lazy load WordPress

A3 Lazy Load está en inglés, pero su configuración es muy sencilla, de hecho, no henos modificado nada de la configuración que viene por defecto en las pruebas que hemos realizado y los resultados han sido buenos.

Si entramos a los ajustes del plugin, lo primero que encontraremos será la opción de Plugin Framework Global Settings.

a3 lazy load framework

La opción Open Box Display tan solo indica si queremos que todos los menús de configuración del plugin se muestren abiertos al entrar en la configuración del plugin.

La opción House Keeping hace que tras la desinstalar el plugin, no quedará rastro suyo en el código de WordPress.

En la siguiente caja de opciones encontraremos el deslizador para activar y desactivar el plugin cuando queramos. No es necesario desactivar el plugin si no queremos.

activar desactivar a3 lazy load WordPress

Las dos cajas siguientes se encargan de gestionar las imágenes y los vídeos.

En ambos casos podemos elegir si queremos activar el plugin en todos los supuestos o preferimos excluir algunos, como las imágenes dentro del contenido o los thumbnails.

Por lo general, la configuración por defecto será marcar todas las opciones, pero en algunos casos nos puede venir bien poder desmarcar algunas opciones. ¡A gusto del consumidor!

a3 lazy load imagenes videos WordPress

Una de las opciones que más nos ha gustado del plugin a3 Lazy Load, es poder excluir URL’s o páginas de la carga diferida.

Su uso es muy sencillo, solo tenemos que añadir la URL que queramos excluir o marcar las casillas que nos convenga, por ejemplo la Home Page.

a3 lazy load excluir WordPress

Como en ocasiones ya habrán usuarios que hayan instalado algún plugin para gestionar el tráfico móvil y no necesitemos cargar las imágenes de forma diferida.

El plugin a3 Lazy Load nos ofrece la opción de desactivarse para las páginas creadas con WpTouch o MobilePress.

a3 lazyload plugin moviles WordPress

El resto de las opciones podéis dejarlas como están ya que no es necesario configurar nada más para que a3 Lazy Load funcione correctamente.


Cosas a Tener en Cuenta

Como hemos dicho antes, el plugin a3 Lazy Load es perfecto para solucionar los problemas de velocidad de carga en algunos casos.

Si no usamos imágenes en gran formato o ponemos pocas imágenes en nuestras páginas y artículos, quizás solo con optimizar las imágenes sea suficiente y nos podemos ahorrar un plugin.

Si usamos muchas imágenes y notamos que los tiempos de carga de la web se ralentizan, a3 Lazy Load puede ser la solución a tus problemas, además de una forma muy sencilla.


Hosting para WordPress Ultra Rápido

Si necesitas un hosting WordPress que sea ultra rápido, para que tu WordPress no se atasque, ¡en Hostinet podemos ayudarte!

Todos los planes de hosting WordPress que ofrecemos, montan discos SSD, que son mucho más rápidos y eficientes que los discos tradicionales, por lo que no tendrás ningún problema a la hora de mostrar todo el contenido que quieras y ¡¡a la velocidad del rayo!!

Además, tendrás muchas más ventajas, como el soporte técnico especializado en WordPress o los certificados SSL gratis entre otras muchas cosas.

En la siguiente tabla puedes ver las especificaciones de los planes de alojamiento web para WordPress más populares en Hostinet:

Hosting WordPress