How to Use Optimization Settings
Stackable includes built-in optimization settings designed to ensure speed and performance while minimizing bloat on your website.
Accessing Optimization Settings
To configure optimization settings, navigate to Stackable Settings > Settings, and click on the Optimization tab.
Available Optimization Options
- Optimize Inlined CSS Styles
- When enabled, similar CSS selectors will be combined to reduce redundancy and improve efficiency.
- This is especially useful if you have modified Block Defaults.
- Disable Lazy Loading for Images in Carousel-Type Blocks
- If you experience layout or spacing issues when using images inside carousel-style blocks, disabling this setting may help resolve the issue.
By adjusting these settings, you can optimize your website’s performance while maintaining design integrity.
Important: The following setting is for Stackable version 2.17.x and below, and is no longer present/used in newer versions.
How to Change Optimization Settings
There is an option to choose whether to load the JS and CSS files only when Stackable blocks are used in the page, or to load them across the entire site.
- Navigate to the WordPress dashboard and then go to Settings and then Stackable
- This page will open where you will see Optimization Settings
Optimization: Frontend JS & CSS Files
The normal behavior for Stackable is to load all the CSS and JS files across all pages, which total around 30kb.
Since the JS and CSS are always loaded, it would have large benefits if you have minification and optimizations from other plugins such as Autoptimize. This would mean that your website visitors would only have to load 1 optimized JS and CSS file across the entire site, instead of multiple large optimized files. Given that, visitors would navigate faster through the site since the optimized file would already be cached by the browser (this is dependent on the website).
If you like to change the JS and CSS loading behavior and to only load these files in pages that use Stackable blocks, then toggle this setting to Load only in posts with Stackable blocks.
Take note that with this option turned on, it's possible to have a case with optimization plugins where the site would end up with different large JS and CSS files depending on what page the visitor is on. This might produce a slower browsing experience for your visitors.
- e.g. if a visitor went to the frontpage that used Stackable blocks, and then visited the blog page, then they would potentially load 2 different large JS and CSS files