Para cualquier persona que navega por internet, posiblemente no haya algo más frustrante que esperar a que cargue una web. Los motivos pueden ser variados, pero uno de los más comunes es que esto se produzca por la cantidad de elementos que solemos usar en nuestra web que tienen un gran peso, como videos o imágenes. Y en estos casos, una solución efectiva para mejorar la velocidad a la que se muestra nuestra web es la carga diferida, o lazy load.
Según varios estudios, los usuarios esperan aproximadamente 2 segundos a que cargue una web. Si tarda 3 segundos o más, casi la mitad de las personas dejan la web y realizan otra búsqueda. Es por ello que debemos tomarnos muy en serio en optimizar nuestro sitio web.
En SiloCreativo hemos visto anteriormente como mediante el uso de tipo de formato correcto, podemos hacer que nuestras imágenes pesen menos. Si a esto le añadimos el uso de la carga diferida, el tiempo de carga de nuestra web se reducirá de forma considerable. Con estos dos truco, ahorramos espacio de hosting, y nuestros visitantes tendrían una mejor experiencia al navegar por nuestra web.
Eso si, antes que nada, veamos en que consiste exactamente la carga diferida, y como podemos usarla en nuestra web bajo WordPress.
Qué es la Carga Diferida
La carga diferida funciona retrasando la carga de ciertos elementos de nuestra web hasta que son absolutamente necesarios. De cierta manera, los dejamos durmiendo en segundo plano, hasta que necesitamos que despierten y cumplan su cometido.
El ejemplo más evidente que tenemos es con las galerías de imágenes. Cuando entramos en una página de este tipo, normalmente carga todas las imágenes, a pesar que, cuando entramos, solo vemos las que se encuentran al principio de la página. Es decir, quizás estemos cargando 30 fotografías cuando en un primer momento, hasta que no empecemos a hacer scroll, solo estamos viendo 5 imágenes. Como es evidente, no tardamos lo mismo en cargar 5 fotografías que 30. Y esto repercute en los tiempos de carga.
Pero la carga diferida no solo se aplica a las imágenes, sino que también se puede hacer a otro elementos de tu web. Si tienes un blog, puedes hacer que los comentarios no se carguen hasta que el visitante llegue a la sección de comentarios. O lo mismo con los widgets de tu footer, tu gravatar o ciertos iframes, como YouTube.
Situaciones en las que usar la Carga Diferida
Lo más usual es usarlo en web donde tenemos una gran cantidad de imágenes en una misma página, como portfolios, tiendas online, blog de moda o de viajes, etc. También es muy típico su uso en web con scroll infinito, sobre el que escribimos hace pocos días en nuestro blog.
Ventajas e Inconvenientes de la Carga Diferida
La principal ventaja es la velocidad de carga, lo que trae que no haya nadie que se quede por el camino a la espera de que se abra nuestra web. A esto le sumamos que, si nos vistan desde un dispositivo móvil, el gasto de datos se reducirá al tener que cargar menos elementos. Al mismo tiempo que también consumirán menos batería.
Eso sí, todo tiene un lado negativo. No es todo lo SEO-friendly que nos gustaría. El retraso de carga de ciertos elementos también afecta a los buscadores. Esto supone un problema cuando, además de imágenes, también existe contenido importante.
Implementa la Carga Diferida en tu WordPress mediante plugins
La forma más sencilla de implementar la carga diferida en nuestro WordPress es mediante el uso de plugins. En esta ocasión, nuestro preferido es a3 Lazy Load, ya que tiene unas opciones que seguro que te resultan muy interesantes.
A3 Lazy Load nos permite aplicar en nuestra web la carga diferida a:
- Imágenes
- Miniaturas
- Gravatars
- Videos
- Iframes
- Widgets
También podemos definir una clase CSS, y hacer que las imágenes que lleven dicha clase no les afecte la carga diferida. Ideal para contenido muy importante que queremos que se cargue desde el primer momento.
Y una de las opciones que más me gusta, es designar, en pixeles, un umbral a partir del cual ya esté cargada nuestra web. Por ejemplo, si elegimos 300px, todo lo que este 300px por debajo de lo que estén viendo nuestros visitantes, ya estará cargado. Así nos aseguramos que aunque hagan scroll muy rápido, no tendrán que esperar a que se cargue el contenido.
Como veis, reducir la velocidad de carga de nuestra web la hace más sostenible, consume menos recursos para nosotros (ocupa menos espacio en nuestro hosting), y consume menos para el usuario (tiene que cargar menos datos, y gasta menos batería en sus dispositivos móviles). Pero además, va a facilitar que tengamos más visitas y que la experiencia de usuario sea mucho más satisfactoria. Que, a fin de cuentas, es lo que todos queremos para nuestra web.
