Cómo cargar fácilmente imágenes diferidas en WordPress (2 maneras)

¿Quieres aprender a hacer lazy load de imágenes en WordPress?

La carga diferida permite que su sitio web solo cargue imágenes cuando un usuario se desplaza hacia abajo hasta una imagen específica, lo que reduce el tiempo de carga del sitio web y mejora su rendimiento. Muchos sitios web con muchas imágenes utilizan la carga diferida para aumentar la velocidad y el rendimiento.

En este artículo, le mostraremos cómo hacer fácilmente lazy load de imágenes en WordPress, paso a paso.

¿Por qué utilizar la carga diferida de imágenes en WordPress?

Las imágenes de carga diferida de WordPress pueden acelerar su sitio web y ofrecer una mejor experiencia al usuario.

A nadie le gustan los sitios web lentos. De hecho, un estudio sobre el rendimiento de los sitios web reveló que un retraso de un segundo en el tiempo de carga de la página provoca un 7% menos de conversiones, un 11% menos de visitas a la página y un 16% menos de satisfacción del cliente.

A los motores de búsqueda como Google tampoco les gustan los sitios web lentos. Por eso, los sitios más rápidos se posicionan mejor en los resultados de búsqueda.

Las imágenes son las que más tardan en cargarse en su sitio WordPress en comparación con otros elementos web. Si añades muchas imágenes a tus artículos, cada una de ellas aumenta el tiempo de carga de tu página.

Una forma de manejar esta situación es utilizar un servicio CDN como BunnyCDN. Una CDN permite a los usuarios descargar imágenes de un servidor web cercano y reduce la velocidad de carga del sitio web.

Sin embargo, las imágenes seguirán cargándose y afectarán al tiempo total de carga de la página. Para solucionar este problema, puede retrasar la carga de imágenes implementando la función de carga diferida en su sitio web.

¿Cómo funciona la carga diferida de imágenes?

En lugar de cargar todas las imágenes a la vez, la carga diferida descarga solo las imágenes visibles en la pantalla del usuario. Sustituye el resto de imágenes por un marcador de posición o un espacio en blanco.

A medida que el usuario se desplaza por la página, su sitio web carga imágenes que son visibles en el área de visualización del navegador.

La carga diferida puede ser muy beneficiosa para su blog de WordPress:

• Reduce el tiempo de carga inicial de la página web para que los usuarios vean su sitio más rápidamente.
• Guarda o ahorra, según contexto, dinero en gastos de alojamiento de WordPress.

La versión de WordPress 5.5 añadió la carga diferida como característica por defecto.

Sin embargo, si desea personalizar la forma en que sus imágenes se cargan perezosamente y también las imágenes de fondo de carga perezosa, entonces usted tendrá que utilizar un plugin de WordPress.

Echemos un vistazo a cómo hacer lazy load de imágenes en WordPress usando dos plugins diferentes. Puede utilizar los enlaces rápidos a continuación para saltar directamente al método que desea utilizar:

Método 1: Carga diferida de imágenes en WordPress con WP Rocket

Recomendamos el uso del plugin WP Rocket para la carga diferida de imágenes en WordPress. Es el mejor plugin de caché de WordPress del mercado que te permite activar fácilmente la carga diferida de imágenes.

Minientrada en eso, es un plugin muy potente que le ayuda a optimizar la velocidad de su página sin conocer términos técnicos complejos ni establecer ajustes expertos.

Desde el primer momento, todos sus ajustes de caché recomendados por defecto acelerarán enormemente su sitio web WordPress.

Lo primero que tendrás que hacer es instalar y activar el plugin WP Rocket. Para más detalles, puedes consultar nuestra guía sobre cómo instalar un plugin de WordPress.

Para activar la carga diferida de imágenes, sólo tiene que marcar / comprobar algunas casillas. Incluso puede activar la carga diferida para vídeos, lo que mejorará aún más la velocidad de su sitio.

Todo lo que tienes que hacer es ir a Ajustes ” WP Rocket en tu escritorio de WordPress y hacer clic en la pestaña ‘Medios’. A continuación, puedes desplazarte hasta la sección ‘LazyLoad’ y comprobar las casillas junto a ‘Activar para imágenes’ y ‘Activar para iframes y vídeos’.

