Todo el que tiene una web vive preocupado con el rendimiento de su sitio. Nadie pierde el tiempo en una web que tarde más de 3 segundos en cargar. En post anteriores te he relatado todo lo que puedes hacer para conseguir que tu WordPress esté en óptimas condiciones y cargue rápido. Hoy me centro en la carga diferida en WordPress.
En una web entran en juego muchos elementos. Todos estos elementos añaden peso a nuestro sitio web. Cuanto más pese nuestra web más tardará en cargar. Como propietarios de una web nos enfrentamos a diario a la difícil tarea de incluir contenido de interés para los usuarios que nos visitan.
El contenido lo es todo en una web. Se convierte en nuestra seña de identidad y si lo cuidamos será lo que nos diferencie y contribuirá a aumentar nuestra presencia en buscadores. Hay muchos tipos de contenido. De entre todos ellos los que más pesan son los elementos audio-visuales. (Serrano 2019)
No podemos prescindir de las imágenes en nuestra web. Un artículo sin una imagen es como un jardín sin flores. Podría hacerte muchas recomendaciones con respecto a vídeos e imágenes como que incorpores sólo los imprescindibles o que los optimices antes de subirlos a la web. Ya he tratado de esto en otros artículos. Hoy me voy a centrar en las imágenes que has decido subir una vez optimizas. En qué es lo que pasa con ellas y en lo que puedes hacer para ayudar con ese sobrepeso en tu web.
¿Qué es la carga diferida?
Todo lo que ponemos en la web se carga a la vez, independientemente de que se muestre en pantalla o no. Es posible que nuestra web exhiba una galería de imágenes pero sólo unas pocas imágenes caben en el área visible de la pantalla. Necesitamos hacer scroll para ver toda esa galería, sin embargo todas ellas se cargan a la vez. Eso supone un peso considerable.
Aquí es donde entra en juego el concepto de carga diferida (lazy load en inglés). Se trata de un patrón de diseño que se utiliza en informática que consiste en retrasar la carga de los elementos hasta que sean necesarios. Es decir, hasta que sean visibles. (Marreros 2018)
De esta manera se cargarían las imágenes conforme vamos haciendo scroll, disminuyendo de esa manera ese esfuerzo y ese sobrepeso innecesario en el inicio.
¿Cómo activar la carga diferida en WordPress?
La carga diferida nativa llegó a WordPress 5.5. Es una funcionalidad relativamente nueva, pero al parecer no es compatible con todos los navegadores.(Norman 2022) Por eso lo más habitual es recurrir a un plugin, aunque hay muchos temas que la implementan así que averigua primero si tu tema implementa la carga diferida.
Hay plugins específicos para la carga diferida:
- Smush. Muy fácil de usar.
- A3 Lazy Load: te permite definir una clase para los elementos a los que no quieras aplicarle la carga diferida y también un umbral de carga. Con este umbral lo que conseguimos es que los elementos que estén por debajo de un peso determinado se carguen independientemente de que sean visibles en ese momento o no.
- Lazy Load para Videos. Funciona con videos alojados en Vimeo o YouTube. Carga una imagen como marcador de posición y posteriormente, cuando el usuario hace clic en esa imagen se carga en video.
Hay plugins de optimización que se ocupan de más tareas además de implementar la carga diferida como Autoptimize.
Consideraciones de la carga diferida
Como en todo lo relacionado con nuestra web, no existe una fórmula mágica. Mi consejo es que no te obsesiones. Sólo en el caso de que tengas una gran cantidad de imágenes gigantes y o de videos debes preocuparte por la carga diferida.
Ten en cuenta que la mayoría de los plugins introducen una librería de JavaScript de la que dependerá la web y tampoco es bueno abusar de plugins.
Antes de hacer nada mira a ver si tu tema implementa la carga diferida. Puedes utilizar para ello la consola para desarrolladores del navegador que te informará si la imagen se sirve con lazy load o no.
En el caso de que tu tema no tenga carga diferida mira a ver si el plugin de optimización que utilizas implementa la carga diferida.
Si necesitas una web échale un ojo a Unifiloweb. Desarrollada en WordPress con WooCommerce. 🙂
UNIFILOWEB
Si aún no tienes una web para vender tus productos échale un vistazo a Unifiloweb. Una web completa desarrollada en WordPress con WooCommerce. Sin compromiso.
Referencias
- Alfonso Serrano (15 julio 2019) Aumenta la velocidad de tu WordPress con la carga diferida. silocreativo.com https://www.silocreativo.com/aumenta-velocidad-wordpress-carga-diferida-lazy-load
- Kirstan Norman (15 febrero 2022) Best Lazy Load Plugins to Make Your WordPress Site Faster. Wpmudev.com https://wpmudev.com/blog/6-lazy-load-plugins-to-make-your-wordpress-site-faster/
- Jhon Marreros Guzman (16 mayo 2018)Lazy Load en WordPress, ¡mejora la velocidad de tu web! Webempresa.com https://www.webempresa.com/blog/lazy-load-wordpress-mejora-velocidad-web.html