WordPress 5.8 has improved block-style loading enhancements with two new features. Previously to WordPress 5.8, block editors loaded all styles for every Gutenberg block whether it was or wasn’t used on a page or post. Now, developers can load styles only for blocks that are in use and inline small stylesheets.
But why does this matter to marketers?
Well, utilizing these new features benefits your Core Web Vitals score — and that’s important for every brand. So, here’s everything you and your development team need to know about these new WordPress features.
Table of contents
A Brief Overview of Core Web Vitals
Core Web Vitals are specific factors in your webpage’s overall user experience that Google considers important — and ultimately affect your search rank. These factors are then used to create your Core Web Vitals Score and it’s this score that Google uses to rank your site.
Google’s update in June 2021 is based on three core web vitals — Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). In addition to these three metrics, the First Contentful Paint (FCP) plays a critical role.
How WordPress 5.8 Block Loading Enhancement Benefits Core Web Vitals
These two new features that enhance block loading benefit your Core Web Vitals Score in several ways.
- Increases faster load times to equal better Core Web Vitals
- Decreases page load speed by reducing unused CSS which creates smaller files that load faster
- Improves First Contentful Paint (FCP) which then improves Largest Contentful Paint (LCP) as stated in Core Web Vitals Optimization: Best Practices from an Expert Developer
How These WordPress 5.8 Features Works
Reduces unused CSS by only loading styles for in-use blocks
Now, you can add a filter to alter this functionality to only load minimal common CSS and then dynamically load CSS only for blocks that are in use on the current page.
For example:
add_filter( 'should_load_separate_core_block_assets', '__return_true' );
This enhancement helps your Core Web Vitals by reducing the amount of unused CSS loading on a page so that every page can load faster. This will result in better First Contentful Paint (FCP) and Largest Contentful Paint (LCP).
When this filter is active, here’s what will happen:
- WordPress will no longer load the
wp-includes/css/dist/block-library/style.cssfile which contains all the styles for every native block - WordPress will instead load a much the smaller
wp-includes/css/dist/block-library/common.cssfile which only contains generic common styles - Styles for any specific block will only load if it’s in use on the current page the user is visiting
Please note, this only happens on the frontend and has no effect on the backend.
Caveat for Classic Theme Compatibility
If your WordPress site has customs styles that alter the default styles that load for blocks, take note. In previous classic php-based themes, block styles were loaded in the <head>. However now, they are loaded in the footer via print_late_styles(). Developers need to be aware of CSS load order to confirm it’s compatible. This new style load order could break some sites. Due to this reason, it’s not enabled by default.
This is only relevant if you have custom styles that alter the default styles that loaded for blocks
Add custom styles and small CSS assets to native blocks
Developers can inject custom styles on a per-block basis along with the native CSS. This dynamic feature can only be used if the block is in use.
The WordPress Core team provides this example of a function where this is done. In this example, styles will be inlined when the block is in use, and styles are also added to both backend and frontend development.
There’s also a new function that was created to inline small assets called wp_style_add_data(). This allows small style sheets that have opted-in via this function to render inline.
Please note, there’s a total inline style limit of 20kb to keep pages loading fast.
Further Steps to Optimize Your Core Web Vitals
Google’s Page Experience update started gradually rolling out in June 2021. Now, improving your page experience, even a little bit, will bring benefits to your site.
To assist digital marketers, our expert development team created a comprehensive guide, Core Web Vitals Optimization: Best Practices from an Expert Developer, to walk you through understanding your site’s Core Web Vitals Score and the best practices you can use to improve it. Outlining everything from definitions of key vocabulary to explaining how this score affects your search ranking, our expert development team shares what we use for all new website builds, including the recent launch of our own new website. Our site is strategically monitored and updated with our experienced teams’ consistent optimization. It’s a great example of success from expertise and dedication to the latest best practices — view our PageSpeed Insights test.
To learn more about Google’s Core Web Vitals, read Understanding Core Web Vitals. And if you’re in need of technical expertise and support to achieve your site’s full potential, reach out to our expert team.
