Core Web Vitals optimization for WordPress website?
Soon the new Google’s criteria for webpage positioning will come into force (Timing for bringing page experience to Google Search). Mid June to August 2021 is the updated rollout period for the changes. While we all can agree that the page experience, as defined by Google (Understanding page experience in Google Search results), is the set of factors to strive for in order to make user experience more pleasant, at the same time we may notice that our own webpages are not up to date to meet the required thresholds and not to loose their other positioning advantages. Are our WordPress powered pages ready for introduction of Core Web Vitals, do they need an optimization?
To learn, if they are, we need to check how they are positioned with regard to the page experience factors:
- Core Web Vitals
- Mobile-friendly
- Safe-browsing
- Https
- No intrusive interstitials
We will refer to each of the elements in the consequent posts, starting with the most complicated and possibly most relevant element – or rather set of elements – the Core Web Vitals.
Let us make the Core Web Vitals definition concise. It is a set of three measures:
- (LCP) Largest Contentful Paint – to measure loading performance, the Good threshold of LCP is 2.5s to load the page’s main content, anything more than 2.5s requires improvement and loading the page’s main content in 4s or more gives you a grade of Poor performance.
- (FID) First Input Delay – to measure interactivity, the Good threshold of FID is 100ms for the page to start reacting to the first user input. You get a mark Poor if your page reacts within 300ms or more. Since FID is actually measured by Google during real interactions of users with the page, it can not be checked instantly using software measurement tools. Therefore this measure is approximated by a more easy to measure Total Blocking Time (TBT) metric.
- (CLS) Cumulative Layout Shift – to measure visual stability, the Good threshold of CLS is 0.1 (the less the better), CLS of 0.25 will get you Poor grade. How exactly CLS is calculated is complex, but to get the idea, it is enough to know, that it measures how much the page content visibly moves without user interacting with it. So when you see pictures or text jumping before your eyes while the page is loading, you are experiencing the layout shift, which CLS is measuring.
OK, so how do we know then where our webpage lands in terms of Core Web Vitals?
The real (so called field) data collected from real user interactions with the webpage are presented by Google in the Google Search Console under menu position Core Web Vitals. They appear there after at least 28 days of consistent traffic of at least few dozens users per day (Google does not reveal how much data they need to show the statistics of Core Web Vitals, and the number we just gave may not be accurate).
Regardless if you can see real Core Web Vitals in the Google Search Console or not, when working on the improvements you do not want to wait 28 days of the rolling reporting period to learn about the full impact of the changes you just made.
While working on improvements you can quickly check their impact using Google’s PageSpeed index, which measures all three most important factors: LCP, TBT and CLS, as well as some other, in a lab environment and on top of that provides a combined, easy to read and compare page experience metric, the PageSpeed, that ranges from 0 to 100. It is measured separately for mobile and for desktop browsers. To get Good PageSpeed grade you need to get score of 90 or more. But we believe that a good page should consistently achieve in repetitive tests a grade of 95+ in both mobile and desktop browser measurements. This will mean that all the three Core Web Vitals related lab metrics are in green numbers too.
As we have proved to ourselves we can get a very good score in the Core Web Vitals and PageSpeed metrics by optimization of WordPress powered website in a usual scenario when we start with a theme (CorpoNotch Consultant in this case, but we got similar improvement results with WP Ocean or Elementor Hello themes), play with Google fonts, add WooCommerce webstore functionality and adjust and add elements with Elementor/Elementor Pro combo. And we add a tracking tag from Google Analytics. This is where we started with https://procadena.com:
And this is where we landed after careful optimization, check it for yourself at PageSpeed.
Google does not reveal how the Core Web Vitals will influence the page positioning algorithm since mid June, but makes clear that pages, which do not meet page experience thresholds, will suffer downgrading. You can safely assume that before you start your other SEO efforts you need to take care about the new basics, among them the Core Web Vitals. This can be – at least for a time – your new competitive advantage.
Notice: Since this article has been written there was an update made to the procadena.com site with use of the Gutenberg editor instead of Elementor. The article content remains valid but our preferred way of site optimization now is to use the native WordPress block editor (Gutenberg) instead of sticking to older techniques employing third party page builders.
See the next post in the ‘Page experience’ related series ‘Is my WordPress site mobile friendly?‘
