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 7,209
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

Comments (38)

J
jpberry
This comment was minimized by the moderator on the site

Sounds interesting. But did you fix the Font Awesome-Bug that came up with the last SP Pagebuilder update?

Al Mamun
Al Mamun    jpberry
This comment was minimized by the moderator on the site

I can confirm that there is no FontAwesome bug. If there is FontAwesome issue that means issue is coming from template. Please tell your template developer to update FontAwesom.

MD
MW Dev    Al Mamun
This comment was minimized by the moderator on the site

Joomshaper is the Developer. There are still issues in the CSS if you want to use Font Awesome on the fly. Unicode doesn't work in custom CSS like for :before or :after stuff because the new font awesome isn't fully defined (e.g. requires font weight for free version). I've fixed with customizing Helix, but yeah. Please tell YOUR developer to update FontAwesome.

Al Mamun
Al Mamun    MW Dev
This comment was minimized by the moderator on the site

If the JoomShaper is the developer of your template, so that I can grantee you that ALL Helix Ultimate based template has been updated. And for your custom CSS you need to change font family to "Font Awesome 5 Free". For all icon don't need to specify font weight but some of are need. If you can't change the font family and weight then please post the issue in forum our support engineer will help you. If no one help you then I am there for you, tag me to your post.

Thanks,
Mamun

C
Chris
This comment was minimized by the moderator on the site

Excellent changes, need to play with lazy loading, and I love the Client add-on now has a carousel option, one thing I have needed to look elsewhere for until now

Paul Frankowski
Paul Frankowski    Chris
This comment was minimized by the moderator on the site

We love it too, it's useful to present long list of logos (bussiness partners etc.) Thanks

J
joomleb
This comment was minimized by the moderator on the site

About the Lazy Placeholder image, you wrote: "This image will be used initially before the actual content loads. You can host the image on any server and put the link here"

- As far as I see you added by default a 500px x 500px image, Is that the best image dimension ?
- Where the width is the priority, I think, Am I right ?
- Is it better to host it on our Media server folder thinking to have back the best performances ?
- Do you have any type of suggestions about that image creation ?

Paul Frankowski
Paul Frankowski    joomleb
This comment was minimized by the moderator on the site

Thanks,
1) Dummy image resolution depends on the most common image size on your website, we have chosen this for demo purpose
2) Yes, in most cases keep this file in /images -- unless you have access to a very fast external server.
3) I made few tests, and png or gif file with single bg color was the smallest, fastest.

Al Mamun
Al Mamun    joomleb
This comment was minimized by the moderator on the site

We added 500x500 SVG image so dimension is not a big deal. You can add whatever image type you want but make sure the file size is small.

D
Darek
This comment was minimized by the moderator on the site

After installing the new version, the video background was completely damaged :/

A
Andrey    Darek
This comment was minimized by the moderator on the site

the same problem

Al Mamun
Al Mamun    Andrey
This comment was minimized by the moderator on the site

Please post in forum and tag me in forum pos.

W
wesley
This comment was minimized by the moderator on the site

I tried to find this option to Enable Lazy Loading but without success. Is a version of my sp page pro 3.6.10, in the case and a higher version?

Saifur Rahman
Saifur Rahman    wesley
This comment was minimized by the moderator on the site

Your hunch is right Wesley. You need to update your version of SP Page Builder to SP Page Builder Pro v3.7.0.

N
Nuno
This comment was minimized by the moderator on the site

Ken burn effects on slideshow...
It would be spectacular!!

Saifur Rahman
Saifur Rahman    Nuno
This comment was minimized by the moderator on the site

Alrighty!
But I can't promise you anything let me forward your request to the dev team.
Cheers.

Rodrigonavarrete
Rodrigonavarrete
This comment was minimized by the moderator on the site

Excelente noticia!!! Lazy load es totalmente necesario para la visualización en móviles. ¿Podrían explicar más el tema de la imágen que hay que poner al activar esta función?.... Muy buen trabajo...Felicitaciones muchachos!!

Saifur Rahman
Saifur Rahman    Rodrigonavarrete
This comment was minimized by the moderator on the site

