WPBackery Unused CSS Issues

RogerM

RogerM

Well-known member
Mar 3, 2020
461
439
63
Maracaibo, Venezuela
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

Saint Gabriel

Well-known member
Jan 3, 2020
2,998
3,049
113
Hi!

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

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

Itsyaboy

Active member
May 9, 2019
209
77
28
RogerM said:
Thanks a lot for replying!

Yeah, it already has WP Rocket Installed.
Click to expand...
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.
 
  • Like
Reactions: RogerM
RogerM

RogerM

Well-known member
Mar 3, 2020
461
439
63
Maracaibo, Venezuela
Itsyaboy said:
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.
Click to expand...
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!
 
Last edited:
A

aligatowork

New member
Jan 10, 2020
26
11
3
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

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.
 
I

Itsyaboy

Active member
May 9, 2019
209
77
28
RogerM said:
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!
Click to expand...
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
 
You must log in or register to reply here.

Similar threads

bonnster
Removing unused Javascript
Replies
3
Views
591
Website Support & Development
nakuk
nakuk
manoj2
Generatepress Theme Customization CSS Code
Replies
5
Views
653
Website Support & Development
Groot
Groot
ratkod
Help with adding css class to polygone (Image Map Pro plugin)
Replies
0
Views
274
Website Support & Development
ratkod
ratkod
abda53
ACF Advanced Custom Fields - some helpful admin CSS
Replies
0
Views
309
Website Support & Development
abda53
abda53
kaeferliebe
CSS support: change a color // for Babiato theme
Replies
3
Views
670
Website Support & Development
kaeferliebe
kaeferliebe

Latest posts

Forum statistics

Threads
69,229
Messages
908,458
Members
237,124
Latest member
skull

Share this page

Share this page

About us

  • Our community has been around for many years and pride ourselves on offering unbiased, critical discussion among people of all different backgrounds. We are working every day to make sure our community is one of the best.

Quick Navigation

Forums Contact us

User Menu

Login
Community platform by XenForo © 2010-2022 XenForo Ltd.
Top Bottom