¿Te gustaría aprender a implementar la carga diferida en WordPress?
Si su sitio web de WordPress depende en gran medida del contenido visual, es posible que deba agregarle la funcionalidad Lazy Loading. Esta función de WordPress ayuda a mejorar la velocidad y el rendimiento de la página de un sitio web, por lo que es esencial para sus esfuerzos de SEO.
Este artículo explorará cómo funciona Lazy Loading, así como sus ventajas y desventajas. También aprenderá cómo implementarlo en su sitio web y formas de optimizar su uso para obtener los mejores resultados.
Sin más preámbulos, le invitamos a consultar nuestra lista de Temas de WordPress. Pero antes, si nunca has instalado WordPress, descubre ¿Cómo instalar un blog de WordPress pasos 7 et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog
Luego de vuelta a por qué estamos aquí.
¿Qué es la carga diferida?
Es una función que permite que un sitio web solo cargue imágenes visibles para el usuario. Ayuda al sitio web a mantener una velocidad de carga rápida al no cargar imágenes fuera de la ventana gráfica.
¿Cómo funciona la carga diferida de WordPress?
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 páginas con muchas imágenes de alta resolución, este proceso puede reducir significativamente el tiempo de carga, lo que puede perjudicar el rendimiento de su sitio web.
Agregar una carga diferida a su sitio web le solicita que solo descargue imágenes visibles en la pantalla del usuario. El resto de los archivos multimedia se reemplazan con una imagen de marcador de posición y solo se cargan cuando el usuario se desplaza hacia abajo en la página web.
Ventajas y desventajas de WordPress Lazy Loading
Si todavía se pregunta si debería implementar la carga diferida de imágenes en WordPress, estos son los pros y los contras de la función:
Ventajas:
- Reduce el uso de ancho de banda, lo que reduce los costos de hospedaje.
- Mejora la velocidad del sitio web mejorando así la experiencia de navegación de los visitantes.
- Mejora la experiencia móvil.
- Mejora el esfuerzo SEO, aumentando el ranking de su sitio web en los motores de búsqueda.
en contra:
- Provoca almacenamiento en búfer de contenido, lo que afecta la velocidad de carga.
- Ralentiza el desplazamiento rápido.
Cómo agregar la carga diferida a su sitio web de WordPress: 3 métodos
Hay tres formas de implementar la carga diferida en su sitio web de WordPress. Le recomendamos que elija el método que mejor se adapte a su situación.
1. Actualice a WordPress 5.4 o superior
WordPress 5.4 y versiones posteriores admiten la carga diferida de forma predeterminada. Actualizando tu WordPress a la última versión admitirá automáticamente la carga diferida.
Aunque este es el método más fácil, no le permite configurar qué imágenes cargar de forma perezosa. Por lo tanto, su sitio web puede abusar de la función, manifestando las desventajas antes mencionadas.
Otro factor a considerar es la naturaleza diferente de la función Lazy Loading en cada versión de WordPress. Recientemente, WordPress lanzó una nueva versión de WordPress que implementa mejoras para abordar problemas con puntajes de contenido general deficientes de versiones anteriores.
Esto significa que los sitios web que se ejecutan en versiones anteriores de WordPress no obtienen los mismos beneficios que los que ejecutan WordPress 5.9, que es la última versión.
2. Habilite la carga diferida nativa a través del navegador
Los navegadores populares como Chrome, Firefox y Opera admiten la carga diferida. Solo necesitas agregar el atributo a imágenes y videos dirigidos para activarlo automáticamente.
En la carga diferida nativa de WordPress, el atributo de carga admite estos tres valores:
- Auto : activa la carga diferida de forma predeterminada, lo que equivale a no incluir un atributo de carga.
- Lazy : distribuye la carga de recursos hasta que cada uno alcance la distancia especificada desde la ventana gráfica.
- Ansioso : carga todos los recursos tan pronto como se carga la página, independientemente de su ubicación.
A continuación se muestra un ejemplo de uso:
<img src=”nom-image.png” loading=”lazy” alt=”alt attribute” width=”800″ height=”411″>Este método es ideal para cargar de forma diferida ciertas imágenes, otorgando a cada una un atributo de carga que determina cuándo aparecen en la ventana gráfica. Sin embargo, la carga diferida de imágenes individuales puede llevar un tiempo, especialmente si su sitio web contiene muchos archivos multimedia.
3. Instala un complemento de WordPress
Dado que no todos los navegadores admiten la carga diferida de imágenes y videos, es posible que el segundo método no funcione todo el tiempo. Puedes mitigar este problema instalando un complemento de WordPress de carga diferida. Este método le brinda más control sobre qué imágenes cargar de forma perezosa sin codificación.
Estos son mejores complementos de WordPress de carga diferida para elegir, accesible a través del directorio de plugins de WordPress.
Mejore la velocidad de carga de su sitio web
Una de las cosas buenas de este complemento de WordPress es que admite todos los tipos de imágenes, incluido AVIF. Este complemento de WordPress de carga diferida freemium proporciona optimización y actualización. la escala de la imagen para adaptarlos a los dispositivos de los visitantes, asegurando una experiencia de usuario óptimo.
Cuando detecta una red más lenta, este complemento de WordPress le brinda la opción de degradar la calidad de la imagen. Además, puede ahorrar espacio de almacenamiento almacenando imágenes en la biblioteca en la nube de este complemento de WordPress.
Este complemento gratuito le permite optimizar imágenes para hasta 5 visitas mensuales. La compra del plan Pro le permitirá cargar imágenes de forma diferida para 000 visitantes activos mensuales y más. Las imágenes para ambos planes se sirven a través de AWS Cloudfront CDN.
Descargar | Demo | alojamiento web
Smush
Smush es un popular complemento de optimización de imágenes que admite la carga diferida. es compatible con Temas de WordPress Complementos populares, creadores de páginas y bibliotecas de medios. Además, le permite guardar configuraciones de complementos en configuraciones ilimitadas y aplicarlas con solo unos pocos clics.
Otras características útiles son la detección de tamaño de imagen incorrecto, soporte para multisitio y herramientas de compresión de imágenes. La actualización a Smush Pro le permite optimizar imágenes grandes sin limitaciones de tamaño, guardar imágenes originales y acceder a otros complementos de WPMU Pro. Los precios comienzan desde 5 $ / mes.
Descargar | Demo | alojamiento web
a3 Carga perezosa
a3 Lazy Load es un complemento gratuito de carga diferida orientado a dispositivos móviles. Es totalmente compatible con WordPress 5.9 y una serie de herramientas populares, incluidos los complementos WebP y AMP.
Además de ofrecer la funcionalidad básica de carga diferida, a3 Lazy Load también le permite cargar videos diferidos, incluidos videos incrustados en páginas, publicaciones, tipos de publicaciones personalizadas y widgets. También están disponibles los efectos de carga diferida y la capacidad de cargar scripts desde el encabezado o el pie de página.
Otras características notables como la compatibilidad con varios sitios, la compatibilidad con imágenes WebP y la carga diferida de iframe: esto se aplica a los iframes que el núcleo de WordPress no carga, como Google Maps y los medios integrados.
Descargar | Demo | alojamiento web
Consejos de carga diferida de WordPress
La clave para aprovechar al máximo la carga diferida es usarla correctamente. Aquí hay algunos consejos para configurar la carga diferida en su sitio web de WordPress:
- No cargue imágenes de encabezado de forma perezosa. Dado que las imágenes colocadas en la parte superior de la página son visibles cuando se cargan, su carga diferida no tiene ningún beneficio.
- Elija los marcadores de posición apropiados. Recomendamos usar un tono de color sólido o una imagen de baja calidad como marcador de posición para sus imágenes.
- Agregue tiempo de búfer para la carga de imágenes. De esta manera, sus imágenes estarán listas justo antes de ingresar a la ventana de visualización del visitante, eliminando cualquier tiempo de espera.
- Defina las dimensiones de los contenedores de imágenes. Esto te ayudará a evitar cambios repentinos de diseño, lo que hará que tu página web se vea ordenada al cargar.
- Implemente la carga diferida solo en páginas largas. Las páginas largas incluyen aquellas que toman más de dos vueltas para llegar al final y tienen más de cinco imágenes.
La carga diferida en WordPress le permite brindar a los visitantes una mejor experiencia de navegación. Además de mejorar la velocidad del sitio web, esta función también reduce el uso de ancho de banda. En general, ayuda a sus esfuerzos de SEO para obtener mejores clasificaciones en los resultados de los motores de búsqueda.
Otros recursos recomendados
También lo invitamos a consultar los recursos a continuación para avanzar en el control y agarre de su sitio web y blog.
- Cómo corregir los errores de redireccionamiento en WordPress
- Algunos plugins para integrar los servicios de Google en su blog
- Complementos de 5 WordPress para mostrar notificaciones
- Cómo crear plantillas personalizadas de WordPress
- El uso de diferentes orígenes WordPress
Conclusión
Eso es todo por este tutorial que le muestra cómo implementar Lazy Loading en su sitio web de WordPress. Esperamos que este artículo lo haya ayudado a comprender cómo aprovechar al máximo la función de carga diferida en los sitios web de WordPress. Asegúrese de usar un Alojamiento de WordPress alta calidad para mejorar aún más el rendimiento de su sitio web.
Si tiene alguna inquietud o sugerencia, háganoslo saber en comentarios.
Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
