0

I want to remove the render-blocking CSS that PageSpeed Insight tells me about. Plugins don't seem to work.

To do it manually I gathered that you should add some code to the "functions.php" file that's inside "public_html/wp-includes/". I managed to remove the dashicons css by adding this code to the file:

// Remove dashicons in frontend for unauthenticated users
add_action( 'wp_enqueue_scripts', 'bs_dequeue_dashicons' );
function bs_dequeue_dashicons() {
    if ( ! is_user_logged_in() ) {
        wp_dequeue_style( 'dashicons' );
        wp_deregister_style( 'dashicons' );
    }
}

And this has worked. PageSpeed Insights no longer shows dashicons as render-blocking. The problem is that I don't know how to repeat this process for the rest of the CSS files because I don't know what their $handle is. For example I have a render-blocking CSS with this URL according to PageSpeed Insights: https://groupcbm.com/wp-content/themes/deon/assets/css/grid.min.css?ver=6.2, how do I deque and deregister this?

10
  • unless you've built your sites HTML in a very specific way achieving this just to tick the box in pagespeed will be counterproductive, and if you're using plugins such as autoptimise it'll be pointless as these changes are supposed to enable the browser to render the page as it's received, but autoptimise holds it back until the last moment and sends it all at once so you get none of the benefits
    – Tom J Nowell
    Apr 19, 2023 at 13:53
  • as for specific files, you'd need to check the code for the deon theme for how to remove grid.min.css, likewise for other plugins, but doing that will also break anything that's styled by that file
    – Tom J Nowell
    Apr 19, 2023 at 13:54
  • @TomJNowell Thanks for the response. So I should check the functions.php file of the Deon theme? Also yes I'm using autoptimize, should I delete it? Every single caching and optimization plugin I've tried tanks the PageSpeed Insights score, including all the famous ones, but autoptimize is the only one that didn't seem to have any negative effects. In fact I think it improved the Insights score by one or two points.
    – Zaza Zaza
    Apr 19, 2023 at 14:02
  • I'm not familiar with the Deon theme and questions about 3rd party products/themes/plugins are offtopic here. Auto-optimize will fix a lot of the HTML markup and stuff so that the final results comply with recommended good practices, but you'll notice none of those good practices have an opportunity to be applied, and the TTFB/Time to first byte metric is ruined. Plugins are no substitute for fixing the problem, and plugins like Autoptimise and tools like pagespeed can only tell you about frontend rendering/browser performance, nothing about server side performance
    – Tom J Nowell
    Apr 19, 2023 at 15:24
  • @TomJNowell thanks again for the response. How do I find the handle for CSS files like groupcbm.com/wp-content/themes/deon/assets/css/…? It's not the ID in the developer tools as I already tried that
    – Zaza Zaza
    Apr 19, 2023 at 16:40

1 Answer 1

0

For example I have a render-blocking CSS with this URL according to PageSpeed Insights: https://groupcbm.com/wp-content/themes/deon/assets/css/grid.min.css?ver=6.2, how do I deque and deregister this?

  1. Locate where in the theme it registers and enqueues this file
  2. Once located, note down the handle it uses
  3. Remove it, by calling wp_dequeue_style or wp_dequeue_script in a theme/plugin/etc
  • make sure your dequeuing code runs after the theme has enqueued it, you can do this by setting the priority of your hook with the dequeue function calls higher than what the theme/plugin that enqueues it uses

How Do You Locate It?

Two options:

  1. Manually read the code
  2. Open the codebase in an editor and search the folder for the name of the file.

Important Note

If any of the following are true, these instructions won't work and you will need to read and understand the theme to proceed:

  • if it hardcodes the file instead of using the enqueue system
  • if it loads the file from javascript instead of PHP
  • if it does not mention the filename explicitly, e.g. if it passes it via a variable

If any of these are true, you will need to ask other people who use that theme about the specific method to use, or more likely the theme authors.

_Note that while you mentioned a grid.css file in the Deon theme as an example I cannot give specific instructions for that theme as it's a premium 3rd party theme, and 3rd party themes/plugins are offtopic here. If the generic instructions don't work for you, you will need to contact the theme author.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.