There are many plugins that can help load stylesheets where they are needed and remove the unused CSS from stylesheets you need.
PerfMatters is an example of a plugin who will help you load the styles you need, including the unused css generated by the block Library
The problem with the Block Library Stylesheet is that loads styles for blocks you have never used.
WordPress users has raised concerns about that but the WordPress hasn’t done much to solve this issue.
Table of Contents
How Can You Optimize the Block Library StyleSheet
I think that you can do four things to remove the unused css from the Block Library
- Buy a Premium plugin such as PerfMatters, WP Rocket, FlyingPress and let it take care of the problem.
- Copy the URL from one of your posts, one that included all blocks that you are using and remove the unused CSS using PurifyCSS and purify even more manually, then dequeue the block library stylesheet and add the clean CSS using your favorite CSS plugin or the theme customizer.
- Grab the code included in block library stylesheet, unminify the css, remove everything you don’t need and add it via the customizer or a plugin.
- Hire an CSS expert to clean the Block Library CSS code for you and add it to site using a plugin or the theme customizer.
Regardless of the method you use, run a few tests using PurifyCSS so you can see the lots of unused CSS the Block Library loads.
PurifyCSS doesn’t do a perfect job, you can still remove more lines of unused CSS manually.
What Do I Recommend?
I recommend doing it yourself, you can play with the CSS code using a staging site and once you see everything looks like it has always looked, dequeue the block library stylesheet, minify the used CSS and add the CSS using a plugin or the theme customizer
In my case, I am not an CSS expert but I removed all the unused CSS myself and added the necessary CSS using the element sections provided by GeneratePress Premium.
More than 80% of the styles weren’t needed so that was a huge win.
You also won’t get more render blocking warning on Google Page Insights
Why not Using a Plugin?
I think that unused CSS shouldn’t be there in the first place and if there is a way to handle this problem without a plugin, I would choose that route.
I only use paragraphs, headings, images, embeds and tables blocks so why would I keep a stylesheet with styles for the rest of blocks that I don’t use and that I will never use.
If you don’t want to get your hands dirtier, hire a CSS expert, indicate the blocks you use and let him or her know you want to get rid of the rest of styles.
More Optimization Tips
These are some posts that might help you optimize your WordPress sites
- Are CloudFlare APO and Full Page Caching the same?
- WP Rocket: Love it and Leave it
- Perfmatters: Love it or Leave it
- How to Lazy Load Ads
- How to Preload Links in WordPress
- How to Optimize Table of Contents Plus for Speed
- How to Use Flying Scripts to Speed up Your WordPress Site
