Cómo diferir imágenes fuera de la pantalla en WordPress

Todos sabemos que la velocidad es muy importante para SEO y conversión. Hacer que un sitio web sea rápido puede ayudar a que tenga una clasificación más alta en Google. Y también puede hacer felices a tus lectores. ¿A quién no le gusta un sitio web rápido?

Pero cuando se trata de optimizar la velocidad de un sitio web, puede llevar mucho tiempo con tantas cosas que hacer. Por lo general, intento de vez en cuando probar mi sitio web y asegurarme de que no esté funcionando mal. Nunca se sabe qué hay de nuevo ahí fuera. En el mundo del SEO, las cosas cambian muy a menudo.

Si ha revisado su sitio web a través de herramientas de prueba de velocidad como Google PageSpeed ​​Insight o Web.dev, una de las advertencias que puede recibir es "diferir las imágenes fuera de la pantalla".

En este artículo, explicaré lo que eso significa, le diré cómo solucionarlo y le recomendaré plugins puedes usar para arreglarlo.

Sin embargo, debes saber que posponer las imágenes fuera de la pantalla puede aumentar la velocidad de tu móvil; los factores más importantes que afectan tu velocidad son el alojamiento y el tema. Aquí en BloggingHerramientas que utilizamos Cloudways porque es el alojamiento de WordPress más rápido. Si no puede permitirse el lujo de Cloudways, Bluehost o Hostinger son buenas opciones. Para Theme, utilizamos el más rápido tema de WordPress conocido como GeneratePress.

¿Qué significa aplazar las imágenes fuera de la pantalla?

Aplazar las imágenes fuera de la pantalla significa retrasar la carga de imágenes que aún no son visibles para el usuario. Esto hará que el navegador se centre en cargar solo lo necesario y, en última instancia, hará que el sitio web sea más rápido.

Si tiene muchas imágenes en sus publicaciones o página de inicio, cuando un usuario visita su sitio, el navegador comienza a cargar todo inmediatamente. Si las imágenes son muchas, puede llevar mucho tiempo mostrar la página al usuario.

Pero cuando difiere las imágenes fuera de la pantalla, las imágenes solo se cargarán cuando el usuario se desplace hasta ellas.

Tenga en cuenta que no solo se pueden aplazar las imágenes, sino que la mayoría de los activos de su sitio web también se pueden aplazar hasta que se necesiten.

Cómo diferir imágenes fuera de la pantalla en WordPress

Puede diferir imágenes fuera de la pantalla cargando imágenes de forma diferida. La carga diferida garantizará que las imágenes solo se carguen cuando sean necesarias. Esto, a su vez, hará que el sitio web sea más rápido.

Una vez que pueda cargar imágenes de forma diferida y otros activos que impiden que su página se cargue rápidamente. Las "imágenes diferidas fuera de la pantalla" de Google PageSpeed ​​Insight y otras herramientas de prueba desaparecerán.

Siga estos pasos para diferir las imágenes fuera de la pantalla en WordPress:

1. Instale un complemento de carga diferida

Hay muchos complementos de carga diferida que están disponibles de forma gratuita en el directorio de complementos de WordPress. Puede ir a Complemento, agregar nuevo y luego escribir carga diferida. Instale a cualquiera con buenas críticas.

Pero no necesita instalar ningún complemento si ya tiene complementos que pueden manejar la carga diferida. La mayoría de los complementos de almacenamiento en caché tienen carga diferida. Verifique su complemento de almacenamiento en caché para ver las opciones de carga diferida. Los complementos de optimización de imágenes en su mayoría tienen la opción de carga diferida.

Además, si está utilizando Jetpack y autoptimizar, tienen opciones de carga diferida.

2. Active las opciones de carga diferida

Una vez que instale el complemento, asegúrese de activar la opción de carga diferida. Si tiene un complemento de caché con una función de carga diferida, asegúrese de activar esa opción.

3. Limpia tu caché.

Una vez que se activa la carga diferida, borre su caché y eso es todo.

Puede probar su sitio nuevamente, ¡la advertencia debería desaparecer!

Aplazar imágenes fuera de pantalla plugin de WordPress

Los complementos de imágenes diferidos en verde son los mismos que los complementos de carga diferida. A continuación se muestran algunos:

1. jetpack

jetpack es uno de los complementos de WordPress más populares con más de 5 millones de instalaciones activas. Si ya tiene Jetpack instalado, no necesita instalar un complemento adicional para la carga diferida.

Simplemente active la carga diferida en Jetpack. Para activarlo, vaya a la configuración de Jetpack y luego en la pestaña de rendimiento, desplácese hacia abajo y habilite la carga diferida.

2. Optimización automática

Autoptimize es un complemento de rendimiento muy popular. Si está utilizando Autoptimize, no es necesario instalar un complemento de carga diferida, ya que Autoptimize tiene la misma función.

Vaya a la configuración de Optimización automática, luego haga clic en la pestaña de imágenes y habilite la carga diferida.

3. Rocket WP

WP Rocket es el complemento premium de almacenamiento en caché de WordPress más popular. Si usa WP Rocket, no necesita ningún otro complemento, tienen habilitada la carga diferida.

Vaya a la configuración de WP Rocket y luego haga clic en los medios, desde allí puede habilitar la carga diferida.

4. Caché de LiteSpeed

Si está utilizando el Complemento LiteSpeed ​​Cache, Tiene una función de carga lenta. Para activarlo, simplemente navegue a la sección de medios y allí podrá habilitar la carga diferida.

5. a3 Carga diferida

Si solo necesita un complemento para la carga diferida solo, entonces a3 Carga perezosa es un buen complemento para eso. Simplemente vaya a complemento> agregar nuevo. Busque a3 Lazy Load. Instalar y activar. Luego vaya a la configuración del complemento y active la carga diferida.

Generalmente, algunos temas, algunos complementos de caché y algunos complementos de optimización de imágenes vienen con la función de carga diferida.

Preguntas frecuentes (FAQ)