WordPress developers, please stop loading CSS and JavaScript files all willy-nilly to a site.
TL;DR Plugin developers should use
if(is_admin())andget_current_screen()to determine the page and load these scripts and files conditionally. And the non-plugin developers, we can dequeue thescriptsandcssfiles easily. In short: Be an awesome, caring and courtesy developer, please.
It’s increasingly annoying to install a plugin, particularly a Dashboard-related plugin, and have it loading scripts and css on the frontend pages and every admin page instead of just the Dashboard.
It’s also detrimental to performance scores on web.dev (Lighthouse), GTMetrix, and PageSpeed Insights — particularly the opportunities Eliminate render-blocking resources and Remove unused CSS that will show up as a result.
Good thing there’s a way to disable these wayward CSS and JavaScript files from being loaded.
You need to find the scripts and stylesheets that are loading, but shouldn’t be since they’re unnecessary. The performance tests can give you a list of what’s running, but it’s better if you let your own site tell you about the files loading.
Copy and paste my code below to your functions.php file. It’ll display all the running scripts and stylesheets in the <head> of your site as a comment.
/*
Get script and stylesheet filenames
Adds an inline comment to your frontend pages.
View the source code in the <head> section
to see the registered script culprits.
Thanks to Jeff Starr for the start of this function. I made some necessary tweaks to better suit my needs ~mj
*/
function mj_inspect_script_style() {
global $wp_scripts, $wp_styles;
$total_scripts = count($wp_scripts->queue);
$total_styles = count($wp_styles->queue);
echo "\n" . '<!-- [Macario\'s Script + Styles Inspector]' . "\n\n";
echo "$total_scripts SCRIPT IDs:" . "\n";
foreach($wp_scripts->queue as $handle)
echo $handle . "\n";
echo "\n\n" . "$total_styles STYLE IDs:" . "\n";
foreach($wp_styles->queue as $handle)
echo $handle . "\n";
echo "\n" .'-->'. "\n\n";
}
add_action('wp_print_scripts', 'mj_inspect_script_style');It will break it down clearly for you. Now, take the name of the scripts — you’ll see they’re without the .js and .css — and replace them with what’s in the code below.
function mj_dequeue_scripts_styles() {
wp_dequeue_style('better-recent-comments');
wp_dequeue_style('tptn-style-left-thumbs');
wp_dequeue_style('wpdreams-asl-basic');
wp_dequeue_style('wpdreams-ajaxsearchlite');
wp_dequeue_style('wp-block-library'); // Gutenberg stuff
}
add_action('wp_enqueue_scripts', 'mj_dequeue_scripts_styles', 100);The code will dequeue all of the files from loading. If all goes to plan, you’ll notice a big performance upgrade in speed on both the front-end and the Dashboard part of your site.
I hope this helps! Please let me know if you run into any issues. Cheers and peace.
If you found this post useful ...
