Build Faster Websites with Lazy Load in SP Page Builder v3.7.0 - JoomShaper

Build Faster Websites with Lazy Load in SP Page Builder v3.7.0

19 February 2020
Hits 9,952
5 min read
Build Faster Websites with Lazy Load in SP Page Builder v3.7.0

Since the inception of SP Page Builder, it has always been all about empowering you to build great websites. Arming you with the best features to make your imagination come true. After providing Interactions, Blend Mode, Context Menu, Inline Editing, and a ton of other groundbreaking stuff, we can now proudly say that SP Page Builder has come a long way. 

However, today is all about making your website perform better. The spotlight of this update is lazy loading. It is a revolutionary way to make your website faster. We’ll dig dipper on why and how SP Page Builder does it. But first, let’s have a brief look at the changelog.

Full Changelog of SP Page Builder v3.7.0 Pro

  • New: Content lazy loading option 
  • New: Carousel option in the Clients addon
  • New: Image filter and hover options in the Clients addon
  • Update: 2 map styles (Open Street Black/White, Hike Bike) have been removed due to API not responding issue
  • Fix: Non-numeric value issue in the Testimonial Carousel addon
  • Fix: Inner Row margin: auto not working on the front-end issue

What is Content Lazy Loading?

Before understanding lazy loading, we need to first understand how a browser loads websites. When you load any webpage on a browser, all contents of that page are loaded simultaneously. When the entire content is downloaded, you get to see the webpage. This process takes up a lot of time, bandwidth, and memory load. Users have to spend unnecessary time waiting, thus increases the bounce rate of your website.

On the contrary, when you have lazy loading enabled, all content (which include images, videos, iframes) of the webpage does not load at once. Only a certain portion of the webpage is loaded, and the rest of the content loads when users scroll down to them.

Types of Lazy Loading in SP Page Builder

In today’s update of SP Page Builder, you’ll have two types of lazy loading. We have provided built-in native lazy loading for the Chrome users. The native lazy loading postpones the loading of the resources until users reacher to a calculated distance from the viewport. 

However, there number of users not using Chrome as their browser is massive and for them, SP Page Builder will be using IntersectionObserver’s Coming into View. 

How to Enable Lazy Loading on Joomla Sites?

Websites that are built using SP Page Builder, can now use content lazy loading with only one click. You can enable lazy loading from the Global Configuration. Just click on the Options button on the top right corner when you are in the SP Page Builder panel. 

Build Faster Websites with Lazy Load in SP Page Builder v3.7.0

This will take you to the global settings of SP Page Builder, from there you need to turn ON the Lazy Load button. 

Build Faster Websites with Lazy Load in SP Page Builder v3.7.0

You’ll see there is a Placeholder Image field opening up when you turn on the Lazy Load option. This image will be used initially before the actual content loads. You can host the image on any server and put the link here. You can choose any picture. However, you need to make sure you use the lightest image file possible. 

Once you enable the mentioned option, all pages created with SP Page Builder Pro will have lazy loading. Photos, drawings used in the addons of SP Page Builder including Article, Slideshow, Carousel, Clients, Image, Modal, Person, and the rest will be replaced with the dummy image. 

Carousel Option Now in Clients Addon

Yes, you read it right. Today’s update lets you use Carousel option to the Clientes addon. You can now make the brand logos of your client lively. To do so, just turn on the “Use As Carousel” button and you’ll be presented with related settings.

Build Faster Websites with Lazy Load in SP Page Builder v3.7.0

The settings are pretty self-explanatory, so you shouldn’t have any difficulty configuring it in your own way.

We have also added two of the CSS Filters and a few Hover functionality. Once you set them up according to your needs, you will have something like the following.

What Else Should You Know?

This update also brought a few tweaks to improve your experience. We have removed 2 map styles Open Street Black/White and Hike Bike from the Open Street Map addon. Since the API has not been responding properly. We have fixed some minor issues as well.

SP Page Builder is your knight in shining armor when it comes to building websites on Joomla. And in today’s update, you get an extraordinary feature like lazy loading. This will improve the users’ experience of your site and make your pages load a lot faster. What other revolutionary features you’d like to have in the upcoming updates? Put your thoughts in the comments below and help us make SP Page Builder the tool you deserve.

Try SP Page Builder for FREE!    Get SP Page Builder Pro Rate on JED

Sign up for our newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.