Cómo utilizar lazy loading en WordPress

Si quieres optimizar el re­n­di­mie­n­to de tu página web en WordPress, deberías confiar en el lazy loading. Aunque la función ya forma parte del núcleo o “core” de WordPress, puede mejorarse con plugins.

La carga diferida, también conocida como lazy loading, es una técnica para mejorar el re­n­di­mie­n­to de una página web. En lugar de cargar todo el contenido al mismo tiempo, solo se ponen a di­s­po­si­ción de los usuarios las imágenes y los vídeos que son in­me­dia­ta­me­n­te visibles. Todo lo que aún no es visible se carga más tarde.

Gracias a la carga diferida, los usuarios pueden navegar por la web de manera más rápida. Al fin y al cabo, cuando terminan de leer (o mirar) la zona visible, también se carga la zona “below the fold”, es decir, lo que solo aparece tras desplazar el contenido.

Con el lazy loading puedes hacer tu WordPress más rápido. Esto no acelera la carga real, pero sí mejora la ex­pe­rie­n­cia de usuario. Los usuarios de una página web reciben rá­pi­da­me­n­te el contenido más im­po­r­ta­n­te. Todo lo demás puede cargarse en segundo plano sin que se note.

A Google también le gusta esta función de carga: los Core Web Vitals de Google son factores de cla­si­fi­ca­ción que apuntan a la velocidad de carga de los elementos de una página web. Cuanto más rápido se pueda in­ter­ac­tuar con una página web, mejor será su cla­si­fi­ca­ción en los re­su­l­ta­dos de búsqueda. Por lo tanto, el lazy loading también pertenece al ámbito de la op­ti­mi­za­ción en bu­s­ca­do­res (SEO). En co­m­bi­na­ción con otras opciones de SEO para WordPress, esto puede po­si­cio­nar mejor tu web.

También puedes mejorar el re­n­di­mie­n­to de tu página uti­li­za­n­do la co­m­pre­sión de imágenes para que el contenido gráfico se cargue bastante más rápido. También sería útil, en este caso, conocer los tamaños de imágenes en WordPress para elegir las secciones de imagen perfectas.

Desde la versión 5.5, la carga diferida en WordPress está activada por defecto para los gráficos. Siempre que colocas una imagen en tus páginas y entradas, WordPress añade au­to­má­ti­ca­me­n­te un atributo en los archivos que se puede reconocer en el código fuente:

El atributo es co­m­pa­ti­ble con Chrome, Firefox y Safari. Sin embargo, esto también significa que otros na­ve­ga­do­res no reac­cio­nan al atributo. Además, hay otros co­n­te­ni­dos, como los vídeos, que pueden be­ne­fi­ciar­se de la carga diferida en WordPress. Pero el atributo solo permite adjuntar imágenes. Por lo tanto, si quieres utilizar esta técnica de forma más amplia en tu web, tienes que recurrir a otras opciones: con la ayuda de los plugin, puedes ampliar el alcance del lazy load, por ejemplo, si quieres insertar vídeos en WordPress.

Para controlar mejor la carga diferida en WordPress, se re­co­mie­n­da utilizar plugins. A co­n­ti­nua­ción, un resumen de algunas ex­te­n­sio­nes muy útiles:

El plugin LazyLoad de WP Rocket permite utilizar la función de lazy loading en imágenes, vídeos e iFrames y, por lo tanto, va más allá de las po­si­bi­li­da­des de la co­n­fi­gu­ra­ción estándar del núcleo de WordPress. Al mismo tiempo sigue siendo muy ligero, con 10 KB. El plugin abarca incluso los avatares y los smileys. También es in­te­re­sa­n­te que los vídeos in­cru­s­ta­dos de YouTube puedan su­s­ti­tui­r­se primero por mi­nia­tu­ras antes de que se carguen co­rre­c­ta­me­n­te, algo que reduce el tiempo de carga de la página.

Podemos utilizar el plugin in­me­dia­ta­me­n­te y no necesita que lo co­n­fi­gu­re­mos. Pero esa es también una de las de­s­ve­n­ta­jas: LazyLoad apenas ofrece opciones de co­n­fi­gu­ra­ción. Sin embargo, permite activar o des­ac­ti­var la carga diferida para los distintos tipos de medios de forma in­de­pe­n­die­n­te.

