SEO – Lazy Load para jQuery, cargando imágenes progresivamente

por | 16 febrero, 2018

SEO – Lazy Load para jQuery, cargando imágenes progresivamente.

Ya vimos anteriormente lo importante que es optimizar imágenes para el SEO, ahora vamos a ver como evitar descargar más imágenes de la cuenta, para eso vamos a usar el plugin de jQuery Lazy Load

¿Qué hace el plugin Lazy Load?

Con Lazy Load las imágenes que se encuentren fuera del viewport (parte visible de la página web) no serán cargadas antes de que llegues a su ubicación bien sea con la rueda del ratón o la barra de scroll. Resumiendo, hace justamente lo contrario que la precarga de imágenes. Usar Lazy Load en páginas web largas que contienen muchas imágenes de gran tamaño hará que la carga de la página vaya más rápido. Incluso, va más allá, ya que el navegador estará en el estado listo después de cargar únicamente las imágenes visibles de un primer vistazo omitiendo aquellas que no se vean hasta que te desplaces por la web. En algunos casos, también puede ayudar a reducir la carga del servidor.

Requisitos de Lazy Load

Lazy Load depende de jQuery por lo que no debes olvidar de incluirla y luego debes especificar una imagen de base que se cargará mientras no se cargue la foto original. Esta imagen de base, puede tener 1×1 px con lo que será realmente rápida. Además, deberás indicar el jpg que quieras cargar utilizando el atributo data-src .

¿Sólo imágenes?

No, aunque Lazy Load al principio se desarrollara para la carga de imágenes, de esto no estoy seguro, puedes usarlo para cargar cualquier contenido de forma retardada.

¿Qué tienes un menú con quinientos elementos de submenus que se despliegan al pasar el ratón? No hay problema, Lazy Load cargará sólo el submenu correspondiente mediante AJAX, evitando así tener que descargar quinientos enlaces (y todo su contenido html) aligerando de forma sustancial la velocidad de la página.

¿Qué lo que tienes son un listado de vídeos? Lo mismo, Lazy Load cargará los vídeos según el usuario los vaya demandando, al igual que las imágenes no se solicitarán los datos al servidor hasta que el elemento sea visible.

Puedes descargar JQuery Lazy y ver la documentación y ejemplos desde http://jquery.eisbehr.de/lazy/

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *