Jekyll: Bilder verzögert laden

Bilder auf einer Webseite sollten wenn möglich verzögert geladen werden, so die Empfehlung u.a. von Google. Ich habe das jetzt mal mit der Javascript Bibliothek lazysize ausprobiert und ich war überrascht wie einfach das geht.

Natürlich muss man die javascript Datei auf den Server kopieren und in die Seite einbinden

 vi  _layouts/default.html
  <script src="/js/lazysizes.min.js" async=""></script>

Dann gilt es die Bildertags richtig zu formatieren. Ich verwende das Plugin jekyll-picture-tag.rb das mir für die unterschiedlichen Grössen unterschiedliche Bilder erstellt und das html baut.

Dort ersetzte ich srcset durch data-srcset uns src durch data-src.

 <source data-srcset=\"#{instance[source][:generated_src]}\"#{media}>\n"
 <img data-src=\"#{instance['source_default'][:generated_src]}\" #{html_attr_string} > \n"

In der _config.yml gebe ich dann den Bildern noch die notwendige css Klasse mit auf den zuweisung

 picture:
 ....
 ----
       attr:
         class:  lazyload
         itemprop: image

Das Ergebnis ist beeindruckend und bringt besonders auf der Startseite oder Blogbeiträgen mit vielen Bildern einen spürbaren Geschwindigkeitsvorteil