Si quieres más funciones, puedes se­le­c­cio­nar la versión de pago: plugins de caching para WordPress de WP Rocket, que incluye el lazy loading, pero también otras funciones de op­ti­mi­za­ción.

Tienes muchas más opciones con a3 Lazy Load. El plugin te ofrece la opción de activar lazy loading de forma in­de­pe­n­die­n­te para las imágenes o los vídeos e iFrames. Pero la elección no termina ahí; puedes incluso de­te­r­mi­nar qué tipo de imágenes debe cubrir la carga diferida. Por ejemplo, se excluyen los gra­va­ta­res o las mi­nia­tu­ras. La función también puede des­ac­ti­var­se para di­fe­re­n­tes tipos de páginas (como la página de inicio). Se puede entrar en más detalles uti­li­za­n­do el URI para excluir objetos in­di­vi­dua­les de la carga diferida.

Además, a3 Lazy Load ofrece la po­si­bi­li­dad de de­te­r­mi­nar el aspecto de la recarga: ¿las imágenes deben aparecer le­n­ta­me­n­te o el plugin debe mostrar un icono de carga? Aunque esta resulta una elección atractiva, té­c­ni­ca­me­n­te es más im­po­r­ta­n­te que puedas ampliar la ventana gráfica, ya que, de este modo, puede es­ta­ble­ce­r­se la carga directa de partes que aún no son visibles.

Otra ca­ra­c­te­rí­s­ti­ca especial del plugin: a través de a3 Lazy Load, puedes des­ac­ti­var la carga diferida que WordPress ofrece de modo estándar. Esto asegura que las funciones del plugin y del CMS no se in­te­r­po­n­gan entre sí.

El plugin Optimole va más allá del lazy loading en WordPress y, en general, trata de mejorar la entrega de imágenes en tu web. Además de la carga in­te­li­ge­n­te, el plugin comprime tus imágenes y el tamaño de cada imagen se adapta al di­s­po­si­ti­vo final del usuario. Además, se utiliza una Red de Entrega de Contenido (CDN), in­de­pe­n­die­n­te para entregar las imágenes. Esto puede reducir aún más el tiempo de carga.

Sin embargo, apenas hay opciones para el lazy loading. Además de decidir si quieres utilizar la función, solo puedes excluir los gráficos de fondo de la carga diferida y tienes que re­gi­s­trar­te en Optimole antes de poder utilizar las funciones.

Smush es también una suite completa para hacer que tu página de WordPress cargue con mayor velocidad. Este plugin puede comprimir au­to­má­ti­ca­me­n­te las imágenes y también eliminar datos EXIF para reducir aún más el tamaño del archivo. Al igual que Optimole, Smush ofrece una CDN para acelerar aún más la entrega de imágenes.

Sin embargo, a di­fe­re­n­cia de Optimole, Smush tiene algunas opciones más para la carga diferida: por ejemplo, te ofrece la po­si­bi­li­dad de se­le­c­cio­nar los formatos gráficos para los que la función debe estar activa y puedes añadir o descartar iFrames. Igua­l­me­n­te, puedes co­n­fi­gu­rar ubi­ca­cio­nes o pro­pó­si­tos: ¿deben incluirse también en la carga diferida las mi­nia­tu­ras o imágenes de los widgets? También te permite excluir tipos de páginas in­di­vi­dua­les. Puedes definir la carga diferida de forma aún más precisa ex­clu­ye­n­do URLs o URIs es­pe­cí­fi­cas.

Al igual que con a3 Lazy Load, te ofrece la opción de pe­r­so­na­li­zar el diseño de la carga con Smush, usando, por ejemplo, un Fade-in, un símbolo de carga giratorio o un gráfico con indicador de posición.

El Lazy Loader de Florian Brinkmann no funciona con el atributo loading, sino que utiliza un script. Esto permite es­ta­ble­cer la recarga de imágenes, iFrames, vídeos y archivos de audio. Para afinar esto, tienes que es­pe­ci­fi­car las clases CSS que deben ser excluidas de la carga diferida. Activando una opción, de­te­r­mi­nas in­di­vi­dua­l­me­n­te si una página o post están cubiertos por el lazy loading.

Para que la carga resulte un poco más gráfica, puedes activar un círculo animado y es­ta­ble­cer su color.

