Lazy Loading

Defer loading of images, iframes and scripts.

After Dark uses 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:

Be Creative
Be Creative AK¥N Cakiner

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 lazySizes for additional information and examples.