Caching System | SP Page Builder (Pro) 3.x - Documentation | JoomShaper

SP Page Builder (Pro) 3.x

Updated Last: 26 May 2023

Caching System

SP Page Builder implemented several site speed boost techniques like CSS compression and Production Mode. Since version 3.6.2 we added native Joomla caching support. If you use Joomla’s caching option, now the pages and modules built with SP Page Builder will also be cached. A speed boost is ahead of just clicks away!

Production Mode

The production mode in SP Page Builder automatically stores the CSS code that generates from all the addons in a web page into a single CSS file (page-ID.css).  A separate css file is generated for each Page and only one is loaded per page.  When page CSS styles data is cached,  pages can load faster. 

Up until now, the addon CSS had been generated inside the header tag, but with the Production Mode enabled, all the code will automatically be stored in a separate CSS file.

To enable this mode, go to  SP Page Builder > Options > Production Mode > Yes.

To better understand the application of this mode, have a look at the Before state of a website.

SP Page Builder 3.4 Pro -- before Prodution Mode ON

In the above screenshot, you can see the CSS code generated from all the addons reside in the <head> tag, but when the Production mode is enabled, they are stored in a separate CSS file.

SP Page Builder Pro - Producation Mode

So you see, a new CSS file is automatically created to store the CSS code that generated for the webpage. Styles included in this file are cached.

Location of this file(s): media/com_sppagebuilder/css

Purge CSS - this option is for cleaning the CSS content of all page-ID.css files. It's useful when you made style changes (new padding, background, colors) on any Page.  iIf you make an edit to one of your pages and find that you can’t see the changes immediately but want them to be available, that would be a good reason to manually purge the cache.

 Clean CSS files

Notice! Some additional CSS compressors from plugins may damage code inside css file(s), so we cannot give you any warranty about it.

How to enable Joomla Cache
Go to your Joomla control panel > System > Global Configuration. Under the System tab, you’ll find the Cache Settings section where you can turn caching on or off. To know more about Joomla caching, visit this tutorial.

Tip! After adding changes in cached Pages remember to clear Joomla cache to see differences immediately.