Si no quieres confiar en la función estándar de WordPress, es una buena idea optar por un plugin. Y como a3 Lazy Load viene con muchas ca­ra­c­te­rí­s­ti­cas, vamos a usarlo como ejemplo en este tutorial.

Antes de hacer cambios im­po­r­ta­n­tes en tu web, debes crear una copia de seguridad en WordPress. De este modo, podrás volver rá­pi­da­me­n­te a una versión que funcione en caso de co­m­pli­ca­cio­nes. También deberías pensar en un tema hijo de WordPress. Este duplicado del tema real garantiza que todos tus ajustes sigan fu­n­cio­na­n­do después de una ac­tua­li­za­ción por parte del proveedor del tema.

Accede al área de plugins en el backend de WordPress y elige la opción “Instalar”. Escribe “a3 Lazy Load” en el campo de búsqueda y aparecerá el plugin co­rre­s­po­n­die­n­te. Puedes in­s­ta­lar­lo con un clic y activarlo con otro.

Puedes encontrar las opciones del plugin en el menú “Ajustes” del panel de control de WordPress. Allí, a3 Lazy Load tiene ahora su propia entrada. También puedes acceder a la co­n­fi­gu­ra­ción de la extensión a través de la vista general del plugin. En el segundo elemento del menú (“Lazy Load Ac­ti­va­tion”), también puedes des­ac­ti­var la función sin tener que des­ac­ti­var el plugin. Tienes incluso la opción de des­ac­ti­var la función de carga diferida por defecto de WordPress, lo cual es una buena idea para evitar co­m­pli­ca­cio­nes.

Determina qué objetos deben verse afectados por Lazy Load. Hay di­fe­re­n­tes opciones di­s­po­ni­bles:

• Lazy Load Images: aquí se define dónde se van a encontrar las imágenes para el lazy loading. Puedes es­pe­ci­fi­car, por ejemplo, que solo incluyan imágenes del área de contenido y no de los widgets.
   
• Lazy Load Videos and iFrames: determina si los vídeos e iFrames del contenido y/o los widgets deben be­ne­fi­ciar­se de la función lazy loading.
   
• Exclude by URI’s and Page Type: utiliza el control de­s­li­za­n­te para es­ta­ble­cer qué tipos de página deseas incluir en el lazy load. Por ejemplo, puedes excluir la página de inicio o una página de categoría. También tienes la opción de cla­si­fi­car ciertos objetos por URI.

El plugin también te da la opción de mejorar vi­sua­l­me­n­te la carga de imágenes y vídeos. En la opción “Effect & Style” puedes realizar los ajustes co­rre­s­po­n­die­n­tes y elegir entre un Fade-in o un círculo giratorio. Además, puedes definir el color de fondo y adaptarlo al fondo de tu página web, por ejemplo.

La función de carga diferida por defecto forma parte del núcleo de WordPress y, en realidad, no está previsto que se desactive esta función. Por eso, WordPress no tiene una función co­rre­s­po­n­die­n­te en su propia co­n­fi­gu­ra­ción, pero puede tener sentido des­ac­ti­var la función para evitar co­n­fli­c­tos entre las dos funciones como, por ejemplo, cuando utilizas un plugin con la opción de carga diferida.

Para esta des­ac­ti­va­ción, puedes utilizar un plugin como el a3 Lazy Load pre­se­n­ta­do aquí. Disable Lazy Load es un plugin pro­gra­ma­do es­pe­cí­fi­ca­me­n­te para este fin. Basta con activarlo para que la función de lazy loading del núcleo de WordPress deje de funcionar.

Sin embargo, no es necesario recurrir a un plugin. También puedes des­ac­ti­var la función in­clu­ye­n­do una nueva entrada en el código fuente. Antes de hacerlo, deberías crear un tema hijo para ase­gu­rar­te de que tus cambios no se pierden tras una ac­tua­li­za­ción del tema. A co­n­ti­nua­ción, vete a “Editar los archivos del tema” a través de la opción de menú “Design” y abre el archivo functions.php. Ahí tienes que insertar el siguiente comando:

Una vez que hagas clic en “Ac­tua­li­zar archivo”, se aplicarán los cambios y la carga diferida quedará des­ac­ti­va­da.