Gracias por los complementos Rodrigonavarrete. La imagen funcionará como proxy de todo su contenido. Pero si lo encuentra complejo, déjelo en paz. Solo necesita establecer "Carga diferida" en "Sí". Y tu trabajo está hecho.

A
Andrea
This comment was minimized by the moderator on the site

Good!
But please add a video guide of Animations & Interactions.
Thanks

Saifur Rahman
Saifur Rahman    Andrea
This comment was minimized by the moderator on the site

Sure Andrea will do. Please hold on for a while.

Grazie.

A
Andrey
This comment was minimized by the moderator on the site

I have sppb module on head of my site. Lazy load is good for invisible part of site ut for head it is bad. I think that if i can turn off lazy load on any section it would be great.

Saifur Rahman
Saifur Rahman    Andrey
This comment was minimized by the moderator on the site

Thanks for letting us know your requirements. We'll think about it.

M
MF
This comment was minimized by the moderator on the site

Strange, no updates for SP builder is found, the site is kinda stuck on 3.6.4. How to force update?

Kawshar Ahmed
Kawshar Ahmed    MF
This comment was minimized by the moderator on the site

Please download the latest version and update it manually. In order to update please login to your Joomla admin then go to extensions manager and install.

Thanks

Saifur Rahman
Saifur Rahman    MF
This comment was minimized by the moderator on the site

Hi MF, if you need further assistance, you can have a look at this step by step guide.

F
filippo
This comment was minimized by the moderator on the site

i'm a Chrome user with imac, I tried to find this option to Enable Lazy Loading but without success.the link image remains fixed on the page. why?

Al Mamun
Al Mamun    filippo
This comment was minimized by the moderator on the site

Can you please post in forum?

MD
MW Dev
This comment was minimized by the moderator on the site

STOP Introducing new things before you fix the 100000000 bugs that your customers keep reporting OVER and OVER and OVER in the forum.

Al Mamun
Al Mamun    MW Dev
This comment was minimized by the moderator on the site

Hi, Can you please give me 100000000 bugs list? Trust me I will fix every bug for you.

Thanks

Pavel
Pavel    MW Dev
This comment was minimized by the moderator on the site

I am also a user like you. 90% of the bug reports on the forum - is the user error or misunderstanding.
SP PB has far fewer bugs than most similar, third-party development. Do not mistake the one who does nothing.
----------
Thank you, Joomshaper guys. As always, great job!

Al Mamun
Al Mamun    Pavel
This comment was minimized by the moderator on the site

Thank you very much for your true opinion.

FG
Fred Grotum
This comment was minimized by the moderator on the site

Hi - lazy load looks very nice if the images load with a slight delay - and it's even better if the page loads faster - good job!

But the predefinied function for using images in SPP "Open in Lightbox" and "Image Overlay" does not work, when activated lazy load.

Please fix this. Thanks!

Al Mamun
Al Mamun    Fred Grotum
This comment was minimized by the moderator on the site

Ok, We are checking the issue.

Dmitry Goncharov
Dmitry Goncharov
This comment was minimized by the moderator on the site

https://developers.google.com/speed/pagespeed/insights

And what is the acceleration of page loading? When measuring the speed with lazy loading enabled, the performance is much worse than without it.

Paul Frankowski
Paul Frankowski    Dmitry Goncharov
This comment was minimized by the moderator on the site

Let me explain something.
It's not to cheat speed tester, Google tools load all content anyway. It's for a normal HUMAN browse.
---
Using page speed insights I get different resolutions on this same website every hour, even when I do not change anything.

Krzysztof
Krzysztof
This comment was minimized by the moderator on the site

Hi
I tested lazy load on mobile device. Images isn't loading correctly is blurred. When I disabled lazy load in SPP - all images loading good. Whos had some issue?

Paul Frankowski
Paul Frankowski    Krzysztof
This comment was minimized by the moderator on the site

It's local problem only, related to browser cache. You should always test on 2 smartphones, using 2 browsers.

DB
Daniel Balazs
This comment was minimized by the moderator on the site

hi!

i tested it and i love lazy load. but my partners reported me that their sites are "jumping" when lazy load is on. but the site is faster that is for sure...is there anyone who has got the same issue?

thx JoomShaper team btw!!

There are no comments posted here yet

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.