:lock: Secure and accessible dark theme static website generator for Hugo https://after-dark.habd.as
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

lazy-loading.md 1.7KB

+++ 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 -->
  data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w"
<!-- iframe example -->
<iframe frameborder="0"

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