WPBackery Unused CSS Issues

[RogerM]

Hi there fellas,

I have a project over Upwork when I need to improve a website´s score to 80+ on mobile and desktop according to Google PageSpeed Insights.

Right now, it´s at 83 for desktop and 60 for mobile.

Diving deeper into what is causing these issues I can see it´s due to WP Bakery page builder.

Through Chrome > Inspect > More Tools > Coverage

I see over 50,000 lines of code with unused CSS codes.

My client doesn´t want to migrate to a different theme (Currently using The Gem) nor to another Page builder.

What would be the best way to optimize this without breaking the site and migrating to a different page builder nor having to rebuild the entire site?

Cheers!

NOTE: I am not a web developer nor a programmer.

 

[Saint Gabriel]

Hi!

Install a plugin like Wp Rocket to Optimize and minify CSS.

**As for the report on google, It's sometimes tricky.

 

[RogerM]

Thanks a lot for replying!

Install a plugin like Wp Rocket to Optimize and minify CSS.

Yeah, it already has WP Rocket Installed.

 

[Itsyaboy]

Thanks a lot for replying!

Yeah, it already has WP Rocket Installed.

What I've seen that helped honestly without changing a lot or breaking things is

1. Asset cleanup pro
This plugin can help you disable specific CSS that's not needed on certain pages. [ Might be your best bet )

2. Perfmatters
A simple plugin that can help disable some annoying things

3. Cloudflare + WPRocket
I know you already have it, but if you don't already have Cloudflare set up on it you should also the DNS prefetching.

4. Async Javascript
A simple plugin that lets you assign the "async" or "defer" option to the js on the site. You can also set specific js, plugins, or themes you want to be excluded.

5. Optimizing images
Taking images into things like TinyPNG and compressing the size as much as possible without sacrificing the quality

These are the best options I know available for really pushing performance from a site without making hard changes to the source. Some of these could make certain things on the site not work so always try a setting check all functions then move to the next.

 

[RogerM]

What I've seen that helped honestly without changing a lot or breaking things is

1. Asset cleanup pro
This plugin can help you disable specific CSS that's not needed on certain pages. [ Might be your best bet )

2. Perfmatters
A simple plugin that can help disable some annoying things

4. Async Javascript
A simple plugin that lets you assign the "async" or "defer" option to the js on the site. You can also set specific js, plugins, or themes you want to be excluded.

These are the best options I know available for really pushing performance from a site without making hard changes to the source. Some of these could make certain things on the site not work so always try a setting check all functions then move to the next.

I`ve used Asset Cleanup Pro and it does pretty much the same as WP Rocket, right?

The other plugins I haven`t heard of. Will look into them.

Thaaaanks!

 

[aligatowork]

Hi ,

Those unused codes if you are using wpbakery with only simple column and few elements or features.
It's better to customize your own css for wpbakery to minimize the css usage.
Example for any child theme functions.php

function vc_override() {
    wp_deregister_style('js_composer_front');
    wp_register_style( 'js_composer_front', get_stylesheet_directory_uri() . '/js_composer-mod.min.css'); //visual composer
}
add_action( 'wp_enqueue_scripts', 'vc_override',);

Better to check well with compatible of responsive for all devices before minimise CSS.

 

[Itsyaboy]

I`ve used Asset Cleanup Pro and it does pretty much the same as WP Rocket, right?

The other plugins I haven`t heard of. Will look into them.

Thaaaanks!

To my knowledge, Wp Rocket just combines CSS or and do other things to optimize it right? with asset you can disable certain CSS styles or plugins that insert CSS on certain pages entirely from the pages you don't want