A must have!

Interesting. I am using the plugin with Divi, and like you I got a massive improvement in scores. I’ve still got big problem with a part of Divi that Gabe has looked at and offered a solution but it will cost. This minified module – https://rivergippingtrust.org.uk/wp-content/cache/wpo-minify/1598351517/assets/wpo-minify-header-divi-style.min.css – is packed with Divi code, 90% of which isn’t needed for our site. Problem is, I can’t simply use the plugin to stop it loading as that 10% is still needed. Gabe says the only way forward is for someone to extract the parts I need and write a new module. Way beyond me, I’m afraid.

@slhctech perhaps @digtialv has cleaned up pretty much everything except the main DIVI style CSS file which has the extra unused CSS. It would be great if the guys from DIVI will do some changes in the next version of the page builder. For instance, instead of compiling everything into one file, make it load 10 files.

However, it does require some work on their end and some of their users (who are not too techie), will say that the theme is loading many HTTP requests, you never know. However, these days, it doesn’t matter as much especially since many servers support HTTP/2 and there are plugins out there that can help you decrease the number of HTTP requests. Other themes are already doing this (multiple CSS files) and it won’t be a bad idea if popular themes like Divi will start making changes.

PS: There’s a feature in Asset CleanUp that allows you to use a filter and load a different version of the original CSS file (lighter one of course). You do need to input there the alternative CSS (mostly the needed one) so you need to be careful when using it. Once the documentation for this new feature is ready, I’ll post its link here.

Thanks Gabe. Our server already supports HTTP/2 so no problem there. I think I’ll post on the Divi forum and ask if they have any plans to split the CSS down into manageable chunks.
I would love to use Asset CleanUp to load a different (smaller) CSS file but that assumes I can find someone to write it for me! How much do you reckon it would be likely to cost?

@slhctech please do so as I believe it would be a good reminder (most likely other people told them the same thing or at least they are aware of this practice) for them!

I would love to use Asset CleanUp to load a different (smaller) CSS file but that assumes I can find someone to write it for me! How much do you reckon it would be likely to cost?

Unless you’re comfortable doing this yourself, yes, you need to find a good developer that will properly create the alternative CSS file which should be at least 80% smaller in size. It’s better to leave some extra unused CSS there just in case, then end up with a broken layout. It all depends on the situation. Sometimes, I’ve removed it 100%, but this is very rare and in those instances, I was very familiar with the whole website. I knew that I will not update the theme, nor any of the plugins too soon and I went ahead with stripping all the unused CSS.

In your case, you have the homepage that loads a lot of unused CSS. However, if you add new content to that page, then that particular content might need to use CSS that was before unused. So, when sometimes does this optimization, they need to think about how the page might look in the future too. In most cases, a page doesn’t change radically so one can go ahead with the change if there’s a lot of “fat” to strip.

As for the cost of creating a smaller version of that file (saving over 600 KB in page load), a professional WordPress developer would charge a few hundred dollars reason being the fact that he needs to analyze the homepage, determine how it might look in the future (as I mentioned previously), then start using a tool such as Coverage Google Chrome and determine which CSS is used and which isn’t on both desktop and mobile view. Also, the developer needs to do various actions on that page (clicking, hovering on various elements, etc.) so that any unused CSS might become needed (e.g. a new content loaded via AJAX is shown up that has certain CSS classes that need to be kept in the final version of the purified file). You have to think of it’s worth the cost of such a task. For heavily trafficked website, with certain landing pages that need to load very fast, it might be. Some website owners though do not consider it important and they don’t mind if the visitors are waiting for an extra 0.5s (depending on the internet connection, sometimes, it could be 0.2s which is alright) delay. I hope it helps!

Some website owners though do not consider it important and they don’t mind if the visitors are waiting for an extra 0.5s (depending on the internet connection, sometimes, it could be 0.2s which is alright) delay. I hope it helps!

That, of course, is the crunch. A potential reduction in wait time of 750ms against a few hundred dollars assuming that the user has got a high speed fibre connection. Given the nature of the site, the fact that we aren’t selling anything and the age profile of the people looking at the site I think I’ve done just about all I need to do for now.
Thanks for all your help and advice.

