Lazy Loading es una técnica de diseño muy empleada en la actualidad ya que permite mostrar sólo las imágenes que el usuario está viendo en ese momento. De esta forma, en vez de que se carguen 30 imágenes al ingresar a la página, se cargarán sólo los recursos que el usuario verá en el primer pantallazo. Si se va acercando al final de ese pantallazo y se desplaza hacia abajo, el sistema procede a cargar los recursos “cercanos” y que se mostrarán próximamente.
La razón por la que el lazy loading se usa en la actualidad es porque permite ahorrar ancho de banda y puede mejorar en gran medida el tiempo de carga de una página.
Si tienes un sitio WordPress y quieres aplicar lazy loading en imágenes u otro tipo de contenido, puedes hacerlo de forma rápida mediante plugins WordPress. En este artículo te mencionamos algunos de ellos.
BJ Lazy Load
Al instalar y activar BJ Lazy Load se reemplazarán todas las imágenes en entradas, vistas en miniatura, iframes e imágenes para Gravatar se convierten en archivos temporales y se carga el contenido en cuanto el usuario se desplaza hacia abajo por la página. También funciona con text widgets y ya que se encuentra habilitado para iframes, quiere decir que puedes incrustar videos de Youtube, Vimeo, etc. y obtener este mismo resultado.
Para los visitantes que no tienen activado JavaScript en su navegador, se muestra el archivo original.
Ajax Load More
Ajax Load More es un plugin que permite aplizar lazy loading a entradas personalizadas o entradas únicas. También a páginas y comentarios. Es ideal si tu sitio posee infinite scrolling pues ayuda a utilizar efectivamente los recursos.
Puedes crear consultas complejas ajustando ciertos parámetros de consultas en WordPress con el constructor de códigos cortos. Una vez creado puedes añadir ese código corto en tu página. También puedes personalizar el plugin seleccionando una serie de opciones del menú.
Ajax Load More es compatible con otros plugins populares como WooCommerce.
Lazy Load
Lazy Load es un plugin que se aplica sólo en imágenes. Hace uso de jQuery.sonar para cargar imágenes sólo cuando éstas se encuentran visibles en pantalla. Este plugin es una combinación de código escrito por VIP Team, TechCrunch 2011 Redesign Team y Jake Goldman.
Lazy Load for Videos
Lazy Load for Videos, como su nombre indica, reemplaza los videos incrustados de Youtube y Vimeo por una imagen que puede ser pinchada para reproducir el video. Es decir, los videos sólo se cargan una vez que el usuario hace click sobre la imagen respectiva. Este plugin sólo hace uso de jQuery y es una herramienta de gran utilidad en sitios que contienen una gran cantidad de videos incrustados.
Lazy Load for Videos te permite elegir colores personalizados para tu reproductor de video de Vimeo, cambiar los colores del reproductor de Youtube y la barra de progreso, así como esconder los botones de control. Puedes elegir si mostrar videos relacionados al finalizar la reproducción, esconder la información del video cuando este comienza a reproducirse para evitar distracciones, entre otras útiles funciones.
a3 Lazy Load
a3 Lazy Load es un plugin orientado a móviles y sus resultados mejoran cuando existe un mayor volumen de contenido en tu sitio. Puedes decidir a qué elementos deseas aplicar lazy loading desde el panel de control de WordPress una vez que has instalado el plugin. Puedes seleccionar imágenes de entradas y páginas, en widgets, vistas en miniatura e incluso gravatars.
Image Lazy Load
Image Lazy Load carga las imágenes que se encuentra en páginas y entradas sólo cuando la imagen es visible para el visitante en la pantalla. De esta manera se reduce el tiempo de carga, se reduce el ancho de banda del servidor y se mejora el rendimiento general del sitio web.
Image Lazy Load hace uso de la librería Unveil.js.
Loading Page with Loading Screen
Loading Page with Loading Screen es un plugin que muestra en una pantalla el porcentaje de progreso de carga. Una vez alcanzado el 100%, esta pantalla desaparece y el usuario tiene acceso al contenido completo. Puedes aplicar este plugin a la página principal o a todas las páginas del sitio, así como seleccionar los colores de la pantalla de progreso o incluso elegir una imagen como fondo.
Rocket Lazy Load
Rocket Lazy Load muestra imágenes en una página sólo cuando éstas deben ser visible para el visitante, de esta manera se reduce el número de solicitudes http y se mejora el tiempo de carga. Este plugin se puede aplicar en todas las imágenes de una entrada, widgets de texto, vistas en miniaturas, avatars y emoticonos.
Rocket Lazy Load es un plugin ligero (pesa menos de 2 KB y no hace uso de ninguna librería de JavaScript. Asimismo, es un plugin sencillo que no presenta ninguna opción adicional, sólo debes instalarlo y activarlo.
Lazy Load XT
Lazy Load XT puede ser utilizado para imágenes, videos de Youtube y Vimeo, así como iframes. Es un plugin ligero que carga el script y reemplaza los atributos src con data-src cuando el contenido de una entrada o página se carga en WordPress.
Crazy Lazy
Crazy Lazy evita que todas las imágenes de una página se carguen y sólo muestra aquellas que son visibles en la pantalla del visitante. Si el visitante se desplaza hacia abajo y se encuentra en una posición donde una imagen debe mostrarse, sólo en ese momento se cargará la imagen. De esta manera, se puede reducir en gran medida el tiempo de carga de la página.
Crazy Lazy es un plugin sencillo que no requiere de ninguna configuración adicional, sólo debes activarlo y estará listo para usarse. Dependiendo del tema o el uso de jQuery, Crazy Lazy utilizará una versión modificado del plugin Unveil.js o la librería de JavaScript Lazyload.js.
Simple Lazyload
Simple Lazyload es un plugin sencillo que reemplaza todas las imágenes con archivos temporales y carga el contenido mientras el usuario va navegando en la página.
Lazy Facebook Comments
Lazy Facebook Comments permite que puedas emplear el sistema de comentarios de Facebook en tu sitio web sin presentar problemas de lentitud. Para ello hace uso del lazy loading cada vez que un visitante pincha sobre el botón respectivo o se desplaza hacia abajo.
Con este plugin puedes añadir los comentarios más populares de Facebook en tu sitio web, así como elegir el número de comentarios que se mostrarán, cambiar el color, el orden de aparición, etc.
En conclusión…
Como ves, hay disponibles plugins WordPress gratuitos para activar el lazy loading en tu sitio web, de forma que incluso sin ningún tipo de presupuesto puedes implementar esta útil característica a tu sitio web. Ya que quieras aplicar lazy loading a imágenes u otro tipo de contenido, con alguno de los plugins WordPress que hemos listado previamente podrás lograrlo.
