NitroPack Lazy Loading Feature for Images

How does the NitroPack Lazy Loading feature work?

Lazy Loading is an approach to load offscreen images on a web page only when required. This way, NitroPack can improve the page’s loading time without reducing the actual page size. 

What is happening is that users can only view the first images when they open a website. The images below the above-the-fold do not need to be loaded right away. The Automatic Image Lazy Loading from NitroPack will load images only when they are present within the viewport.


What images benefit from NitroPack’s Lazy Loading?

➡️Standard images

By standard images, we mean any image utilized via <img> tag within your HTML. All images found within that tag should be Lazy Loaded by our service.

➡️Background images

By background images, we mean any image assigned to a different tag than <img>.
For example, valid tags are:

  • <div></div>
  • <span></span>
  • <section></section>
  • <a></a>

and etc.

The complexity and variety of ways to apply a background image to an element allow NitroPack to apply Automatic Image Lazy Loading only to background images that were placed within the Inline styling of the specific element.

Example of a working scenario:

<div class=”image” style="background-image: url(image.jpg)"></div>

Example of non-working scenarios:

<link rel=”stylesheet” href=”styles.css”>
<div class=”image”></div>
.image{
background-image: url(image.jpg);
}
<div class=”image”></div>
<style>
.image{
background-image: url(image.jpg);
}
</style>

As you can see, if the background image is added another way, such as in a CSS file or internal CSS <style> tag, it cannot be LazyLoaded on our end.

➡️Iframe elements

An inline frame (iframe) is an HTML element that loads another HTML page within the document. It essentially puts another webpage within the parent page. They are commonly used for advertisements, embedded videos, web analytics, and interactive content.

NitroPack easily detects elements with tag <iframe> and lazy loads them.

What images can’t benefit from NitroPack’s Lazy Loading?

  1. Background images loaded by External CSS file.
  2. Background images loaded by separate Inline CSS <style> tags.
  3. Images loaded by JS, both External and Internal.

How to confirm NitroPack is Lazy Loading an image?

Example of an element before Automatic Image Lazy Loading:

<img width="93" height="93" src="https://yourwebsite.com/picture-1.png" loading="lazy" alt="image">

Example of an element after Automatic Image Lazy Loading:

<img width="93" height="93" alt="image" nitro-lazy-src="https://our-cdn-domain.com/picture-1.png" class="lazyloaded" nitro-lazy-empty="" id="AdwWAHJLR" src="https://our-cdn-domain.com/picture-1.png">

The easiest way to check if an element is Lazy Loaded on our end will be to look for the nitro-lazy-src attribute in the website’s source code.

⚠️Keep in mind that NitroPack will not lazy load images in the above-the-fold viewport (the visible section of your website before scrolling), as they are loaded instantly.

To do so, Inspect the image via your browser’s Developer Tools.

You may find the image on the page and right-click the image, then select “Inspect”.

Your browser’s Developer Tools console will open, and you will see the DOM tree with reference to the image.

image3.png

If you verify that an image is, in fact, not LazyLoaded, please contact our Support team to resolve the issue.


Automatic Image Lazy Loading feature in the NitroPack settings menu

You can locate the Lazy Loading settings in your NitroPack dashboard.

Simply navigate to your NitroPack dashboard > Settings > Images > Automatic Image Lazy Loading.

image2.png

image1.png

Here is some additional information about every setting:

➡️Size images preemptively

It makes sure that images get explicit width and height before the image is loaded.

➡️Lazy load iframes

You can choose whether you want to have your iframes lazy loaded or not. 

➡️Specify CSS selectors to disable image lazy loading for matching elements

You can specify for which CSS selectors you want to disable our Lazy loading. Especially useful when you want to keep the lazy loading for most of your elements and have a bunch of images that don’t need to be delayed.

➡️DOM-rebuilding slider compatibility

For a small performance cost, you can get your slider compatible with our lazy loading during the DOM initialization.

➡️Detect theme video overlays

With this setting enabled, NitroPack will display that overlay instead of the video thumbnail before the video is loaded.

➡️Loading threshold

Elements approaching the viewport will be loaded depending on when they reach the configured threshold.

➡️Hidden image loading

  • Default - have the images loaded as soon as they enter the viewport.
  • On visibility change - load them when their visibility change.

📌 If you need any assistance or have questions, you can always reach out to our support team at support@nitropack.io or via this link: https://support.nitropack.io/hc/en-us/requests/new

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.