Cómo retrasar la carga de las imágenes en WordPress (Lazy …
La carga perezosa es una técnica para mejorar la velocidad inicial de la página y la carga útil mediante el aplazamiento de la carga de los activos no críticos que se encuentran «por debajo del pliegue» o, en otras palabras, todo lo que no se encuentra actualmente en la ventana gráfica del navegador. Diferir las imágenes fuera de la pantalla en WordPress significa básicamente esperar a cargar las imágenes que aún no podemos ver. Fíjese que he dicho activos y no imágenes porque muchas cosas de su página web pueden cargarse de forma perezosa, siempre que no sean necesarias para servir el diseño del sitio y la parte superior de la página web que su visitante ve por primera vez.
Las imágenes son un caso de uso ideal para la carga lenta porque consumen muchos recursos. Los vídeos, los scripts y los comentarios también son candidatos ideales porque tienden a añadir mucho peso a una página web. Como resultado, el navegador tiene que empezar primero a renderizar el contenido por encima del pliegue para que los visitantes del sitio no vean una página blanca en blanco cuando aterricen en su sitio.
Diferir las imágenes fuera de la pantalla significa no descargar las imágenes por debajo del pliegue de su sitio para que sólo se carguen rápidamente los recursos críticos. Esto hace que el contenido por encima del pliegue sea una parte crucial de su página web. Es lo primero que los navegadores necesitan renderizar antes de que los visitantes del sitio puedan interactuar con el mismo.
De todos los recursos cruciales necesarios para que su página web sea funcional, las imágenes son uno de los mayores recursos que su página web necesita cargar. En comparación con los recursos basados en texto, se necesita mucho más tiempo para procesar y descargar las imágenes. La advertencia «arreglar imágenes fuera de pantalla» significa que su página web está descargando recursos que no son importantes para la funcionalidad de la página web cuando un usuario entra por primera vez en su sitio.
Si su sitio web tiene imágenes que están por debajo de 3 veces la altura de la ventana gráfica, es probable que vea la advertencia «fijar imágenes fuera de pantalla» para su página web. De este modo, las imágenes sin lazy loading son tres veces la altura de la parte visible de la página web en el viewport del usuario. Como resultado, las imágenes comienzan a cargarse por debajo de la parte visible.
El error «fix defer offscreen images» también se produce cuando las imágenes que tienen un tamaño de archivo mayor, superior a 0,02MB, tardan más de 50ms en cargarse cuando los visitantes llegan por primera vez a su sitio. Además de esto, la advertencia «fix defer offscreen images» también aparece si su página web tiene imágenes que no tienen el atributo de carga definido en su código. Diferir imágenes fuera de pantalla se refiere al método para retrasar la carga de las imágenes que no son visibles en la ventana gráfica del usuario hasta que se necesiten.
Al hacer esto, el navegador se centrará en la carga de lo que es necesario, haciendo que el sitio web sea más rápido. Cuando un visitante visita tu página web, su navegador descarga todas las imágenes presentes en la página, incluso las que no son visibles en la ventana gráfica, haciendo que el proceso de renderización sea más lento de lo normal. Por lo tanto, si tiene muchas imágenes, tarda aún más tiempo en renderizar la página.
Por eso utilizamos el aplazamiento de las imágenes fuera de pantalla para aumentar este proceso de renderizado en la ventana gráfica. Al diferir las imágenes fuera de pantalla, el navegador descargará sólo las imágenes que son visibles inmediatamente para el usuario. Descargará las imágenes fuera de pantalla sólo cuando el usuario se desplace hasta ellas.
Esto hace que su sitio web se renderice más rápido y ayuda a proporcionar una mejor experiencia de usuario. La estrategia más sencilla para aplazar las imágenes fuera de pantalla es la carga perezosa. La carga perezosa garantiza que su sitio descargue las imágenes sólo cuando las necesite, haciendo que su sitio funcione más rápido.
Una vez que comience a realizar la carga perezosa de imágenes en el sitio, verá que el «Aplazamiento de imágenes fuera de pantalla» desaparecerá de las herramientas de pruebas de velocidad. Es un proceso sencillo y directo que sólo lleva unos minutos y pasos. A continuación le ofrecemos un desglose completo que seguramente le ayudará.
Es la forma más fácil de diferir las imágenes fuera de pantalla en WordPress, ya que hay muchos plugins disponibles que funcionan perfectamente sin tocar el código. A3 Lazy Load es el plugin de mejor elección con millones de instalaciones. Le permite configurar la carga perezosa en unos pocos clics sin hacer ningún cambio en la biblioteca de javascript.
Lo increíble de este plugin es que proporciona etiquetas de script amigables con el SEO, la capacidad de carga perezosa de imágenes y activos, y características para excluir imágenes específicas. Hay algunos otros plugins también disponibles que funcionan fantásticamente y proporcionan una buena experiencia de usuario. Otros plugins que también soportan la carga perezosa: Otra forma de probar esto es abriendo las herramientas de desarrollo en su navegador.
Haga clic con el botón derecho mientras su sitio web está abierto, elija el elemento de inspección y vaya a la pestaña de red. Dentro de esa pestaña, selecciona el filtro Imágenes y desplázate por la página web en la que te encuentras. Si las imágenes no aparecen a la vez, sino una a una, significa que la carga perezosa está haciendo su trabajo.
La carga lenta de las imágenes fuera de la pantalla garantiza que sólo se carguen cuando se necesiten, es decir, que aparezcan cuando el visitante se desplace hacia abajo en la página. Esto ayuda a conservar el ancho de banda esencial, especialmente en los dispositivos móviles, lo que resulta en una página de carga rápida percibida por sus visitantes
Programador reconvertido a consultor SEO. Me gusta automatizar cosas, de hecho, este articulo ha sido generado a partir de otras webs de forma automática.
