Respaldado por Awesome Motive.
Más información en nuestro Blog de los Halcones Marinos.

¿Cómo cargar de forma perezosa imágenes y vídeos en WordPress?

Cómo hacer Lazy Load en WordPress

Hay muchos enfoques diferentes disponibles para implementar la carga lenta en su sitio web. Le invitamos a echar un vistazo a nuestra lista clasificada de los mejores plugins para WordPress que soportan la carga lenta.

Existen numerosos plugins gratuitos en el directorio de WordPress que pueden utilizarse para la carga lenta de imágenes y vídeos. Después de considerar unas cuantas docenas de plugins y probar algunos, hemos encontrado dos plugins que aumentan significativamente el rendimiento del sitio web. Si está interesado en implementar la carga perezosa, considere las siguientes opciones.

Uso de WP Rocket (Premium)

WP Rocket es el método más sencillo para implementar la carga lenta en su sitio web. Además, el proceso de activación tarda menos de un minuto. LazyLoad es el nombre del plugin que WP Rocket incluye como su versión de carga lenta de imágenes.

Cuando LazyLoad está activado, WP Rocket detendrá inmediatamente la carga perezosa de imágenes nativa de WordPress para evitar cualquier posible problema.

Siga los siguientes pasos para activar la función LazyLoad de WP Rocket:-

  • Puede activar LazyLoad navegando a Ajustes > WP Rocket > Panel multimedia dentro de su instalación de WordPress. 
  • Haga clic en "Habilitar para imágenes" en el área de LazyLoad en la parte superior de la pantalla.
  • Haga clic en "Guardar cambios" después de hacer su selección. 
Configuración de WP rocket lazy load

Esto es todo lo que hay que hacer. Como resultado, los visitantes experimentarán una carga lenta de las fotos.

LazyLoad proporciona carga perezosa para elementos HTML adicionales, como iframes y vídeos, en contraste con el enfoque nativo que proporciona WordPress. Además, utilizará la carga perezosa para las imágenes de fondo si dichas imágenes se aplican en línea para componentes HTML específicos.

Si desea utilizar la funcionalidad de carga lenta de imágenes nativa de WordPress, puede desactivar la opción LazyLoad en WP Rocket. Por otro lado, la nueva propiedad de carga no es soportada por todos los navegadores todavía. Además, la instalación de WordPress sólo se centra en las fotos. Por lo tanto, LazyLoad de WP Rocket sigue siendo la alternativa superior, sobre todo si su sitio web tiene muchas imágenes, vídeos e incrustaciones.

Cosas que hay que tener en cuenta al activar el Native Lazy Loading de WP Rocket

Aunque WP Rocket no incluye la compatibilidad automática con los navegadores Chrome que usan lazy loading nativo, todavía tienes la opción de elegir el soporte para el lazy loading nativo de Chrome habilitándolo a través de un plugin de ayuda. Del mismo modo, es el caso aunque WP Rocket no incluye la compatibilidad automática con otros navegadores que utilizan lazy loading nativo.

Usted puede asegurar las siguientes cosas mediante el uso de este útil plugin:

  • Cada una de sus fotos contendrá la sintaxis HTML esencial para utilizar la carga perezosa nativa; los navegadores compatibles con Chrome utilizarán automáticamente la carga perezosa nativa; todos los demás navegadores utilizarán automáticamente LazyLoad de WP Rocket.
  • Tiene la opción de seguir utilizando nuestra sólida tecnología LazyLoad o cambiar a la función de carga lenta incorporada de Chrome.

Todo depende de usted. En primer lugar, realice pruebas de ambos enfoques en su localidad y elija el que mejor le funcione.

Uso de a3 Lazy Load (gratuito)

Si buscas una opción gratuita, te recomendamos que utilices el plugin a3LazyLoad. Con el plugin a3 puedes desactivar la carga lenta para determinadas imágenes y páginas. Además, permite la carga retardada de vídeos en su sitio web

