NorfiPC
NorfiPC » Códigos » Como usar Lazy Load

Retrasar la carga de las imágenes en las páginas con Lazy Load



Mejorar la velocidad y el rendimiento de páginas con muchas imágenes o fotos de gran tamaño, evitando que carguen hasta que nos desplacemos hasta ellas y aparezcan en la ventana del navegador. Ejemplos de cómo usar el plugin en nuestro sitio.
Retrasar la carga de las imágenes en las páginas con Lazy Load
Explicamos cómo usar Lazy Load, una sencilla librería o plugin de JavaScript disponible en Github, que ayuda a que las paginas carguen más rápido, retrasando o aplazando la carga de las imágenes, hasta que aparezcan en la parte visible del navegador, cuando el usuario se desplace por la página.
De esta forma no tenemos que limitarnos por la cantidad de imágenes que debe tener un artículo, ni por su tamaño, pudiendo incluir incluso fotos con buena resolución, sin afectar la velocidad de las páginas, ni del sitio.



¿Qué es Lazy Load para que usarla?


Lazy Load es un pequeño script creado por Mika Tuupola, que se apoya en la librería jQuery para configurar la forma en que deben cargar las imágenes insertadas en una página web.
Solo pesa 4 KB y es muy fácil de implementar en cualquier página.
En esta página de ejemplo que no es larga, la usamos para aplazar la carga de varias imágenes situadas al final de ella, hasta que nos desplacemos con el navegador hasta dicha sección.
Este método permite beneficiarnos en páginas con muchas imágenes o si poseen gran tamaño, reduciendo al mínimo la velocidad de carga, factor decisivo en su posicionamiento ante Google.
De forma secundaria reduce la carga del servidor y el consumo de datos de nuestros visitantes.



Como usar Lazy Load para aplazar la carga de imágenes


Para usar Lazy Load necesitamos hacer los siguientes cambios:
1- Agregar una clase de nombre "lazy" a las imágenes necesarias.
2- En vez de usar el clásico atributo src para especificar la ruta a los archivos de imágenes, usar "data-original".
Por ejemplo:
<img class="lazy" data-original="ruta a la imagen.jpeg" width="540" height="375">
3- Cargar las librerías JQuery y Lazy Load de la siguiente forma:
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js
4- Agregar un script que contiene la instrucción con la forma en que Lazy Load debe cargar las imágenes.
En esta página de ejemplo usamos el siguiente:
<script>
$(function() {
     $("img.lazy").lazyload();
});
</script>
Los tres últimos elementos se pueden situar al final del HTML, junto antes de la etiqueta de cierre </BODY>, para evitar que afecten el rendimiento de la página.
Es necesario para que el script funcione correctamente, especificar las dimensiones de las imágenes en los atributos ancho y altura.



Opciones y efectos que permite Lazy Load


Aunque en esta página de ejemplo no usamos ninguno de ellos, con Lazy Load se pueden especificar distintas opciones y emplear varios efectos.
Son los siguientes:
✔ Threshold. Permite especificar que las imágenes carguen un número determinado de pixeles antes de aparecer en la parte visible de la pantalla, de esta forma nos aseguramos que se muestren completamente.
✔ Eventos. Permite hacer que las imágenes carguen solo con un evento, cuando el usuario da un clic o cuando sitúa el ratón sobre ellas.
✔ Efectos. Con esta opción el plugin espera que la imagen cargue completamente y a continuación, la muestra usando un efecto.



Donde descargar o cargar Lazy Load y jQuery


Lazy Load se puede descargar gratis desde la página del proyecto en Github, en la que también podemos encontrar varios ejemplos prácticos para su uso e implementación.
La última versión de jQuery se puede descargar desde su sitio en: http://jquery.com/download/
Los dos archivos también se pueden cargar directamente desde CDNJS, el CDN de CloudFlare.
Enlace a JQuery en CDNJS
Enlace a LazyLoad en CDNJS

Unveil, una alternativa reducida a Lazy Load

Unveil es otra librería similar disponible en Github, creada por Luis Almeida, la que reduce Lazy Load al máximo, para usar solo sus opciones elementales (2 KB).
Los que no necesiten usar los efectos que ofrece Lazy Load, pueden usar en sus proyectos Unveil.
Incluye soporte para dispositivos con pantalla Retina, que agradecen imágenes con una mayor resolución.
➔ Descarga Unveil en Github
Enlace a Unveil en CDNJS



Consejos al usar Lazy Load


En las páginas de nuestro sitio en las que empleamos este plugin, cargamos algunas imágenes correctamente optimizadas (4 o 5), de la forma tradicional.
Las que siguen a continuación, se cargan a petición del usuario usando este método.
De esta forma evitamos que las imágenes esenciales y significativas, no sean rastreadas por Google u otros buscadores correctamente.
Después de usar Lazy Load en una página podemos medir su velocidad de carga, usando la herramienta Pingdom Website Speed Test u otro similar, para verificar su aplicación. Ademas verificar su Puntuación de PageSpeed Insights.



Imágenes que solo cargan al desplazarnos hasta aquí


Imágenes de ejemplo publicadas originalmente en otras páginas, que solo cargan si nos desplazamos hasta donde se encuentran cada una de ellas insertadas.
Las dos primeras muestran el resultado de las pruebas de velocidad y la optimización de esta misma página, en los servicios de Pingdom Website Speed Test y el de PageSpeed Insights, que recomendamos más arriba.
Prueba de velocidad de esta página en el servicio de Pingdom
Prueba de optimización de esta página en el servicio de Page Speed de Google
Foto de la Habana Vieja en Cuba
Foto de la Habana Vieja en Cuba
Foto de la Habana Vieja en Cuba
Si has llegado hasta aquí, comprenderás la utilidad práctica del script, que podemos implementar fácilmente en nuestras páginas, para mejorar el rendimiento de nuestro blog o sitio web.
En la siguiente página lo usamos para facilitar la carga de casi 20 imágenes: Fotos curiosas, misteriosas y asombrosas en los Mapas de Google
También en otra página con varias imágenes dedicadas al Día de la Madre.

Páginas relacionadas



Comparte esta página




Sígueme en las redes sociales


Sígueme en Google Plus Sígueme en Facebook Sígueme en Twitter Sígueme en Pinterest





 
Inicio | Mapa del sitio | Sobre mí | RSS | Buscar