Skip to content
From May June 2021, Core Web Vitals becoming a very important ranking factor, Google announced in February this year.
How Core Web Vitals is different from the Google updates?
Basically, Core Web Vitals analyse the user experience of your site’s visitors. That’s said, your website’s performance must be pretty good, but also offers to your site’s visitors a better experience. A few important signals (already been here from few years ago) are:
- Safe-browsing
- Mobile-friendliness
- HTTPS-security
- Intrusive interstitial guidelines
Core Web Vitals May 2021
First things to implement when you want to improve the Core Web Vitals score
1. Safe Browsing – Safety for your website visitors (and potential clients) must be the number one concern. If you are using WordPress CMS, keep your site protected by following these simple rules:
- Don’t ever install nulled plugins & themes – 99,999% of the cases, there will be a malware inserted there and, not only your site but also your visitors computers (*and personal information) may be in danger.
- Keep the core files updated – WordPress provides regular updates for free. Of course, is better to wait a few weeks until install the last version of WordPress, to avoid potential conflicts with the installed plugins or theme, but you should never wait a long time to do this. You should also update the plugins and the theme with the last settings. Don’t forget: Before update, do a backup!
- Pay attention to the free plugins & theme you’ll install – There is not a secret that some free plugins or themes will sell your visitor’s data. See here a case where a popular plugin do this kind of nasty job.
2. Mobile Friendly website – Since April 21st, 2015’s Google update, your website MUST be Mobile Friendly. In our days, the majority of the WW users navigate on the internet through their mobile devices. Google pay an important attention on how your website data is rendered to your visitors’s mobile devices. If the website is not mobile friendly, your website is penalized by Google.
Easy enough few years ago to make a website mobile friendly, or to create a mobile version of it, even with uncompressed images or files. But now, not only the website must load on smartphones (easy job for a regular smartphone in 2021), but it have to provide a minimalised/compressed version of content, in order to save bandwidth and time.
Read more: FAQs about the April 21st mobile-friendly update
3. HTTPS certificate – In 2021, you can get a free SSL certificate for your website with a service like Let’s Encrypt. If you’re not sure how to do it, just ask your hosting provider (most likely, the SSL is auto-installed, so not extra work is required).
Also, don’t forget to setup the HTTP headers. Many developers forget about them, or don’t even know about them. Just make sure you have configured them.
4. Intrusive Interstitial – Like I mention in the 2nd point above, your site must provide a minimized/compressed version of the content. Also, your website should avoid showing unnecessary content to the user. The Pop Up Ad is the best example. If John Doe is looking for x information on your website, and you show him a popup with an unrelated ad (or even related), but cover the essential information he’s looking for, this may ruin the user experience of Mr. Doe.
How are Core Web Vitals collected?
Core Web Vitals are measured in the field data, instead of lab data, because the field data tends to be more accurate and precise. Why? Because the real users (your website’s visitors) will measure the data through their devices (mobile, tablets, laptops, computers). For example, Google collects this data via the Chrome User Experience Report. And there are around 63.63% (according to Browser Market Share Worldwide) Google Chrome users (including me and very possible you, too).
That’s said, even if you don’t have your own website, you might contribute to the Core Web Vitals, if you:
- use Google Chrome
- sync your browser history with your Google account
- don’t have a sync passphrase
- and have usage statistic reporting enabled
you’re contributing to Google’s data set.
Core Web Vitals and impact on site Score
Let’s take a look into what Core Web Vitals are, and about the impact they have on your WordPress’s performance.
Core Web Vitals were introduced in May 2020, and the main scope of them is to measure how users experience the speed, responsiveness, and visual site structure of a site’s page.
To be considered a Core Web Vital, a metric must:
- be user-centric
- be measured on a real user’s device
- not overlap with other Core Web Vitals
Defining Core Web Vitals + Few CWV Optimization Tips:
1. Largest Contentful Paint (LCP)
The time it takes for a page’s main content to load. An ideal LCP measurement is 2.5 seconds or faster.
The LCP value should reflect the perceived loading time of your website up to the first possible interaction and includes the time span from the call to the loading of the largest content on your page.
However, this value should not be confused with the Fully Loaded Time.
The loaded page can only be fully loaded seconds later due to scripts and the integration of external resources.
A typical element for the largest content could be, for example, a video, an image or a text block.
How can I optimize the Largest Contentful Paint value?
As mentioned before, the largest element on the website can be an image or a video. It is easy to start here in order to optimize this. This value can be greatly improved by compressing your images and videos accordingly.
Basically, you should upload and integrate your media in a correctly scaled size in advance in order to achieve good results.
Techniques like LazyLoad or reducing render-blocking CSS and Javascript files can also be hugely helpful in improving the value.
An average of 2.5 seconds is estimated for a good LCP value.
2. First Input Delay (FID)
The time it takes for a page to become interactive. An ideal measurement is less than 100 ms.
The first input delay describes the value until the first possible interaction by the user. It should be known to some that a website is optically loaded, but an entry in a form or a click on a button only works with a little delay.
However, the first input delay does not refer to the scrollability of the page and only includes activities such as form entries or button clicks.
However, this FID value can only be compared and measured with collected user data (field data) that Google has collected from many users. As an alternative there is therefore the TBT value, which shows the time between First Contentful Paint and Time To Interactive. This can therefore also be used as an alternative for an optimization without any problems.
As a guideline for a good FID / TBT value, less than 100ms can be used for optimization. Everything over 300ms is rated as bad.
How can I optimize the First Input Delay / TBT value?
An increased FID value can also have different reasons.
In the case of a WordPress site, the FID increase is likely to come from installed plugins which add code to the website header. Even if these elements in the header make external Javascript calls again, they pull the value considerably into the bad area.
With every installation you should therefore pay attention to how the corresponding values have changed afterwards. Then it is also possible to exchange the desired plugins for other plugin alternatives.
3. Cumulative Layout Shift (CLS)
The amount of unexpected layout shift of visual page content. An ideal measurement is less than 0.1.
With many pages it is noticeable that certain layout elements such as the navigation or search masks suddenly and unexpectedly change their position when loading. The value of the cumulative layout shift therefore shows the visual stability when building your website.
This behaviour is rated as poor user experience (UX) and pulls this rating down.
A value below 0.1 is rated as a good CLS, between 0.1 and 0.25 you should already consider optimization and from 0.25 a poor CLS value is available.
How can I optimize the Cumulative Layout Shift?
There are a number of different ways in which a layout shift can be caused, but whenever a visible element changes its starting position in the viewport, it is marked as unstable.
This can be caused, for example, by slowly loading resources, which means that individual layout elements are displayed faster than others.
Missing width and height attributes for elements can also strongly influence this value. If the information is correct, the browser already has all the correct values and knows during loading which space is provided for the element. This can basically be applied to all media, banners or other embedded elements.
Even externally loaded web fonts can cause the layout to be shifted when they are set up and are possible sources of problems.
According to John Mueller: “These signals measure how users perceive the experience of interacting with a web page and contribute to our ongoing work to ensure people get the most helpful and enjoyable experiences from the web.”
Core Web Vitals and SEO
Where and how to test your site for Core Web Vitals
In May 2020, John Mu tweeted “There’s a ton of information about them starting at https://web.dev/vitals/ – that’s where I tend to go. LCP is similar to the page loading speeds you’ve probably looked at, but it tries to figure out when the primary elements are visible, which is what users care about.”
To test your site if it’s optimized for the Core Web Vitals, try these websites:
Google PageSpeed Insights
You can tell how much GTmetrix’s PageSpeed Score has been adjusted when you enter your URL into the Google PageSpeed Insights tool . It is not uncommon for the tester to see a completely different score here. After the last updates, this differs significantly from GTmetrix and Pingdom and usually leads to a worse result. But you shouldn’t pay too much attention to the score anyway, regardless of which tool it is, and concentrate much more on the WordPress optimization recommendations.
Site Speed Testing tools provided by Google are:
By using the testing tools mentioned above, you’ll get a clear view about your website’s performance and if it’s optimized for Core Web Vitals
GTmetrix
One of the most popular tools for analyzing the performance of a website is GTmetrix.com. The web tool impresses with its pleasant interface and provides further explanations and optimization recommendations for each checkpoint. By moving the mouse over the small arrows next to the key figures, you get the average value of all tested websites as a guide. Although the tool uses 7 different server locations, it is unfortunately not possible to change them.
WebPageTest
The WebPageTest tool is not really user-friendly, but it offers some additional functions for website performance testing. This includes content blocking, comparison of first call / repeated call, HTTP / 2 testing, etc. The web tool also scores with the server selection: The testers can choose between 50 different locations.
Pingdom
Another very popular web tool for testing website speed is Pingdom . Similar to GTmetrix, it lists all resources in a waterfall chart, but with additional filter options. A big advantage of this tool is the choice of different server locations. For example, when selecting “Europe – Germany – Frankfurt” for the German websites, you get loading times that are closer to reality.
In contrast to GTmetrix, Pingdom unfortunately does not support the HTTP / 2 protocol.
How to improve the Core Web Vitals for your site
- Make sure you already implemented these configs on your website: Go here
- Invest some extra $$ in a better hosting. If you are using some cheap hosting providers (most of them, under EIG), you should think about a change.
- Install a solid (but light) WordPress theme.
- In 2019 I posted a comprehensive article about how to speed up your WordPress site: WordPress Speed Optimization 2019 – Boost your WordPress Performance in a few simple tweaks – *Backup before doing any change*
- Pay attention to the size of the images and configure them with the right sizes. Also, try to compress them.
- Remove unused plugins.
Extra WordPress server performance optimization tips:
The server on which the website resources are located plays a crucial role when it comes to achieving a good score with web.dev and other test tools that reflects fast loading times of your own website.
HTTP / 2
With the HTTP / 2 protocol, compared to HTTP1.1, several requests can be processed by the server at the same time. In the course of your optimization measures, you can even dispense with combining the Javascript and CSS files with this protocol. You can find out why it can still make sense to combine the files with an HTTP / 2 protocol below in the article.
Another advantage of the HTTP / 2 protocol is that files are preloaded before they are requested by the user. The consequence of this is a faster responsiveness of the server.
Time To First Byte (TTFB)
Time To First Byte describes the time that elapses before the first byte has been transmitted from the server to the client (browser). With some cheap hosting, this time can be more than 2 seconds. This means, no matter what efforts you put into performance optimization, the loading time of your website will never be faster than 2 seconds. You should definitely avoid this bottleneck by choosing the right hosting provider.
With the bytecheck tool, you can test how long it takes for the first byte of your website to arrive in the browser.
PHP version 7.4 and higher
With PHP version 7.4 and higher (the last PHP version is 8, but I personally consider it unstable, yet), twice as many requests per second can be processed compared to the previous version (5.6) .
Furthermore, PHP version 5.6 is no longer actively supported since December 2018, PHP 7.4 has also reached the EOL since June 2020 . So you should always use the current PHP version, not just for performance reasons.
If your WordPress theme is not compatible with the new version, you should contact the theme developer or even consider redesigning your website with a new theme.