Para más detalles, consulte nuestra guía sobre cómo instalar y establecer correctamente WP Rocket en WordPress.

Método 2: Carga diferida de imágenes en WordPress con Optimole

Este método utiliza el plugin gratuito Optimole. Es uno de los mejores plugins de compresión de imágenes de WordPress que le permite activar fácilmente la carga diferida de imágenes.

Si recibe más de 5.000 visitantes al mes, entonces necesitará la versión premium de Optimole. Para más detalles, vea nuestra revisión completa de Optimole.

En primer lugar, debe instalar y activar el plugin Optimole. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, verá una pantalla en la que se le pedirá que se registre para obtener una clave API. También puede encontrar esta pantalla navegando a Optimole en el menú de administrador.

Asegúrese de que la dirección de correo electrónico indicada es correcta y haga clic en el botón “Crear y conectar su cuenta”. Si ya es usuario, haga clic en el botón “Ya tengo una clave API”.

Es posible que tenga que esperar unos segundos mientras el plugin se conecta a Optimole. Después de eso, el plugin comenzará automáticamente a optimizar tus imágenes para que tus visitantes vean ahora las mejores imágenes para sus dispositivos.

Mientras tanto, puedes hacer clic en la pestaña “Ajustes” para configurar la carga diferida.

Aquí, debe asegurarse de que el ajuste ‘Scale images and & Lazy load’ está activado / activo. Esto generará imágenes basadas en el tamaño de la pantalla del visitante y mejorará la velocidad de carga.

A continuación, haz clic en la opción de menú “Avanzado” y selecciona “Lazyload”. En esta pantalla, hay algunos ajustes diferentes que le permiten personalizar la forma en que sus imágenes se cargarán de forma diferida.

En primer lugar, puedes ajustar la opción “Excluir el primer número de imágenes de la carga lenta”. Esto evitará que las imágenes de la parte superior de tus entradas o páginas se carguen de forma diferida, de modo que las imágenes antes de desplazarse aparecerán siempre.

Puede establecerlo en 0 si desea que todas las imágenes se carguen diferidamente.

Hay algunos otros ajustes avanzados de carga diferida en Optimole que puede comprobar. Estos ajustes están activados por defecto.

El primero es el ajuste “Escalar imágenes”. De este modo, las imágenes se adaptarán al tamaño de la pantalla del visitante y la página se cargará más rápidamente.

A continuación, verá el ajuste “Activar lazyload para imágenes de fondo”. Esto hará que las imágenes de fondo, que pueden ser las más grandes de su sitio web, se carguen de forma diferida.

Otro ajuste es la carga diferida de vídeos incrustados e iframes. Si tienes mucho contenido de video incrustado, entonces querrás dejar este ajuste activado. Se cargará una imagen de marcador de posición en lugar del vídeo. Al hacer clic en el marcador de posición, se cargará el vídeo completo.

Puede seguir personalizando estos ajustes y ver qué funciona mejor para su sitio web y sus imágenes.

Antes de salir de los ajustes del plugin, asegúrese de hacer clic en el botón “Guardar cambios” situado en la parte inferior de la página.

Consejos adicionales para optimizar las imágenes de WordPress

Aunque la carga diferida ayudará a mejorar la velocidad de carga del sitio web, existen otras formas de optimizar las imágenes de WordPress para obtener el mejor rendimiento.

Por ejemplo, te recomendamos comprimir las imágenes antes de subirlas a tu sitio web con herramientas como TinyPNG o JPEGmini. También puedes utilizar un plugin de compresión automática de imágenes como Optimole o EWWW Image Optimizer.

También es importante elegir el tamaño de imagen de WordPress y el formato de archivo adecuados para tus imágenes. Los JPEG son mejores para fotos o imágenes con muchos colores, los PNG son adecuados para imágenes sencillas o transparentes y los GIF solo para imágenes animadas.

Esperamos que este artículo te haya ayudado a aprender cómo hacer lazy load de imágenes en WordPress. Puede que también quieras ver nuestro tutorial en sobre cómo optimizar fácilmente las imágenes para la web sin perder calidad y nuestra selección de expertos sobre el mejor software de diseño web.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.