Sorry guys for the late answer!

In my case I cleaned up pretty much everything, Including the main DIVI style CSS. So going from 8-900 KB (DIVI style.css) to 27kb made a huge difference in performance.

And its not that difficult but you will have to get your hands dirty to understand the process. And Asset Cleanup makes this process SO much easier because you can turn everything Unused off for the visitor but still load it for the admin.

So my best recommendation for you @slhctech is to create a new page on your TEST site or website that you can use as a sandbox.(PLZ backup first) (It has to be open so you can test it on gtmetrix, web.dev & pingdom) Of what I’ve seen on “rivergippingtrust” the scores are quite good on GTmetrix.

So lets take that page as an example. The homepage. So in Chrome you have a Devtool called Coverage (You will find a lot of good tutorials on Googele) and according to that the page is using 320kb of 1.4MB (22%) So 1.1MB unused and that you could remove/block.

This is where Asset Cleanup comes in to action and can help you block unwanted and unused scripts.

So when it comes to the CSS and playing around with Unused CSS I usually use a Chrome extension called Used CSS and PurifyCSS. There are not always accurate and you will have to play around with it.
https://github.com/painty/CSS-Used-ChromeExt
https://purifycss.online/

Create a new CSS file, from these tools, and put it in your Child Theme that is active. Name it whatever you like.

Now comes the tricky part.
In your Child themes functions.php file you have to tell WordPress that you have a new CSS file that you want to load on a specific page ONLY and let Asset Cleanup find that specific new CSS. (Remember to do this on a test site and NOT a live one. I take no responsibility ?? )

/** Enque your own new, clean CSS on a specific page**/
add_action( ‘wp_enqueue_scripts’, ‘css_opt’ );
function css_opt() {
if ( is_page(‘2020’) ) :
wp_enqueue_style(‘optimize-page’, get_stylesheet_directory_uri() . ‘/new-divi-clean.css’);
wp_dequeue_style( ‘dashicons-css’ ); // Dashicon css
wp_dequeue_style( ‘parent-style’ );
endif;
}

So lets break this down. The two things you need to change here is:
1. The name of the CSS file. I named mine “new-divi-clean.css” and its not in any folder as you can see from the URL.
2. if ( is_page(‘2020’) ) : – The CSS will only load on that specific page/post so you will need to change 2020 to the EXACT ID that you new page has. When you create a new post and edit that post you will have a URL that looks like this: “https://yoursite.com/wp-admin/post.php?post=2020&action=edit”. That is where you’ll find your ID.

I also deactivated the dashicon css and parent-style, divis main dev css file with the lines:
wp_dequeue_style( ‘dashicons-css’ ); // Dashicon css
wp_dequeue_style( ‘parent-style’ );
But you can remove those or add new if you want to.

Save the functions.php file and purge all cache (Important)
The new CSS should now be visible in Asset CleanUp and you can “Unload” the big DIVI style CSS and test the page if you missed any CSS that needs to be removed or added to your clean file. Check Coverage again and test the speed of the page.

Pheew… That was the short version ?? I hope this will be useful for anybody looking to learn more about Unused CSS in DIVI and Asset CleanUp.
Please note that I am NOT a developer or an affiliate to Asset Cleanup. I just Googled a lot of examples.

Have a great day and good luck!

• This reply was modified 4 years, 2 months ago by digtialv.

Well done. I think I can follow what you’ve done and could probably make it happen on my River Gipping Trust site but I need to balance my time and ability with the fact that I’m currently getting Page Speed Insights of 91 on mobile and 97 on desktop simply using all the stuff built in to Gabe’s programme. I’m pretty sure that if I got the Pro version of his plugin where I could defer some CSS I would remove another 100 kb of resource blocking and move the score up to 95/100.

Against all that I would need to create a child theme, install Chrome and create a new test website in order to carry out your suggestions. I like your comment halfway through “Now comes the tricky part.” You should have put that at the very beginning!!

Despite your obvious enthusiasm for the subject I think I’ll hold it for the moment, particularly as I’m now trying to clean the site of a back door trojan in a piece of PHP which some b…..d has managed to put into the mu-plugins directory on the server.