At Make Do we understand that performance matters; our team of WordPress Engineers is committed to putting in the necessary time and effort required to make sure that performance is paramount across all our projects, using a mixture of classic and modern development techniques.
We recently stumbled across something that we thought we’d share, and would be well received by fellow performance nerds!
What We Discovered
Recently it became clear to us that Gutenberg isn’t entirely suppressed by the use of the Classic Editor plugin, during a yearly performance audit of one of our largest clients’ sites.
We looked closely at the HTTP requests and found a CSS enqueue of approximately 6KB (gzipped) in size (28KB source) that was enqueued by the Gutenberg editor; specifically, the block library:
/wp-includes/css/dist/block-library/style.min.css?ver=5.2.So What?!
Now, you might be reading this thinking “So what, it’s only 6KB!”, but when it comes to performance reviews, especially for sites that are already performing well, it’s all about the fine margins and taking any opportunities that arise, no matter how small the gain!
This client in particular generates a considerable portion of their revenue from users who visit the site on a mobile device, so as a result, we changed our mindset so that we now use 3G Mobile speeds as our primary benchmark; mobile-first performance analysis if you will.
When you use this mindset to assess web performance, every kilobyte, every HTTP request that you can trim makes a big difference; especially with requests for stylesheets that are render-blocking, therefore slowing down the initial phase of the page load.
Plus, improvements for mobile users ultimately lead to improvements for all users!
The Big Question
The discovery of this Gutenberg block library CSS enqueue raises an immediate and obvious question; why is it there?
Isn’t the Classic Editor plugin supposed to remove all traces of Gutenberg from WordPress, insofar as what appears in both the dashboard and on the front-end?
It turns out that the question has already been asked over on the Classic Editor GitHub repository back in January 2019:
Andrew Ozz, a frequent WordPress Core contributor and a lead on the Classic Editor team, responded on January 25th with the following:
Yeah, this was suggested a few times. I’m reluctant to add it to this plugin as it may cause problems with themes that expect these styles, and it seems there will be more and more themes like that.
Removal of these styles can be done easily from another (custom?) plugin but I’d suggest it only for people that know what they are doing 🙂
Andrew Ozz
Should themes rely on Gutenberg block library styles, when Gutenberg can potentially be turned off?
Creating front-end components that share styles with Gutenberg blocks, which the user may, and in this context, should not even have access to seems like a bad practice.
Since then, the issue has had additional follow-ups from other community members in March and April. We’ve also shared our desire to see this enqueue removed out-of-the-box; it doesn’t serve any purpose other than to add bloat.
The Solution
Fortunately, removing the block library CSS is as simple as adding no more than a handful of lines of code to your theme,which will dequeue this stylesheet that Classic Editor does not.
If you already have an existing code block using the wp_enqueue_scripts action hook, a single line in that block will do the trick:
wp_dequeue_style( 'wp-block-library' );If you don’t already have a code block in your theme containing the wp_enqueue_scripts action hook, add this into your functions.php file, or another file that is included from it:
/**
* Dequeue the Gutenberg Block Library CSS.
*/
function dequeue_gutenberg_block_library_css() {
wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', 'dequeue_gutenberg_block_library_css' );Wrapping Up
Adding any code to a site to remove a stylesheet which should not be there in the first place isn’t ideal, but at least it’s a trivial matter to remove it.
Hopefully, the Classic Editor team will listen to requests from community members and dequeue the Gutenberg block library CSS by default in a future update; removing all traces of Gutenberg for those who do not wish to use it (yet), whatever their reasons.
Get in touch with our team for a no obligation performance analysis if you’d like to improve your sites’ performance, or if you need a high-performance website built with WordPress!
Fancy a FREE WordPress Performance Review?
