Does the improved CSS Loading features work?

  • 20 July 2021
  • 4 replies
  • 90 views

With a website whose JS and CSS comes to more than 2Mb, I’m super excited to hear of the new performance improvements included in the latest release.   However, I’ve not seen any performance improvements or reduced page sizes.

Like many people, I’m using caching tools recognised by Elementor such as WP-Cache, SG-Optimise and Cloudflare (no.. not all at the same time), and I wonder if these now work against Elementor.

Take for example, SG-Optimiser which caches and combines CSS and JS.   If it does this at a site level, it’s not going to recognise or support dynamic CSS caching per page/widget?

I’ve raised a support ticket, but Elementor aren’t able to offer any advice as this relates to 3rd party plugins.   

Does anyone else have any positive experience with Elementor, using SG-Optimiser and Cloudflare, and any recommendations on the right settings?

Thanks.


4 replies

Userlevel 4
Badge +2

Yes, Improved CSS Loading works great on my website and it reduce the size too but it can still improve further.

Before - https://gtmetrix.com/reports/foxscribbler.com/PLN0EWfb/

Before  improved  CSS loading Experiments

After - https://gtmetrix.com/reports/foxscribbler.com/qWD8AVE7/

After improved CSS loading Experiments

Stop combining CSS and JS, your site might already supports HTTP/2.

Thanks for the positive feedback.

Are you using either SG-Optimiser or CloudFlare?  Both offer to combineCSS and JS, and the recommendation is to switch off both?

Userlevel 4
Badge +2

@Stevend I am using Cloudflare free plan with APO. There is no option available in Cloudflare to combine CSS and JS and it will never be available because there is no advantage in Combining JS and CSS unless your server runs on bad hosting with HTTP/1.

Userlevel 4
Badge +1

Wild guess - but did you try regenerating CSS & data in “Tools”? Not sure if it is needed for that experiment.

Then, after that purge your caches.

A few ideas to debug:

  • Running GTMetrix with the setting off and then again with the setting on to see if there is any difference at all in the resources output.
  • Go to 2 different pages and test -- are you getting the same CSS file? I’m not familiar with SiteGround Optimiser, but I can’t really see how it could generate a sitewide CSS file. I am on Cloudways and use their Breeze caching  and get a unique minified, composite CSS file for each page.
  • Use the inspector to examine the CSS and search for a widget class that know you are not using for a particular page, but are elsewhere in the site, to see if it is still included.

Looking forward to hearing more!

Reply