Page Speed issues with SP Page Builder Pro - Forum | JoomShaper
Solved SP Page Builder

Page Speed issues with SP Page Builder Pro

Asked by MICHAEL 4 years ago Last activity 4 years ago

Hello and thank you in advance for your time.

We own SP Page Builder Pro. We use it to create simple animated modules, rather than whole pages.
However, including even the tiniest module into the page, results in 4 stylesheets, 1 Google font and 4 scripts added with it, not to mention the inline styling and amount of DOM elements.
GTMetrix estimates that these 9 assets take a total of 10.969 ms to load.
Even if that isn't the true amount of time that they require, that's still A LOT of styles and scripts for a simple module, don't you agree?

Within these styles and scripts is the animate.css, the Magnific Popup and jquery.parallax.js.
Magnific Popup's style and script are added twice. The second time there's a double slash after the domain name, at the beginning of the URL path.
We do not use Magnific Popup anywhere in our site.
We don't have parallax scrollling.
We don't want to load a full Google font (WITH ALL its sizes and variations) that we ALREADY have on our website.

There's absolutely no option to configure, as to whether we would like to load all these things or not.
We also can't find any option to configure which sizes and variations of the Google font to load, or if we want it at all.

We have SP Page Builder Pro 3.8.3.
SP Page Builder is in Production mode.
We are on a shared hosting.

Please advise.

Accepted answer

Marked as the solution
Paul Frankowski Senior Staff
4 years ago · edited

For example:

  1. magnific-popup.css - is loaded only when image, image_layout, image_overlay, modal, optin_form and instagram addon is used
  2. jquery.magnific-popup.min.js - like above, it's loaded by site.php from each of those addons.
  3. animation.css as I rememeber can be disabled from SPPB Options.
  4. jquery.parallax.js - is used in those files:

modules\mod_sppagebuilder\tmpl\default.php
components\com_sppagebuilder\views\page\tmpl\default.php

16 more replies

Oldest first Newest first Most helpful
Toufiq Senior Staff
4 years ago

Hi there,

Thanks for contacting us. Sorry for the inconvenience. Will you please provide me the Joomla administrator access to check the issue? I will check & get back to you soon. 

-Thanks

joe
4 years ago

I am just subscribing to this thread.

Do you have examples of the "simple animated modules"?

MICHAEL Asked this
4 years ago

@Toufiq I am writing temporary login credentials in the Hidden content.
Thank you for looking into it.

@joe See Feature 3, Feature 4, Feature 11, Content 7 and Testimonial 2 on this page:
https://www.joomshaper.com/page-builder/blocks

Toufiq Senior Staff
4 years ago

@MICHAEL

*See Feature 3, Feature 4, Feature 11, Content 7 and Testimonial 2 on this page:

Are you sure your issue occurred for this elements? Cause, you are using Flex Template and which is overridded our page builder maximum addon. You should check first with Joomla Protostar Template. Thanks

MICHAEL Asked this
4 years ago · edited

I can't be sure of the exact elements used. It's true that the template has overrides for SP Page Builder, but we have deleted many of them, because they were either completely disfunctional or far from the SP Page Builder prototype that we wanted to have.

I am providing below, a link to a menu item with the Protostar template applied, as suggested.
The aforementioned issues remain. Namely:

  1. Magnific Popup is included while not used. Twice. Impact on loading time: 4138ms or 2069ms (if the system is smart enough not to load the same file with a different path twice)
  2. Jquery parallax included but not used. Impact on loading time: 869ms
  3. Google Font loaded, with ALL font-styles and font-sizes. Impact on loading time: 150ms

All of the above assets are loaded but not required. SP Page Builder loads 2 more CSS files with 3.1s loading time.
Measurements done with GTMetrix and Protostar template.

Including SP Page Builder modules on our page has a total impact of 8.2s or 6.1s in a page using Protostar. That is a minimum of 6 seconds WITHOUT templates and additional extensions.

Thank you again for your time.

MICHAEL Asked this
4 years ago

Any updates on this would be appreciated.
Thanks again.

Pavel
4 years ago

Google Font loaded, with ALL font-styles and font-sizes. Impact on loading time: 150ms

Google Font is the only thing you can affect. Just remove any font settings in blocks and never use it.

Everything else is a fee for the possibility of visual editing. Any page builder has all these problems. It just can not work differently.

Also, in the SP PB module there is a drawback that all its styles are placed inline in Body along with the rest of the module code. Therefore, use SP PB module only if it is justified. I think it works so, because it is can not work differently too.

MICHAEL Asked this
4 years ago

Thank you for your response!
I have removed the Google font from the template, and only left in inside PageBuilder, so that at least it isn't loaded twice. However, that IS STILL NOT a proper solution, because in the template, I can control exactly which font-styles and sizes to load from Google. PageBuilder could offer this with a simple global option.

What you say about SP Page Builder is very interesting. If I understand correctly, you are saying we should just accept the fact that SP Page Builder will add some unnecessary codes and files. This is very interesting, because in your blog, in an article with the title "Ultimate Guide to High Google PageSpeed Score for Websites on Joomla", you advertise SP Page Builder using the following words:

Unreliable page builders can make your site bloated by adding unnecessary codes and files thereby slowing your site down. But SP Page Builder won’t do that!

I am willing to accept the 10000 lines of CSS compressed into the sppagebuilder.css, as well as the need for animate.css and the 3000 lines of JS compressed into sppagebuilder.js, but don't you think that this is going too far?

If you are saying these files NEED to always be loaded, why don't you include them into sppagebuilder.css and .js, so that we can AT LEAST have 2 files loaded instead of 10? This is web optimization 101. The first page of the first lesson.

Suggested solution

Either add options and allow us to select if we want to include these files (with our own risk of breaking our sites) or include them directly in sppagebuilder.css and .js respectively.

Pavel
4 years ago · edited

I have removed the Google font from the template, and only left in inside PageBuilder

You should remove it from PageBuilder, not from template.

you advertise SP Page Builder using the following words

It's not my words. I am not an employee of Joomshaper team, therefore, I can afford the critical comments written above.

I have long been talking about these problems. But there are no changes. Unfortunately, there is no reaction to this problem from the developers.

Constantly using Page Builder in my work for several years, I studied how it works and share with you my experience. Perhaps SP PB module should have been designed in a different way. But making changes can now lead to the fact that the sites of many users are collapsed.

There is always a fork of ideas when creating software. And choosing one or another way, in the future it is difficult to get away from it.

There are many other points related to optimization and SEO which are not quite thought out. There are such problems in many products of other developers. And we as users have to humility and look for workarounds.

I recently had a client who asked to make all the work in the source code without using any page builder and template-framework. And then I was able to make a page speed values for mobile 98, for desktop 100. (Joomla 4, overrided Cassiopea, HTML/CSS/JS).
And I was happy that I could build everything I want. Only this approach can give high page speed. Any page builders and templates-framework have too much on board.

MICHAEL Asked this
4 years ago

My apologies. I appreciate your response. I thought this was someone from the staff.

It is true that we cannot expect perfect page speed values. However, I believe we all agree that a load of 10 asset files for every page where you want a small SP Page Builder module is irrational.

No matter what decision forks they have faced in the past, they should always allow users to configure their product. I am talking about 4 little options in an "Advanced" tab of the SP Page Builder component options. (which is inaccessible to anyone who doesn't know where to find it in the first place! ) And then, in code, it's merely an if block around the part that includes these assets in the document.

I would appreciate an answer from the staff, over a paid product.

Thanks again.

Log in to reply.