Existen muchos enfoques diferentes para implementar la carga diferida en tu sitio web. Te invitamos a consultar nuestra lista de los mejores plugins para WordPress compatibles con la carga lenta.
Existen numerosos plugins gratuitos en el directorio de WordPress que permiten la carga diferida de imágenes y vídeos. Tras considerar varias docenas de plugins y probar algunos, hemos encontrado dos que mejoran significativamente el rendimiento del sitio web. Si te interesa implementar la carga diferida, considera las siguientes opciones.
Usando WP Rocket (Premium)
WP Rocket es la forma más sencilla de implementar la carga lenta en tu sitio web. Además, el proceso de activación toma 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 diferida de imágenes nativas de WordPress para evitar posibles problemas.
Siga los pasos a continuación para habilitar la función LazyLoad de WP Rocket:
- Puedes activar LazyLoad navegando a Configuración > WP Rocket > Panel de medios dentro de tu instalación de WordPress.
- Haga clic en “Habilitar para imágenes” debajo del área LazyLoad en la parte superior de la pantalla.
- Haga clic en “Guardar cambios” después de realizar su selección.
Eso es todo lo demás que hay que hacer. Como resultado, los visitantes experimentarán una carga lenta de fotos.
LazyLoad permite la carga diferida de elementos HTML adicionales, como iframes y vídeos, a diferencia del enfoque nativo de WordPress. Además, utiliza la carga diferida para imágenes de fondo si estas se aplican en línea para componentes HTML específicos.
Si desea utilizar la función nativa de carga diferida de imágenes de WordPress, puede desactivar la opción LazyLoad en WP Rocket. Sin embargo, esta nueva propiedad de carga aún no es compatible con todos los navegadores. Además, la instalación de WordPress se centra únicamente en fotos. Por lo tanto, LazyLoad de WP Rocket sigue siendo la mejor alternativa, especialmente si su sitio web tiene muchas imágenes, vídeos e incrustaciones.
Cosas a tener en cuenta al activar la carga diferida nativa de WP Rocket
Aunque WP Rocket no incluye compatibilidad automática con navegadores Chrome que utilizan carga diferida nativa, puedes optar por la compatibilidad con la carga diferida nativa de Chrome habilitándola mediante un plugin auxiliar. Esto también ocurre aunque WP Rocket no incluya compatibilidad automática con otros navegadores que utilizan carga diferida nativa.
Puede garantizar las siguientes cosas utilizando este útil complemento:
- Cada una de tus fotos contendrá la sintaxis HTML esencial para utilizar la carga diferida nativa; los navegadores compatibles con Chrome utilizarán automáticamente la carga diferida 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 diferida incorporada de Chrome.
¡Tú decides! Primero, prueba ambos enfoques en tu ubicación y elige el que mejor te funcione.
Uso de a3 Lazy Load (gratis)
Si busca una opción gratuita, le recomendamos el a3 Lazy Load . Puede desactivar la carga diferida para imágenes y páginas específicas con el plugin a3. Además, permite la carga diferida de vídeos en su sitio web:
Además, este plugin facilita la carga diferida de imágenes y vídeos externos. La implementación principal de WordPress no realiza esta acción.
Puedes instalar y activar este plugin desde tu panel de WordPress. Ahora puedes personalizar la configuración de la herramienta.
Paso 2: Ajustar la configuración de la imagen del complemento
Vaya a Configuración > Carga diferida de a3. Si busca en Activación de carga diferida, el complemento se activa por defecto tras la instalación.
Ahora, abre la pestaña de imágenes de carga diferida. Puedes (1) elegir qué imágenes del sitio web quieres retrasar y (2) proporcionar una alternativa para navegadores web que no aceptan JavaScript. Para las imágenes que no quieres que se carguen con retraso, puedes (3) configurar una clase CSS:
La configuración predeterminada tiene todas las opciones habilitadas. Recomendamos encarecidamente mantener esta configuración. Cree una clase CSS que le permita omitir la carga diferida de imágenes específicas.
Paso 3: Ajustar la configuración de vídeo del complemento
La pestaña Carga diferida de vídeos e iframes es el siguiente paso. Con a3 Carga diferida, puedes seleccionar la carga diferida para clips específicos, al igual que con las imágenes.
El complemento permite videos en (1) contenido y widgets y proporciona (2) una función de respaldo para navegadores que no admiten JavaScript:
Puedes especificar una clase CSS en la configuración de vídeo (3) para excluir determinados vídeos de la carga diferida. Si prefieres una configuración más sencilla, usa la misma clase que seleccionaste en la sección de imágenes.
Más complementos de carga diferida para WordPress
Además de WP Rocket y a3 Lazy Load, hay varios complementos útiles para carga diferida que puedes considerar:
- Carga diferida para vídeos
- Carga diferida de BJ
- Cargar más productos para WooCommerce
- Desplazamiento infinito en WordPress: Cargar más con Ajax
- Carga condicional de Disqus
- Carga diferida para comentarios
Reflexiones finales
Es fundamental estar atento a posibles conflictos al actualizar o modificar su sitio web. Consulte esta lista de problemas frecuentes asociados con la carga diferida si descubre que permitirla ha provocado que algún aspecto de su sitio web deje de funcionar.
Es posible que se produzcan incompatibilidades si la función de carga diferida no se aplica a las imágenes subidas por plugins como Revolution Slider y Envira Gallery. La lista completa de plugins compatibles se encuentra aquí.
Este artículo, así como muchos otros, se pueden encontrar en Seahawk Media Blog.
