What is Core Web Vitals?
Core Web Vitals are user experience metrics defined by Google. Core Web Vitals mainly composed of 3 things that measure a website’s speed, responsiveness, and visual stability. These include:
- Largest Contentful Paint: LCP is the measure of time until the largest element in your website is loaded completely.
- First Input Delay: FID is the time required for the website to load and the user can interact with data on the website.
- Cumulative Layout Shift: CLS is used to determine the visual stability of the website. ie it is termed negative when the content is shifting randomly when the user is interacting with an element in the website.
Why is Core Web Vitals important?
Core Web Vitals are important because it is a measure of user experience on your website and Google’s upcoming search algorithm focuses primarily on user experience. Google also has warned us about how important it is to update them. Core Web Vitals will be one of the important ranking factors.
How to improve your WordPress website for Core Web Vitals?
To improve your website’s Core Web Vitals, you will need to optimize for these 3 factors:
- Largest Contentful Paint
- First Input Delay
- Cumulative Layout Shift
As we can see all these factors are important when it comes to user experience in the website. For that reason, we will need to improve these factors and focus on user experience. However, Google doesn’t explicitly say the list of things that should be done to improve these features. All we can rely on is some tools that can detect these user experience issues in the website.
The tools that can help to find errors in Core Web Vitals, firstly, is Google’s own tool that is the Page Speed Insights. Page Speed Insights is the primary tool to gather data for CWV. Basically Page Speed Insights was a tool to generate the page speed report of a website.
Then you can access your Google Search Console dashboard and find out how CWV is performing.
Some of the other tools that can help check your Core Web Vitals are Light House, Chrome DevTools, Chrome UX Report, and Web Vitals Extension.
Ways you can improve Core Web Vitals of your WordPress website
When it comes to WordPress, the advantage is that optimization is comparatively easier. There are already some plugins for optimizing the SEO of your website that works well. Also, I guess in a few months there will be plugins focused on Core Web Vitals, just like the Jetpack boost plugin that was recently launched for CWV.
However, the Core Web Vital update is yet to be launched by Google, and they have not given any clear instructions on what should we do to optimize the website. We can only refer to the page speed insights to improve the user experience. So, here are 6 important things you should do to improve the website for Core Web Vitals:
- Optimize the images & videos on your website
- Optimize the usage of Ads, embeds, and iframes
- Reduce server response time
- Optimize fonts and icons
1. Optimize the images & videos on your website
One of the main things that can affect your site’s loading speed is the usage of images and videos. Because using a high-quality image will require more memory. This will lead to an increase in the page load speed and undefined dimensions can cause disruption in the CLS score. Also, make sure you are not using images in next-gen formats (ie, JPEG or PNG)
Ways you can optimize images & videos:
- Use lazy loading feature
- Compress images (You can use plugins like Smush)
- Use WebP format for images (You can use WebP converter plugin)
- Properly define dimensions
- Define dimensions for videos when embedding it your website
2. Optimize the usage of Ads, embeds, and iframes
If you have monetized your website and there are ads on your website, you must take care of them effectively. Because, one of the main reasons of CLS error are advertisements.
We all are familiar with these small frustrating boxes. If we try to click on them to close, it happens to take us into the one thing that we tried to steer away from. Well, thats bad user experience, right?
This is one reason why Google has prioritized this feature to be one among the quality parameters.
Also, when it comes to embeds and iframes the same issue rises. As we know both are used to add contents from other websites like Instagram or YouTube, or Gifs etc… This, if not inserted properly can cause trouble too.
Ways to optimize the usage of Ads, embeds, and iframes
- Define exact space for Ads
- Provide maximum space for ads
- Properly define dimensions of your embeds
- Test it with developer tools in Chrome
- Avoid Ad stuffing
3. Reduce server response time
The time it requires your server to load contents can add to the speed of your website. If your site is loading slow, it will effectively impact the user experience, right?
So, it is important that a faster server response time is needed to maintain the Core Web Vitals’ score of the website. If you haven’t optimized for better server response time, now is the time to start. You can start by benchmarking the current response time and check where you can make improvements. You can use server response time checkers like Bitcatcha for this purpose.
Ways to reduce server response time
- Choose a good hosting provider
- Optimize the webservers
- Integrate your WordPress website with plugins like WP Rocket to help optimize
- Optimize your database appropriately
The importance of optimizing CSS & JS is that it can affect the website’s loading & performance. One way to do this is by the process of minification of code. Minification means removing unnecessary spaces and characters from source code making it easier for execution. The basic idea of optimizing the code is to make write the code in a way that is easier to execute.
- Minification of code
- Inlining JS code (Can be done with Auto-optimize plugin)
- Usage of CSS codes and scripts in order (Place CSS in header & JS in the bottom)
5. Optimize fonts and icons
This issue is mostly caused by fonts and icons. These fonts can cause other loading issues like performance issues, slow loading time, swapped fonts, and blocked rendering etc. This can eventually result in the First Input Delay score to go down.
Ways to optimize fonts and icons
- Remove unwanted glyphs in font file
- Implement lazy loading
- Pre-load resources
As we know, the Core Web Vitals are released on an experimental basis. Google has not clearly stated how exactly on can improve Core Web Vitals score. What we can do now is tune your website to clear the issues as mentioned in the different tools available. Although, you can look at the CHANGELOGS provided by chrome on any updates to Core Web Vitals.
We hope this article has helped you to fix your website for Core Web Vitals. Do give it a try and let us know in the comments.