Si tu sitio web cuenta con un gran volumen de contenido visual como imágenes o videos, es posible que necesites agregar la funcionalidad de Lazy Load o carga diferida a tu página web hecha con WordPress. Esta herramienta ayuda a mejorar la velocidad y el rendimiento del sitio web, lo que es esencial para tus esfuerzos de optimización de posicionamiento SEO.
¿Qué es Lazy Load y cómo funciona en WordPress?
Lazy Load es una funcionalidad que permite a un sitio web cargar sólo las imágenes que son visibles para el usuario. De esta forma, se mantiene una velocidad de carga rápida al no descargar las imágenes fuera de la ventana gráfica. Cuando un usuario visita un sitio web de WordPress, su navegador descarga todas las imágenes de la página web a la vez. Para las páginas con muchas imágenes de alta resolución, este proceso puede aumentar el tiempo de carga de forma significativa, lo que perjudica el rendimiento de tu sitio web.
Agregar Lazy Load a tu sitio web hace que sólo se descarguen las imágenes que son visibles en la pantalla del usuario. El resto de los archivos multimedia se sustituyen por una imagen de marcador de posición y solo se cargan cuando el usuario se desplaza hacia abajo en la página web.
Pros y contras de Lazy Load en WordPress
Si te cuestionas si deberías llevar a cabo la carga diferida de imágenes en WordPress, aquí tienes los pros y los contras de esta función:
Pros:
- Reduce la utilización del ancho de banda, disminuyendo los costos de hospedaje o hosting.
- Mejora la agilidad del sitio, permitiendo que la experiencia de navegación de los visitantes sea mejor.
- Incrementa la experiencia móvil de los usuarios.
- Optimiza la puntuación del Largest Contentful Paint (LCP).
- Mejora tus puntuaciones de SEO, lo que implica un aumento del ranking de búsqueda de tu página web..
Contras:
- Puede provocar un buffering del contenido, perjudicando la velocidad de carga del sitio.
- Ralentiza el desplazamiento rápido de los usuarios.
Cómo implementar Lazy Load en WordPress: 3 formas de hacerlo
Si deseas implementar la función Lazy Load en tu sitio web de WordPress, existen tres opciones disponibles. Te recomendamos que elijas la que mejor se adapte a tus necesidades y situación.
Actualizar a WordPress 5.4 o superior
Una de las opciones para implementar Lazy Load en WordPress es actualizar tu sitio web a la versión 5.4 o superior. Las versiones más recientes de WordPress incluyen imágenes de carga diferida por defecto, lo que significa que no tendrás que hacer nada adicional para habilitar esta función. Sin embargo, ten en cuenta que esta opción no te permite configurar qué imágenes deben ser de carga diferida, lo que puede resultar en un uso excesivo de la función y, por lo tanto, en los contras mencionados anteriormente.
Además, es importante tener en cuenta que la función Lazy Load varía en cada versión de WordPress. Recientemente, se ha anunciado que la versión 5.9 de WordPress incluye mejoras para resolver los problemas con las pobres puntuaciones de Large Contentful Paint que se presentan en las versiones anteriores. Esto significa que los sitios web que funcionan con versiones antiguas de WordPress no obtienen los mismo beneficios que los que usan WordPress 5.9.
Los navegadores más utilizados, como Chrome, Firefox y Opera, cuentan con el soporte de lazy load nativo de imágenes. Para activarlo, solo tienes que añadir el atributo «loading» a las imágenes y vídeos que deseas seleccionar. El atributo loading admite tres valores en lazy load nativo de WordPress:
- Auto: activa Lazy Load por defecto, lo que equivale a no incluir un atributo loading.
- Lazy: distribuye la carga de los recursos hasta que cada uno alcance la distancia especificada de la ventana gráfica.
- Eager: carga todos los recursos en cuanto se carga la página, independientemente de su ubicación.
Te mostramos con un ejemplo cómo utilizarlo:
<img src="imagen-de-prueba.png" loading="lazy" alt="atributo alt" width="512″ height="512″>
Este método es ideal para implementar lazy load en imágenes específicas, ya que puedes asignar un atributo loading que dicta su tiempo de aparición en la ventana gráfica. Sin embargo, ten en cuenta que la carga diferida de imágenes individuales puede llevar cierto tiempo, especialmente si tu sitio web cuenta con muchos archivos multimedia.
Usar un plugin específico
Como no todos los navegadores admiten la carga diferida de imágenes y vídeos, el método anterior puede no funcionar en todos los casos. En esta situación, puedes solucionar este problema instalando un plugin de lazy load para WordPress. Instalar un plugin te dará mayor control sobre las imágenes que se cargan lentamente sin necesidad de programar o escribir código.
A continuación te mostramos cuáles son los mejores plugins de WordPress para lazy load entre los que puedes elegir y que son accesibles a través del directorio de plugins de WordPress:
Image Optimization & Lazy Load by Optimole:
Una de las grandes ventajas de Optimole es que soporta todo tipo de imágenes, incluidas las AVIF. Este plugin freemium de lazy load permite optimizar las imágenes de WordPress y escalarlas para adaptarlas a los dispositivos de los usuarios, garantizando una experiencia de usuario óptima.
Cuando detecta una conexión a internet lenta, Optimole ofrece la opción de disminuir la calidad de la imagen. Además, ahorra espacio de almacenamiento en tu espacio de hosting guardando las imágenes en la nube de Optimole.
Optimole en su versión gratuita te permite optimizar las imágenes para un máximo de 5.000 visitas mensuales. Si te decides por adquirir el plan Pro, este te permitirá la carga diferida de imágenes para 25.000 visitantes activos mensuales y más. Las imágenes de ambos planes se sirven a través de la CDN de AWS Cloudfront.
Smush:
El plugin Smush es muy popular para optimizar imágenes y tiene la capacidad de soportar lazy load. Es compatible con una variedad de temas, constructores de páginas y plugins de bibliotecas multimedia conocidos. Además, te permite guardar los ajustes del plugin en varias configuraciones y aplicarlos con facilidad.
Entre las funciones adicionales que ofrece Smush, se encuentra la detección de tamaños de imagen incorrectos, compatibilidad con múltiples sitios y herramientas de compresión de imágenes. Si decides actualizar a Smush Pro, tendrás la posibilidad de optimizar imágenes de gran tamaño sin restricciones, hacer copias de seguridad de las imágenes originales y acceder a otros plugins de WPMU Pro. Los precios para Smush Pro comienzan en 5 dólares al mes.
a3 Lazy Load:
El plugin gratuito a3 Lazy Load se enfoca en la carga diferida para móviles y es totalmente compatible con WordPress 5.9, así como con diversas herramientas tecnológicas populares, como los plugins WebP y AMP.
Además de ofrecer las funciones básicas de carga diferida de imágenes, a3 Lazy Load también te permite cargar vídeos de forma diferida, incluso aquellos que están incrustados en páginas, entradas, tipos de entradas personalizadas y widgets. Asimismo, cuenta con efectos de carga diferida y la opción de cargar scripts desde la cabecera o el pie de página.
Entre las características destacables de a3 Lazy Load, se encuentra su compatibilidad con multisitios, la compatibilidad con imágenes WebP y la carga diferida de iframes, lo que permite cargar los iframes que el núcleo de WordPress no carga, como los de Google Maps y los medios incrustados.
Recomendaciones para el uso de lazy load o carga diferida de WordPress
Para implementar correctamente la carga diferida en tu sitio de WordPress, es importante tener en cuenta algunos consejos útiles:
- Evita cargar las imágenes en la parte superior de la página, ya que serán visibles al cargar y la carga diferida no tendrá ningún beneficio.
- Selecciona marcadores de posición adecuados, como un color sólido y dominante o una imagen de baja calidad, para tus imágenes.
- Agrega un tiempo de espera para la carga de las imágenes, para que estén listas justo antes de entrar en la ventana gráfica de los visitantes y no haya tiempo de espera.
- Define las dimensiones de los contenedores de imágenes para evitar cambios repentinos en el diseño y mantener una apariencia ordenada al cargar la página.
- Implementa la carga diferida solo en páginas extensas, que requieren más de dos desplazamientos o scrolls para llegar al final y tienen más de cinco imágenes debajo del pliegue.
Conclusión
En resumen, la carga diferida de imágenes en WordPress es una función que mejora la experiencia de navegación del usuario, aumenta la velocidad del sitio y reduce el uso de ancho de banda. Además, contribuye a mejorar el posicionamiento en los motores de búsqueda.
Esperamos que este artículo te haya brindado información valiosa sobre cómo aprovechar al máximo la función de lazy load en los sitios de WordPress. Para mejorar aún más el rendimiento de tu sitio, es importante utilizar un alojamiento de WordPress de alta calidad.