Además, este plugin ayuda a la carga lenta de imágenes y vídeos externos. La implementación del núcleo de WordPress no lleva a cabo dicha acción.

Puedes instalar y activar este plugin desde tu panel de control de WordPress. Ahora, puedes personalizar la configuración de la herramienta.

Paso 2: Ajustar la configuración de la imagen del plugin

Vaya a Configuración > a3 Lazy Load siguiente. Si te fijas en Activación de Lazy Load, el plugin se activa por defecto después de la instalación.

Ahora, abra la pestaña de imágenes LazyLoad. Puede (1) elegir qué imágenes del sitio web se van a retrasar y (2) proporcionar una reserva para los navegadores web que se niegan a aceptar JavaScript. Para las imágenes que no desea retrasar la carga, puede (3) establecer una clase CSS:

Configuración de las imágenes que se cargan lentamente en el plugin a3 lazy load

La configuración por defecto tiene todas las opciones activadas. Le recomendamos encarecidamente que mantenga esta configuración. Cree una clase CSS que le permita omitir la carga diferida para determinadas imágenes.

Paso 3: Ajustar la configuración de vídeo del plugin

La pestaña de carga lenta de vídeos e iframes es el siguiente paso. Con a3 Lazy Load, puede seleccionar la carga retardada para determinados clips, al igual que con las imágenes.

El plugin permite ver vídeos en (1) contenidos y widgets y proporciona (2) una función de reserva para los navegadores que no soportan JavaScript:

Configuración de los ajustes de vídeo de carga lenta

Puede especificar una clase CSS en la configuración de vídeo (3) para excluir determinados vídeos de la carga diferida. Si quieres una configuración más sencilla, utiliza la misma clase que elegiste en la sección de imágenes.

Más plugins de carga lenta para WordPress

Aparte de WP rocket & a3 Lazy Load, hay varios plugins útiles para la carga perezosa que puedes considerar:

  • Carga lenta de vídeos
  • BJ Lazy Load
  • Cargar más productos para WooCommerce
  • WordPress Infinite Scroll - Ajax Load Más
  • Carga condicional de Disqus
  • Carga de los comentarios de forma perezosa

Reflexiones finales 

Es crucial ser consciente de cualquier conflicto potencial cada vez que actualice o modifique su sitio web. Consulta esta lista de problemas frecuentes asociados a la carga lenta si descubres que permitir la carga lenta ha provocado que algún aspecto de tu sitio web quede inoperativo.

Es posible que haya incompatibilidades como resultado de que la función de carga lenta no se aplique a las imágenes cargadas por plugins como Revolution Slider y Envira Gallery. La lista completa de plugins compatibles se puede encontrar aquí.

Este artículo, así como muchos otros, se puede encontrar en Seahawk Media Blog.

Entradas relacionadas

Los servicios de asistencia de WordPress son esenciales para las empresas y agencias que dependen de sus sitios web para

¿Te preguntas por qué Elementor y Bricks son competidores tan cercanos en el desarrollo de WordPress? A pesar de

Hoy en día, estar en línea no es sólo una ventaja para las empresas, sino una obligación. Internet es

Komal Bothra 18 de abril de 2024

20 mejores creadores de páginas de WordPress con diseño de arrastrar y soltar sin código

WordPress es la plataforma web más popular del mundo. Cuenta con más de 60 millones de

WordPress
Komal Bothra 17 de abril de 2024

WordPress Vs Contentful: ¿Cuál será el mejor CMS en 2024? ¡Averigüémoslo!

Elegir el sistema de gestión de contenidos adecuado es crucial para las empresas que desean crear un sitio web.

Compara
Komal Bothra 16 de abril de 2024

Las 20 mejores agencias de desarrollo de WordPress en India para 2024

¿Está buscando los mejores servicios de desarrollo de WordPress en la India? No se preocupe

Agencia WordPress

Empieza con Seahawk

Regístrate en nuestra app para ver nuestros precios y obtener descuentos.