1. Nasir Khan
  2. SP Page Builder 3.x
  3. Saturday, 22 December 2018
Google PageSpeed rating is very low for my website. I mentioned the link below so that you can also find the issues i am facing, which are a large number of resources are blocking the rendering the pages. Can you please advice how can i overcome this issue.

Responses (1)
Accepted Answer Pending Moderation

1) Ever since Google did 2018 Speed Update, a lot of sites will fair very badly on the mobile testing.

I personally have tweaked my site before to get about 90+% ranking before the update, but after the update it dropped to 45-55%. Hence, I have been doing a lot of testing (various templates/frameworks etc) to find something that can get as high a ranking as possible. What I discovered was a portion of the it was due to the google adsense and google analytics enabled. Just a empty template site (Helix Ultimate) with these two components is likely to reduce the mobile percentage down by about 20% (ie max you can get is 80% from an empty template that could possibly get about 98% template). So if you are going to have these two components enabled, expect to only be able to optimize until about 80+%. It's going to be hard or impossible to get it above 90%.

So don't trust Google Insights reports alone. I would suggest you use it together with gtmetrix.com and webpagetest.org to try to optimize the page as best as you can. If you can improve the rating at these two sites, the google insights one will also improve.

2) So the only thing you can do is to optimize other non-google components as best as you can. I would suggest that you try to reduce the overall css and js files. As your overall page size is over 1.5MB, which is huge for mobile site considering most people download at average of 3G connection speeds. Ideally, <1MB would be best.

A typical site (including yours), the bulk of css will be the default joomla bootstrap (100+KB), SP Page Builder's css (100+KB), awesome font (30+KB), animation css, jquery (100+KB) etc.

So if you don't need things like animation, and/or awesome font, and/or even jquery, all these will reduce the css and js to make it faster. The css has render blocking is because it needs some of the css in order to build the initial page. So the bigger these css, the longer it will take for the site be able to paint the initial page. So you won't possibly be able to completely avoid any render blocking, but reducing the overall css by removing the unnecessary stuff would help a great deal.

ie ask yourself if animations are necessary, if not, don't enable it. Jquery appears to be required for some bootstrap features to work, again if you don't use much jquery stuff, removing it will also help. This is why I have been testing out many framework as I really don't like the bloat from bootstrap and dependence on jquery for some features etc.

On this there are many things that you could do, one is rather than load all the default bootstrap css, if you don't use everything, then add in those you need into a custom.css.

As for the SP Pagebuilder css. I noticed, that if you can also only load those you use, to reduce the page size. But everytime you update to a new version, you will keep having to update this. So I left this alone for now. I really wish that there is an option to selectively select only the features you use, and it will get compiled into a custom css just with features you use.

There are a few disable jquery/bootstrap plugin that you can help. But unfortunately, for SP Builder, it still requires bootstrap for some of the common elements, so removing it totally isn't going to work well, unless you extract out the css that is required into your own custom.css

3) Those additional calls to like google api fonts is also considered part of render blocking. So rather than have separate cdn serving the fonts, a single fast cdn source will help (less DNS lookup), especially since you have jch optimizer installed which can compress all the css / js into a single file.

4) The latest Google Speed Update also made lazy loading images a requirement for fast performance. So this is something you also need to look at. Or try to minimize adding too many images into one page (if not using any lazy loading). If you use jch-optimize pro, there is an option to enable this, but I find that it will require jquery. I think there is some other lazy loading that you could use that don't rely on jquery, so that you can remove the jquery completely.

5) Ideally, if you can find a template that has a light CSS and JS framework (that preferably don't use jquery), that would save a lot of unnecessary JS bloat. In this respect, I like the uikit framework better than bootstrap, as nearly all features can be done without additional jquery component.

Frankly, I have been using many different framework, templates and builders, but yet to find one that has all the features I want all in one. So I still have to mix and match the different framework, plugins and builders to make the site load fast.

So far these is my experience. Hope that helps.

Warmest Regards
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 1

There are no replies made for this post yet.
Be one of the first to reply to this post!

This forum is archived

This forum has been archived. Please use JoomShaper official support system.