Cómo retrasar la carga de las imágenes en WordPress

¡Buenos días! En este vídeo-tutorial vamos a ver cómo aplicar el efecto Lazy Load a nuestras imágenes de WordPress, es decir que se carguen sólo cuando lleguemos a hacer scroll hacia ellas. ¡Vamos allá!

Este post es una actualización de otro vídeo que quedó obsoleto, ya que el plugin utilizado en aquel caso hace mucho que no se actualiza así que ya no me atrevo a recomendarlo.

Posponer la carga de nuestras imágenes e incluso otros elementos de WordPress que aún no aparecen en la pantalla, como vídeos o iframes, nos aporta varios beneficios:

Aumenta la velocidad de carga de la web, ya que al acceder a la web sólo se cargan los elementos above the scroll, es decir, la parte visible de la web en el momento de acceder a ella antes de hacer scroll.
Reduce el uso de recursos del servidor, ya que al pedirle al servidor sólo las imágenes que llegamos a ver, nos ahorramos todas aquellas peticiones que quedan fuera de nuestro scroll.
Ahorra los datos a los usuarios de móviles, ya que no se descargarán las imágenes y otros elementos que no llegarán a ver, con lo cual no gastarán más megas de lo necesario

Conociendo todas estas ventajas, veamos cómo hemos implementado el Lazy Load en nuestro caso, que nos ayudará a posponer la carga de imágenes que no aparecen en pantalla.

Implementar Lazy Load en WordPress

En este caso he optado por implementar el Lazy Load con un plugin ya que ha resultado la forma más práctica, aunque yo no sea muy fan de utilizar plugins.

El plugin utilizado en el vídeo es el siguiente: A3 Lazy Load.

El procedimiento pues es muy sencillo ya que instalando y activando el plugin ya se nos aplicará el retraso de carga a todos los elementos de la web que soporta (imágenes, vídeos y iframes).

En cuanto a las opciones de plugin, sobre todo os recomiendo cambiar dos (las opciones están en Ajustes > a3 Lazy Load):

En la pestaña Effect & Style cambiar a la opción Fade ya que en la mayoría de ocasiones resulta más elegante que el Spinner, que está por defecto.
En la pestaña Image Load Threshold indicar un valor de unos 100 píxeles. Lo que hará esto es que extenderá el Lazy Load 100 píxeles más allá de nuestro scroll, para que los elementos se carguen un pelín antes de que los vea el visitante.

Con esto hemos implementado una solución más para hacer que nuestra web cargue más rápido. Si quieres ver más cosillas que puedes hacer para acelerar tu WordPress, aquí tienes un par de implementaciones más:

[cta-pagespeed]