fr1nge.xyz/themes/after-dark/docs/content/feature/lazy-loading.md

+++ title = "Lazy Loading" description = "Defer loading of images, iframes and scripts." categories = ["experience"] tags = ["performance", "images", "graphics"] features = ["code highlighter", "related content", "snippets"] copyright owner = "Josh Habdas" date = "2019" license = "agpl-3.0-or-later" +++

After Dark uses {{< external href="https://github.com/aFarkas/lazysizes" text="lazySizes" />}} to prioritize loading of certain external resources to improve page load times and help reduce overall bandwidth consumption.

Lazy loading works automatically for Custom Homepage thumbnails, Post Images and when using the Figure Shortcode, or related Snippet, as seen here:

{{< figure src="https://source.unsplash.com/Y-w15LfHO8w/5184x3456" lqipsrc="https://source.unsplash.com/Y-w15LfHO8w/1080x720" caption="Be Creative" attr="AK¥N Cakiner" attrlink="https://unsplash.com/@akin"

}}

To use lazy loading in Custom Layouts or when creating your own Shortcodes adding the lazyload class and relevant data attributes as shown here:

<!-- non-responsive -->
<img data-src="image.jpg" class="lazyload">

<!-- responsive with automatic sizes calculation -->
<img
  data-sizes="auto"
  data-src="image2.jpg"
  data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w"
  class="lazyload">

<!-- iframe example -->
<iframe frameborder="0"
  class="lazyload"
  allowfullscreen
  data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

See {{< external href="https://github.com/aFarkas/lazysizes" text="lazySizes" />}} for additional information and examples.