Gridbox is Faster Than Ever. Core Performance Improvements

Gridbox is Faster Than Ever. Core Performance Improvements

We are always looking for performance solutions for Gridbox sites. During the last weeks, we have been working on improving the Gridbox core. It's time to introduce Joomla website builder Gridbox 2.12.4 with performance improvements up to 10x. Gridbox is faster than ever!


Attention!

This update includes serious changes in the Gridbox core. We highly recommend making a backup before updating your current version!


Gridbox CSS File Compressed Up To 10x


Gridbox is a huge system that includes a really large number of components and website building tools - pages, plugins, fields, apps, eCommerce, etc. All these components include their own CSS styles. The CSS stylesheet of the Gridbox CSS files increased together with adding new options and features. We were forced to find a way to reduce the CSS and get the best performance for sites based on Gridbox.

After a long and painstaking work of reviewing each file, we achieved first-class results - we managed to reduce the size of the CSS up to 10 times. What have we done?


Gridbox.CSS Divided Into Smaller Ones


gridbox.css file was divided into a hundred small CSS files. In Gridbox 2.12.4 each Gridbox plugin comes with its own CSS file.

Gridbox.CSS Divided Into Smaller Ones - Performance Improvements of Joomla Website Builder Gridbox

Loads Only Used CSS Styles


Due to the fact that we have divided the gridbox.css file into hundreds of small CSS files, in Gridbox 2.12.4 page loads only used and necessary CSS styles. This is an incredible improvement that significantly reduces loaded CSS file size.

Loads Only Used CSS Styles - Performance Improvements of Joomla Website Builder Gridbox

Global Library CSS


In Gridbox 2.12.4, we also made improvements and significantly reduced the global-library.css file. In the same way, as for the gridbox.css, the global-library.css file has been divided. As a result, page loads only used CSS element styles from the Global Library.


Inline CSS Styles


All necessary CSS styles are displayed inline, directly in the HTML. This technique reduces additional requests and speeds up page loading.


Cleaner CSS for Mobile Devices


One of the biggest improvements in reducing CSS is optimizing generated stylesheets for mobile devices.


Gridbox Performance Comparison


We can talk for a long time about the work done to improve performance. But it's better to look once. We have formed a comparative table of Gridbox performance to show you the results of our experiment. Here you can see the comparison criteria and the result of the performance gain. Let's compare!


Gridbox

2.12.3

2.12.4

Page styles.css

442 kb

46 kb

↓ 90%

Theme styles.css

114 kb

13 kb

↓ 89%

Gridbox.css

329 kb

40 kb

↓ 88%

DOMContentLoaded

797 ms

384 ms

↓ 52%

Page load

1.49 s

471 ms

↓ 68%

HTTP requests

22

16

↓ 27%


Conclusion


The process of improving performance is endless, there is no limit to perfection! We will always look for ways to achieve excellence and provide high-quality optimized solutions. But also don't forget that a lot depends on you!

To get high-performing websites, you need to change the way you build websites! Hundreds of factors affect website performance. Use CDN for ready-made sites, start using local fonts instead of loading Google Fonts, create your own icons library with only necessary icons, etc. All this is possible with Gridbox. Creating high-performance sites is more than enabling a few toggle buttons. Start right now!


Changelist

v.2.12.4 - 04/11/2021

  • Improved: Gridbox core performance;
  • Added: Styles :active for a menu item with a .caret class;
  • Added: Hover option for the background in plugins Blog Posts, Search Result, Store Search Result, Recent Posts, Related Posts, Post Navigation;
  • Added: The state of active border, padding, margin in the menu and in the plugin One Page Menu;
  • Fixed: Conflict between two plugins Store Search on the page;
  • Fixed: Issues with activating the license in Joomla 4;
  • Fixed: Issue with copying background style in columns, rows, sections;
  • Fixed: Issue with choosing a layout in the plugin Weather;
  • Fixed: Issue with copying the Feature Box plugin;
  • Fixed: Issue with uploading a file to Media Manager when the file extension has capital letters;
  • Fixed: Increasing the quantity in the product card with a discount;
  • Fixed: Slide thumbnail with Vimeo video in the plugin Slideshow.