Removing stylesheets issues (wp_dequeue_style)

user_13505208 0
Viewed 1383

I'm having trouble removing (wp_dequeue_style) all the stylesheets loaded in a WP site. I want to remove all the styles loaded, with the purpose of recreating a new style that can be better controlled and optimized and reduce 68 requests to 1.

But before I get further into this, I'll say a bit about the tools used.

I'm using Wordpress v5.4.1 on a server with Apache 7.2.30. The WP theme is MasterStudy Child and the plugins used are as follows:

  • Breadcrumb NavXT
  • BuddyPress
  • Contact Form 7
  • GamiPress
  • GTmetrix for WordPress
  • WPBakery Page Builder
  • MasterStudy LMS Learning Management System PRO
  • MasterStudy LMS
  • Paid Memberships Pro
  • Slider Revolution
  • GDPR Compliance & Cookie Consent
  • STM Configurations
  • Transients Manager
  • UpdraftPlus - Backup/Restore
  • WooCommerce
  • WordPress Importer
  • WP Reset
  • Query Monitor

I can get a list of all enqueued CSS stylesheets using 3 methods: 1. Chrome Inspector - Network tab 2. Query Monitor 3. The script bellow, used in functions.php of parent theme

function remove_theme_head_styles() {
    global $wp_styles;
    echo "<h2>Enqueued CSS Stylesheets</h2>";
    foreach( $wp_styles->queue as $handle ) :
        echo $handle . ", ";
    endforeach;
}
add_action( 'wp_enqueue_scripts', 'remove_theme_head_styles', 9000 );

The results are as follows:

Method 1 (Chrome): 68 requests, though some are duplicates

Method 2 (Query Monitor): 66 Styles

Method 3 (php script): 52 results

Next, lets switch from listing all the enqueued CSS files, to removing them with this script

function remove_theme_head_styles() {
    global $wp_styles;
    foreach( $wp_styles->queue as $handle ) :
        wp_dequeue_style( $handle );
        wp_deregister_style( $handle );
    endforeach;
}
add_action( 'wp_enqueue_scripts', 'remove_theme_head_styles', 9000 );

Let's see what we have now:

Method 2 (Query Monitor): 13 styles - all of them loaded in the footer. 10 of them are coming from the parent theme and the other 3 from the theme's main plugin MasterStudy LMS

Method 1 (chrome): 14 requests, same as QM except for 1 extra font family CSS

Method 3 (php script echo): 0 results

So, maybe we need to change the hook, go further down the hooks order, to also include the stylesheets enqueued in the footer. Let's try wp_print_footer_scripts with a big number for priority 

add_action( 'wp_print_footer_scripts', 'remove_theme_head_styles', 9000 );

The results are: Method 1 (chrome): 65 requests, WTF? almost all of them have loaded!

Method 2 (Query Monitor): 0 Styles

Method 3 (php script): 0 results - same hook used for listing, wp_print_footer_scripts

And YES the webpage has rendered accordingly, so the Chrome Inspector is not wrong, but this doesn't mean that the other 2 methods have false results. It just means that the CSS files are re-enqueued after the results of methods 2 and 3 are generated But how is this happening I cannot understand.

I have also tried splitting the removal process into 2 hooks, 1 with wp_enqueue_scripts and another with different hooks like wp_footer and such, but with no success

The 10 'trouble' styles coming from the theme itself, are loaded with this function

themes/masterstudy/inc/custom.php 

function stm_module_styles($handle, $style = 'style_1', $deps = array(), $inline_styles = '')
{
    $path = get_template_directory_uri() . '/assets/css/vc_modules/' . $handle . '/' . $style . '.css';
    $handle = 'stm-' . $handle . '-' . $style;
    wp_enqueue_style($handle, $path, $deps, STM_THEME_VERSION, 'all');

    if (!empty($inline_styles)) wp_add_inline_style($handle, $inline_styles);
}

Here's an example of using the function above

themes/masterstudy/vc_templates/stm_mailchimp.php 

stm_module_styles('mailchimp', 'style_1', array(), $inline_styles);

Obviously, if I comment that line then the CSS won't be loaded, but this is not the approach I want to take to solving the problem.

So, if anyone can offer some help, it would be much appreciated

Thanks for taking the time and reading through this

python-requests stylesheet optimization
1 Answers

The below is likely not a great approach, but I recently needed to prevent VC from loading the free version of FontAwesome (I use the pro version in my theme) and no amount of dequeue/deregister would work - the below is the only way I could stop it loading (without editing files outside my theme).

The thing that actually worked, was brutally unsetting the entry in wp_styles.

function hack_dequeue_fa() {
    global $wp_styles;

    $remove = array(
      'vc_font_awesome_5',
      'vc_font_awesome_5_shims',
    );

    foreach($remove as $handle) {
      wp_dequeue_style($handle);
      wp_deregister_script($handle);
      unset($wp_styles->registered[$handle]);
    }
}
add_filter( 'wp_enqueue_scripts', 'hack_dequeue_fa', PHP_INT_MAX );
user_14120680
Related