What are Google Core Web Vitals?
Google has a “Core Web Vitals” factor, which is considered to be one of the most important ones for user experience on web pages. Being important for user page experience, the core Web Vitals will also become a part of Google’s Ranking Algorithm.
Generally, it analyses the way your website responds to the user. The speed of working of your website, weight on it and others, so you can improve it accordingly. As it depends on user experience with your webpage, Google pays special attention to it.
There are three main sub factors of Google Core Web Vitals explained Below:
Largest Contentful Paint (LCP)
LCP measures the largest element on a blog, which can be an image, video, CSS, animation or something else. Your website doesn’t load everything at once. It is always the case that there are some CSS, Images, or other elements/blocks on a webpage for which browsers need to repeatedly send requests to the server.
To display Content on a webpage, the browser sends a request to the server and demands a display for it. The longer the browser will send a request to the server, the longer it will take to load a webpage.
In short, the time in which the browser keeps sending request to the server for complete display is the Largest Contentful Paint (LCP). Lesser the request to the server, faster the loading time. According to Google, the LCP should be equal to or less than 2.5 seconds is good, if it somehow exceeds 4 seconds, it will be stated as poor LCP.
First Input Delay (FID)
Another factor of Core Web Vital is FID. Its basic duty is to measure the time of user interacting with your website. In simple words, anything user do on your website whether it is Click on webpage, highlight line or scroll down. All such Functions will be measured by FID.
Technically, the Main Task of FID is to measure the time it takes for something to happen on a page by the user, but somehow it actually measures the time it takes the user to interact.
That is why for Blogging sites FID isn’t a big deal, all the interaction a user can do with is Zoom in/out or scroll down, while other websites which ask to sign up or provide any results for input should have a good FID.
Cumulative Layout Shift (CLS)
There is something called the stability of elements and blocks in the webpage. The CLS is responsible for measuring that stability in your webpage. The stability is a big factor of Core Web Vitals and it also leaves an impression on user.
We can take the example of a user reading any blog and suddenly the area it was reading begins to navigate. It can be the result of not optimizing font size, or any ad of a third party that may load late on the page.
CLS helps Google understand the experience of your whole website and shows results according to it.
How to Test Core Web Vitals?
After knowing all that, you must be thinking of testing your website, but don’t know how to, so here also I shall help you by explaining it all.
The Core Web Vital is a Google factor/algorithm, so Google also gave multiple ways to test your website/Webpage.
Search Console
Google Search Console is the best way to analyse a whole website, including Core Web Vitals. Once you connect a search Console with attachment, you will be able to see the working of your website on it.
There is a section of enchantments you will see in a left sidebar in which the first option will be Core Web Vitals. After clicking it you will be able to analyse your Web Vitals, and work according to it.
The results will be expressed as the graphs where all the three factors will be displayed in different colors, the graph will be shown as Days by Working performance. So you can know the day your webpage started getting better or worse.. The
PageSpeed Insight
There is a PageSpeed Insight named tool in Google. All you have to do is insert the URL of your website and it will show all the results of it. This Google Tool provides all the data you need and gives a percentage result in a gauge. The gauge changes color according to the result, from 0 to 49% the color is red around it, which is a poor result. It changes color when it exceeds from 49% and remains yellow till 89% and said to be an OK result, but I shall prefer you to make it green where the result is good, and above 89%.
The Facts will be displayed down, which will explain the problem of your webpage.
Core Web Vitals With Chrome Extensions
There is a Chrome Extension Web Vitals which also helps to analyse such factors. It Will give you the result of any page opened on your browser.
But if you want to save some time and look at Web Vitals of multiple sites at same time, then I would prefer you to add Core Serp Vitals, it will help you see the results on serps. The result of it isn’t any graph or gauge but simply written under the URL in SERPs
WordPress Speed Optimization
People find it hard to speed optimize the WordPress Website, it’s because sometimes keeping low elements and pictures also don\’t help load faster or the user doesn’t get the expected response. It can be the reason for the heavy theme, excess of third party cache, or your website is unable to put its cache on the user\’s browser.
So there are some good lists of plugins for websites, which help us to cover this all by just installing them from which we are going to discuss the best of them.
1. WP-Rocket
WP-Rocket is a WordPress plugin. It\’s a multi-feature plugin that’s why people prefer this one instead of installing other plugins for the same task. It’s because the big number of plugins also slows down websites, so webmasters prefer one plugin with multiple features.
The Features it has are:
- Decrease the size of your file and make it lighter
- Lazy Loading is set so the media loads when it has to.
- Gets your website a best cached version
- Make your database light to make it run faster.
- Gives more power to the Elements and Blocks on the page
- Remove unnecessary cache for Ultra Speed.
2. LiteSpeed Cache
LightSpeed Cache is also one of the most useful plugins to remove third party and unnecessary cache in WordPress. It is famous due its server-level caching, which is a little bit faster than the others, which provide file based caching. It also provide some other speed optimization like WP-Rocket like
- LiteSpeed Cache
- LiteSpeed server
- QUIC.cloud CDN
Which turns into a great combination for optimizing Web Speed
3. Perfmatters
Perfmatter is a WordPress plugin which not only removes cache but also removes Bloat, unimportant assets and unneeded features (Mostly JS and CSS)in the website. It manages assets on every single page of a website one by one and gives you suggestions to remove elements and scripts from the page in order to optimize web speed.
The Features of this plugin include:
- Decrease the autosave intervals
- Disable WordPress Heartbeat
- Optimize WooCommerce fragments like style and cart
Perfmatters also provide a script managing feature in which you can disable plugins and scripts yourself on any specific content/Page, and you can also control the place where the plugin should be loaded.
It can disable scripts like:
- Unused CSS and JavaScript in page editor
- Sliders on page where slider isn’t being used
- Contact form on pages where contact form lacks
- Affiliate links management plugin page affiliate links are not present.
4. Async JavaScript
Async JavaScript is a plugin developed to control all the javascripts in the website. With this plugin the webmaster can choose which script should “Async” or “Defer” the attributes to include or exclude to increase the speed of your website.
All you have to do is click on “apply Async” or “apply defer” to make it done, some people also use it for render Blocking.
5. Oxygen Builder
Oxygen Builder is a plugin of page builder, This Page Builder has extra and better CSS and JavaScript, But unlike other page builders it has lower Core Web Vitals Score. It doesn’t use big size blocks and images and let you have a smooth display and highly interactive page.
Shopify Speed Optimization
There are several things different in shopify in order to keep the Web Vitals in Good position. Just like other website we have to take care about FID, LCP and CLS, but sometimes it isn’t enough to do speed optimization of shopify sites, unlike WordPress we can’t install any plugins also in it, but the benefit of shopify is that it shows the result of Web Vitals of not only our sites but also our competitors. That report is made by Chrome UX report, which is dependent on the chrome users experience
There are some ways to increase Core web Vitals in shopify also, from which some of them are discussed below.
Analyze your Store
The first thing is to analyze your shopify store or test it to measure the Core Web Vital in it. Once the test is completed and you get the result, check for the pages we lower or with poor performance. Now you know the pages you should work to make everything Good.
Arrange the Old Elements above the Navbar
It’s better if you keep your elements compressed, which are above the fold, it’s because if you have the elements above the fold and they are high in size. It’s gonna take longer than expected and if you also add lazy loading on that image, the result may get worse.
The lazy loading works if we scroll down but if the picture or element is already above the fold, things will get worse. So it will be great to disable lazy loading and try to compress.
If you can’t compress the files, try to move it under the fold so the better way will be to take your element below the fold and work with lazy loading according to it.
Use Better Extension of Image
People usually use Jpeg files or PNG files to get the shortest possible and compressed images, while when it\’s the turn of GIF or other animated content, the format is used with the extension of WebPs.
Shopify allows you to place a WebP image or animated content in it. We can use this opportunity and upload the shortest image possible with WebP format. This will help the image open as soon as possible and will help to make LCP better. Try to use such kinds of pictures for Product Images.
PreLoaders
Preloader looks cool for people with slow connection and saves you from LCP, But somehow it disturbs the FID and CLS. It\’s because the Core Web Vital waits for the user to interact while the elements on page are placed behind the Preloader which result in a bad impression for users as well Web Vitals.
The Best thing will be to remove Preloaders and keep your elements compressed so it can open in the device with low connection.
Scripts Optimization
Scripts are something that can affect the FID at a larger scale. As long as the scripts take to load, there will be a bad impression of FID.
To optimize the scripts you can work with Minify Plugin, it will help you crunch down the scripts, and make some space, so your scripts load faster.
Try to keep your scripts in the footer, so that all the scripts load after the page loads, have a look if any script changes the layout, it can affect CLS if your script loads at the end and changes the layout accordingly.
CSS Sprite
CSS Sprite is a collection of images. It can be built by combining one or two dozens of pictures like icon, logo, banner image, etc. in a single image. It can load multiple images at the same time.
In this way you can load a good amount of data at the same time and decide the position of the images to load on WebPage. It will help you get a great LCP and FID.
Golden Tips to Improve Core Web Vitals
LCP Improvement
- Compress large size images into KBs
- A good Hosting can be a reason of good LCP
- Make sure to remove the elements which take time to load
- Set a Lazy Loading feature, so image loads when user scroll down
- Unnecessary or 3rd party script can increase your LCP more than 10 seconds
FID Improvement
- Try to keep JavaScript low
- The Cookies or browser Cache in your website.
- The third party and non critical scripts should be removed from time to time.
CLS Improvement
- Fix the area of ads elements
- Insert a UI Element under the Fold
- Fix the area and dimensions of the media files (Image, videos, gifs, etc.)
Final Product
By keeping these things perfect, Google Core Web Vital percentage will increase in a good way and the user experience of your web page will get better.
Your webpage won’t take long to load. The elements on it will be perfectly displayed and well interacted.