Cómo incorporar Lazy Load en WordPress

WordPress es uno de los gestores de contenidos más utilizados para el diseño y desarrollo de páginas web. La ventaja de tener tu web con WordPress es que puedes ir incluyendo plugin en función de las necesidades que tengas o de la optimización que precises para él.

Uno de los factores de posicionamiento web que más influyen son los tiempos de carga. Es por ello que debemos realizar de forma periódica auditorias que detecten dónde se están produciendo los fallos que ralentizan la web e impiden obtener buenas puntuaciones en herramientas tan conocidas como Page Speed o Lighthouse.

En esta ocasión, buscando las mejores técnicas de WPO (Web Performance Optimization), os traemos 3 plugin que en digitalDot usamos para incorporar la carga diferida en nuestras tienda online con Woocomerce, web corporativas, de servicios o blog. Con estos plugin se obtiene una mejora en la velocidad de la web ofreciendo así una mejor experiencia al usuario. Y, de todos los SEO es sabido que quien cuida al usuario, se gana la simpatía de Google. ¿Y, qué conseguimos con eso? Mejor posicionamiento web.
¡Vamos al lío!

¿Qué es Lazy Load o carga diferida?

En pocas palabras se trata de un proceso que consiste en cargar los vídeos o fotografías de una web, o material no indispensable, en un segundo plano. De este modo, la carga de dichos elementos no interfiere en la carga del contenido principal de la web.
El objetivo es ofrecer al usuario la sensación de carga rápida o, dicho de otro modo, que la primera visualización de la web sea lo más rápida posible y el usuario permanezca en la web para evitar un alto porcentaje de rebote.

Un ejemplo, imaginemos una tienda con cientos de productos por página, si estos los cargamos en el móvil con una conexión 4G o 5G, aunque ya contemos con http2 que nos optimiza bastante la velocidad de la web, tendremos un retraso en la visualización de la web si cargamos todas las fotos y vídeos en una sola secuencia.

Pero, en cambio, si sólo descargamos la parte visible y luego en segundo plano el resto de fotografías de los productos de forma diferida, nos permitirá mejorar la experiencia del usuario puesto que la sensación que tendrá es que carga más rápido.

Si queréis saber un poco más sobre Lazy Load os recomendamos este artículo en los fundamentos web de Google sobre Carga diferida de imágenes y vídeos por Jeremy Wagner.

¿Cómo puedo integrar Lazy Load o la carga diferida en WordPress?

Como hemos comentado al inicio, WordPress tiene la ventaja de poder incluir plugin que optimicen la web y de una forma muy sencilla. Y, para la carga diferida también existen plugin con los que poder implementarla.
Antes de nada, vamos a partir de un análisis realizado con la herramienta Page Speed de Google a una web sin Lazy Load. Recordad que conforme vayamos haciendo optimizaciones de WPO podremos ir testeando nuestra web para ver la valoración que Google nos da.
Evidentemente esto es solo un factor de velocidad para la home, lo correcto es analizar cada una de las url de nuestra tienda online o web. Para ello os recomendamos conectar la herramienta preferida para los consultores SEO, Screaming Frog con Page Speed.
El primer análisis que realizamos sobre la web nos dio como resultado de velocidad de carga 59 sobre 100:

Partiendo de esta puntuación pasamos a implementar alguno de los plugin que permiten la carga diferida.

Top 3 de plugin para Lazy load en WordPress

Lazy Load by WP Rocket

Es uno de los plugin más conocidos que permite mejorar el proceso de carga de imágenes y miniaturas, así como iframes. En el echamos de menos el tema de vídeos tanto de YouTube como Vimeo. Pero, si tenemos una web o tienda básica sin contenido de tipo multimedia puede ser una gran opción.

LazyLoad Plugin – Lazy Load Images, Videos, and Iframes

Este plugin de carga diferida cuenta con más de 10000 descargas y una valoración de 4 sobre 5, un sobresaliente para el WPO de nuestra página web.

BJ Lazy Load

Ahora nos toca hablaros de un plugin que nosotros recomendamos por su buena funcionalidad y compatibilidad con temas de terceros.
Como la mayoría es muy sencillo de implementar, pero, lo más importante, es su rendimiento con casi un 30% más de mejora en el análisis de Google Page Speed como veremos al final del artículo.
El plugin de BJ Lazy Load, permite la carga diferida de videos, imágenes, gravatar, miniaturas, y es capaz de detectar el scroll de la web para carga según la navegación del usuario.
Otra gran ventaja para el WPO de nuestra web es si tenemos videos o iframe donde podremos optimizar la carga asíncrona.

BJ Lazy Load

A3 Lazy Load

Por último, otro plugin que no ha pasado desapercibido es a3 Lazy Load, tanto por su sencillez de uso como por sus opciones.
En las pruebas obtenidas con este plugin, la velocidad de carga ha sido algo mayor que con el plugin de BJ Lazy Load, por lo que si nos encontramos con algún conflicto podría ser una gran alternativa para hacer WPO en nuestro WordPress

a3 Lazy Load

Este plugin de carga diferida también cuenta con optimización de carga de fotografías, videos, iframe y los nuevos formatos de fotografías Webp. Permite optimizar la carga de mapas y paginas AMP lo cual es una muy buena opción para optimizar nuestra carga móvil y mejorar así la indexación en Google, debido al próximo cambio de Google Mobile Indexing.
Para finalizar os dejamos el resultado del análisis realizado sobre la web que os comentamos que no tenía implantado ningún plugin Lazy Load y que daba una puntuación de 59 sobre 100 en el primer análisis con Page Speed.

Como veis el resultado es muy positivo, reduciéndose el primer renderizado de 3 segundos a 2.1 y aumentando la valoración a un 76%.

Y hasta aquí nuestros consejos para mejorar la velocidad de carga de vuestra web o tienda online con WordPress. Si tenéis alguna duda o queréis que os hagamos un análisis del estado de vuestra web podéis enviar un correo al equipo de consultoría SEO. ¡Estarán encantados de echaros una mano!