Google wants faster websites. So, they add an essential website speed measurement – Core Web Vitals.
What are core web vitals?
Core web vitals represents website speed measurement based on real user experience. Core Web Vitals are the Largest Contentful Paint that measures loading performance, Cumulative Layout Shift that measures visual stability, and First Input Delay that measures interactivity.
When is The Core Web Vitals Update?
Core web vitals update duration is 28 days. If you fix your website speed, you need to wait a few weeks (up to 28 days) to improve Google Search Console because Google needs time to collect information from real Chrome browser users who visit your website and their website speed experience.
The best free tool that you can use to measure core web vitals instantly is GMetrix. If you use google search console or Page Speed, you will see core web vitals metric for the last 28 days, but you can not check current website core web vitals data.
How do I fix Core Web Vitals errors in WordPress?
I tried to fix Core Web Vitals errors in WordPress using several WordPress plugins such as Autoptimize, ShortPixel, Gzip compression, various cashing plugins. However, I set all core web vitals problems using the WP Rocket WordPress plugin.
I started to use the Autopimize WordPress plugin, a free plugin, and I have made huge improvements. However, I had a problem with javascript and various ads scripts delay. Additionally, I had to pay more than $100 yearly for CriticalCss.com service to fix critical CSS. WP Rocket offers several plugins in one plugin, and the annual price is only $39.
My Core web vitals using Autoptimize plugin in the past:
My Core web vitals are using the WP Rockets plugin now:
Large Contentful Paint LCP measures the loading speed of one page (on a multi-page site, it counts for each one separately). Here, the time from clicking on a link for a URL to loading the first meaningful content is calculated. For a user experience to be good, the LCP must be below 2.5 seconds. This is not simple, and that is why you should take care of what is placed on the page. Viewed from the SEO aspect, it is terrible to have a slider, high-resolution photos, video, or animation, but even if you decide to have such large and demanding elements above the fold, you must optimize them well for fast loading.
First Input Delay The FID measures the time until the first possible interaction. It calculates how long it takes to click on something on the site, for example, to go to a link from the menu, enter the parameters for logging in to the login field,… and any kind of visitor interaction with the page is possible. The FID should be below 100 milliseconds. It is important to note that this is the only Core Web Vitals parameter that cannot be measured in laboratory conditions but is taken as the real-world average value for the last 28 days. Also, not every visitor came to the page intending to interact with the content, but what he saw when he arrived is enough for him, so that sometimes this time cannot even be measured.
Cumulative Layout Shift CLS measures the visual stability of a website. Here, you can see how many elements on the page move as it loads. The best examples are pop-ups that offer to sign up for the newsletter, poorly positioned cookie consent covering most of the page, advertisements, banners that pop up when we want to leave the page… Tolerance for this parameter is less than 0.1, which means you should remove everything that pops up and scares visitors. Core Web Vitals test Once we know what Core Web Vitals are and why it is essential to follow them, we need to understand how to measure them.
There are two types of CVW measurement tools: – those that measure real-world user experience and – those that provide laboratory data on what kind of user experience potential website visitors would have.
Several ways and tools show LCP, FID, and CLS, and we recommend two free today:
1. Enter the URL you want to analyze in the analysis field – Speed Insights. Data is displayed separately for mobile (the default measurement) and desktop. In addition, speed Insights reveal real-world and laboratory data.
2. Google Search Console – Anyone serious about online business or who wants to move their offline business online must follow the metrics provided by the GSC. Among other things, Core Web Vitals can be seen here. If you have not already done so, be sure to link your website to GSC. This shows problems for all website pages, not just one URL, as with Speed Insights. Also, the Google Search Console displays real-world results from your Chrome browser.
We recommend that you always do the testing with the help of several different tools because the results differ from tool to tool. Also, repeat the test several times within a few days because there is a difference. The difference is because different tools use different servers, some of which are in other countries. Results When you do the Core Web Vitals test for the first time, it may seem that your site is very bad or slow and has a lot of problems. Some optimization can solve all problems, and in the continuation of these results, it is stated precisely what and how can be fixed.
You can fix some of the listed items yourself, while others will require the help of a developer. In addition to each “remark,” Google gives you a brief explanation of what is not OK, but also a link to find out more. In any case, do not lose hope and do not neglect this valuable information. Your visibility and position on Google depend on them.
How to improve the largest contentful paint?
To improve the largest contentful paint core web vital metric, you need to fix:
- Critical CSS
- Remove Unused CSS
- Optimize Fonts
- Lazy Load Images
- Next-Gen Formats
- Resize Images
- Preload Background Images
- Static Asset Cache Policy
- Efficient Static Cache Policy
- Minify Javascript
- Minify CSS
- Minify HTML
- Script Execution
- Script Delay
- Reduce CPU Intensive Tasks
- Core jQuery Feature Preload
- Lazy Load Iframes
- Optimize Tweets
How to improve Cumulative Layout Shift?
- Optimize Fonts
- Optimize Images
- Resize Images
- Preload Background Images
- Efficient Static Cache Policy
- Minify Javascript
- Minify CSS
- Minify HTML
- Set Script Delay
How to improve First Input Delay?
- Set Script Delay
- Reduce CPU Intensive Tasks
- Set Lazy Load Iframes
Of course, if you have WordPress as platform you can use WP Rocket plugin:
Learn more about authors in Nimblefreelancer's team biography page.
