Utilidades

Cómo activar y configurar Lazy Load en WordPress

27/07/2020

Si tu web tarda mucho en cargar tienes que saber que el mayor porcentaje del peso de una web corresponde a las imágenes y los vídeos. Además las tendencias de diseño han marcado un crecimiento en el uso de imágenes cada vez más grandes lo que hace que unos recursos gráficos sin optimizar convierta el hecho de visitar tu web en una experiencia negativa para el usuario. Por eso además de optimizar imágenes puedes activar y configurar Lazy Load en WordPress.

¿Qué es Lazy Load?

Lazy Load, es una tecnología que optimiza la carga de las imágenes haciéndolas visibles solamente según se muestran en pantalla. Es decir que nada más acceder a tu web se cargan las imágenes que aparecen en este primer pantallazo y el resto se mostrarán según se haga scroll en la web.

La gran ventaja de esta tecnología es que consigue que tu WordPress pese menos y cargue antes, una de las cosas que más le gusta a los usuario pero también a Google. Otra de las ventajas es que se reduce número de peticiones al servidor. Además se trata de una herramienta “SEO-friendly” ya que las imágenes no se esconden de cara a los motores Google.

¿Cómo activar Lazy Load en WordPress?

Si tu tema de es de pago revisa las características porque es posible que incluya la funcionalidad Lazy Load. De ser así solo tendrías que activarla y configurarla

Si no tu tema no tiene la funcionalidad Lazy Load en el repositorio de WordPress hay varios plugins que puedes instalar.

Activar Lazy Load con WP Smush

En el post sobre “Optimizar imágenes para web y mejorar el rendimiento de tu WordPress” hablamos sobre el plugin WP Smush para comprimir imágenes reduciendo su peso pero manteniendo una calidad de imagen alta. Pues bien, este plugin incluye una versión beta para activar Lazy Load.

Entre las opciones de configuración Smush permite elegir los tipos de archivos que queremos cargar de forma diferida entre JPEG, PNG, GIF, SVG o iframe.

También permite establecer Lazy Load en las imágenes dependiendo de la ubicación. Por defecto activará todas las ubicaciones, pero se pueden activar o desactivar las diferentes ubicaciones.

Otra de las opciones que nos ofrece WP Smush es personalizar las animaciones de la precarga de la imagen entre un desvanecimiento, un spinner, un marcador o ningún tipo de precarga.

También podemos desactivar la carga según el tipo de contenido por página, entradas, categorías, etiquetas, etc… También podemos añadir directamente URL, clases o IDs.

De forma predeterminada los scripts se cargan en el footer pero si encontramos algún conflicto se puede cambiar la ubicación de los scripts para que se carguen en la cabecera.

Activar Lazy Load con el plugin “Lazy Load by WP Rocket”

Lazy Load by WP Rocket es uno de los plugins más populares para activar la carga diferida de imágenes, actualmente cuenta con más de 100,000 instalaciones activas y una valoración de 4 sobre 5 por los usuarios. La gran ventaja de este plugin, además de mejorar considerablemente la velocidad de carga, es lo sencillo que resulta usarlo.

Puedes descargar el plugin Lazy Load by WordPress desde el repositorio de WordPress en la sección de Plugins > Añadir nuevo. Buscamos el plugin mediante el buscador, instalamos y lo activamos.

Una vez activado ve a Ajustes > Lazy Load. Haz clic sobre el tipo de elemento en el que quieras aplicar la carga diferida y guarda los cambios. Sencillo, ¿verdad? No hay opciones que tengas que configurar, simplemente instala el plugin y listo.

Resumen y Recomendaciones

Una vez instalado comprueba que Lazy Load funciona correctamente, es posible que dependiendo del tema esta funcionalidad no funcione. La mayoría de los conflictos surgen cuando se cargan imágenes mediante JavaScript o CSS.

No hay duda de que el uso de Lazy Load te ayuda a mejorar la velocidad de tu WordPress, pero no es la única técnica que te puede ayudar a mejorar la carga de tu web. Además de implementar Lazy Load te recomendamos que hagas una optimización de las imágenes previa a subirlas a la biblioteca de medios. Si quieres saber más sobre cómo optimizar las imágenes te recomendamos que leas este artículo que publicamos hace un tiempo.

¿Nos ayudas a mejorar la calidad del blog?
Déjanos una valoración sobre este post para poder seguir mejorando
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 3,50 de 5)
Cargando...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


* Campo obligatorio.