Qué es Lazy Load y por qué usarlo.

Lazy Load se usa para cargar los recursos de una página web (imágenes, iframes) solamente cuando se necesiten, mejorando la experiencia del usuario y haciendo que la velocidad de la web sea más alta.

Estas mejoras están dentro de la categoría optimización web , el propio Google reconoce que usar la carga en diferido proporciona mejores puntuaciones en Page Speed.

En resumen, Lazy Load aumenta la velocidad de carga, reduce el consumo de recursos y Google lo tiene en cuenta. Está bastante clara la relevancia de cara al posicionamiento en google.

Cuando aplicar lazy load.

Todos los recursos que estén fuera de la pantalla deben de usar lazy load. Es decir, los que cuando entramos en una url no son visibles sin hacer scroll.

No tiene mucho sentido cargar 20 imágenes cuando el usuario está visualizando un bloque de texto, ya que es muy posible que el usario no llegue a verlas, evitando así un consumo innecesario de recursos.

Como Implantar Lazy Load

Existen diversas forma de de implantar la carga en diferido en nuestra web:

• Programación a medida. Se puede hacer un un desarrollo a medida con Javascript para detectar cuando el usuario hace scroll y mediante eventos obtener la imagen o iframe.
  
• Librerías.
  • Lazysizes. Una de las mejores bibliotecas y fácil de usar. Se haría de la siguiente forma:
    • Añadir la class lazyload.
    • Definir la imagen que se cargará en segundo plano mediante data-src.
    • Opcional atributo src, para mostrar una imagen de menor calidad o con poco peso mientras se carga la imagen.
      

<img data-src="image.jpg" class="lazyload" />

• • Yall.js. Otra opción recomendable, es una biblioteca que usa «Observer» y mediante controladores de eventos maneja la carga en diferido.
    Es compatible con la mayoría de navegadores y tiene poco peso.
    
    
• Nativo. Incluida por el propio navegador, es la más fácil de usar y la que apenas consume recursos. Se utiliza tanto en iframe como en imágenes. El único problema que no todos los navegadores la soportan, por ejemplo Safari aún no la tiene incluida.
  
  Una buena forma de usar la forma nativa, sería primero comprobar si la etiqueta loading es aceptada por el navegador, en caso afirmativo se usaría de forma normal, en caso negativo podríamos usar una librería externa o programación a medida.
  

//Primero para detectar si tiene carga nativa
if ('loading' in HTMLImageElement.prototype) {
  // soportado por el navegador, usamos carga nativa
    <img src="product-4.jpg" loading="lazy" width="200" height="200">
}else{
    // no soportado por el navegador, usamos librerías externas
}

Anotaciones

• No usar lazyload para aquellas imágenes que directamente se muestran al abrir la url, esas imágenes deben cargarse por defecto como siempre. En cambio aquellas imágenes que no sean visibles y haya que hacer scroll si deben de ir por lazyload.
  
• Intentar usar etiquetas img en vez de imágenes en el css, ya que lazyload no soporta la carga en diferido mediante css.