Superia Commerce

Keep up to date with what's going on at Superia

We're always doing something new, we will try and keep the blog up to date so you can follow the journey with us..

Is your web page loading slowly? Try lazy loading...

What is it and how does it work?

Lazy Loading is a technique that delays loading of images when the page is first opened. They are instead loaded when called for. Meaning, if you don’t scroll to the bottom of the web page, the images placed there will not be loaded.  

Lazy Loading works a bit like this; you click onto a page and begin to view the content, scrolling down the page as you go; because the page does not fully load straight away, any images on the site are replaced with a “placeholder” image.  A placeholder image is designed to maintain the pages structure since there are no actual images loaded yet. When you scroll down the page, you will scroll a placeholder into the viewport which is then quickly replaced by the final image, allowing you to view it.

Why should you use it?

Most lazy loading solutions operate by only loading images if the user scrolls to that specific point of the web page, becoming visible within the viewport, so the images will not be loaded until someone visits that area of the page. In turn, this will lead to savings in bandwidth, which will benefit not only desktop users but for those accessing the web on mobile devices too.

Some key factors on why you should implement Lazy Loading into your website are:

  • By lazy loading images, users can connect to the content faster as only a section of the web page has to load before use. Due to the use of placeholders, this occupies the webpages space until the content is needed, meaning a faster load speed.
  • The site will see a higher customer retention as the content is continuously fed to the visitor which in return will reduce the likelihood of them leaving the page.

As a whole, adding lazy loading to your site will make it load faster, it will save on bandwidth, however there is a downside to this if you are still using fairly large images, when the user scrolls down the page and your image comes into the viewport it will start to load, but if it's fairly large it might take a short while to show meaning that as soon as it does it could pop up and interupt the user by making it look choppy.

When incorporating Lazy Loading into Superia, we decided to do it slightly differently, when you page loads it loads only the placeholder images as normal Lazy Loading, then when it's loaded the viewer can start to use the page, at this point we then load all of the other images, even the ones out of view, meaning that when the user scrolls hopefully the images will already be there to view, so a nice workaround that's inbetween full Lazy Loading and not using it at all.

How can you use Lazy Loading?

We have already built this into your product panels, so all of your product thumbnail images are already using Lazy Loading, you don't have to do anything, and as the site grows we will work it more into to other things too. However your page content images won't be using Lazy Loading by default, but you can amnually add it to your images by editing the source code of your page, some might find that this is a bit more advanced so might want to skip it.

Edit your source code and find your image which should look something like this;

<img height="100" src="/file-manager/link-to-your-image.jpg" width="200" />

All you need to do is to add a class to the image and a data tag like so;

<img class="lazy" height="100" src="/images/blank.png" height="100" data-src="/file-manager/link-to-your-image.jpg" width="200" />

So the class we added is called 'lazy' this class tells the website that this image wants to use Lazy Loading. Next we updated the src to point to a placeholder, in this case '/images/blank.png", this placeholder already exists on your website and is a 1px x 1px transparent PNG, it's tiny in size so perfect for a placeholder image. Lastly we've added a data tag called data-src which holds the actual loaction of your image that will be loaded when the Lazy Loading kicks in. And that's it!

Bonus Speed, use WebP Images!

To speed it up even more you can incorporate WebP images, to do this just add anothe data tag called data-srcwebp like so;

<img class="lazy" height="100" src="/images/blank.png" height="100" data-src="/file-manager/link-to-your-image.jpg" data-srcwebp="/file-manager/link-to-your-image.webp" width="200" />

this new tag will point to the location of your WebP version of the images which should be much smaller than the original PNG or JPG that you were using, and when the Lazy Loading kicks in, if the WebP version exists it will load this instead, helping with the speed even more.

For more information on WebP and what it is, read our WebP blog article.


Post a Comment


Please log in to your account to post a comment


Enter your name and email address to make a post
Your email address will not be publicly displayed