Core Web Vitals: Definition, Introduction to LCP, FID & CLS, and Core Web Vitals Optimization Tips
March 17, 2021
Prashant Shukla
The year 2021 is remarkable in more ways than one. Search engines have evolved and become more competitive than ever before. Google plans to launch a new game-changing metric for ranking websites on it’s search engine. Good UX and page experience will become a crucial ranking factor – all thanks to Google’s newly introduced and soon-to-launch core web vitals.
With the anticipated roll out of Google’s core web vitals later this year, it has become increasingly critical for companies to catch up and optimize their websites according to this ranking factor.
If you’re not aware of what core web vitals are, what it consists of, and what you can do to optimize your website’s core web vitals, read on. This blog is for you.
In this blog, we will cover the A-Z of core web vitals and help you optimize your webpage for the same. Let’s begin.
What is Core Web Vitals?
Image Source: web.dev
Core web vitals are ranking signals or a set of criteria and metrics that Google uses to evaluate your website’s overall user experience. Google core web vitals assess your website’s speed, responsiveness, and visual stability alongside existing user experience signals to assess the overall page experience and user-friendliness.
Google plans to launch this new ranking signal in an attempt to improve the way it studies the overall experience provided by your page. The culmination of this data will be taken together by this search engine to rank your website on it’s SERPS.
The higher your website’s ranking, the higher its visibility will be. As page experience becomes an important ranking element, it is inevitable that you pay attention to it. To check your website’s Core Web Vitals data, look for the “enhancements” section of your Google Search Console account.
Why is Core Web Vitals important?
Core Web Vitals are ranking signals that are part of Google’s “page experience” score. It is important because Google is making page experience an official ranking factor on Google.
Image Source: backlinko.com
Here are some reasons why core web vitals is important and why it should matter to you:
- It is an enormous ranking opportunity for upcoming websites that can take full advantage of this new change in Google’s ranking assessment early-on.
- In the war between two websites with similar content quality and website ranking, page experience can make all the difference.
- Core web vitals are becoming more critical now because websites that have enjoyed unmatched rankings on Google’s SERPs now stand the risk of losing their current ranking to equally competitive websites if they don’t meet the new page experience standards.
Everything considered, it is essential to remember that your page experience score is only one of approximately 200 ranking factors that Google uses to rank websites.
To stay ahead and enjoy a competitive ranking advantage over others, you should keep optimizing your existing on-page and off-page SEO strategy while simultaneously optimizing your website’s core web vitals. While you won’t lose your ranking overnight, you most certainly can improve your ranking chances by optimizing your web core vitals in advance.
Three Signals of Core Web Vitals:
Image Source: web.dev
The top three page speed and user interaction measurements considered by Google in its core web vitals assessment include:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
Signal 1: Largest Contentful Paint (LCP): Checks Loading Performance
LCP is the first core web vital metric that Google uses to calculate your page experience score. It measures your web page’s loading performance.
Largest Contentful Paint or LCP can be defined as the duration it takes for a page on your website to load from an actual user’s perspective. In simple words, the time it takes for your user from clicking on a link to seeing the majority of your website’s content on-screen is called LCP.
LCP focuses on what truly matters in terms of page speed, i.e. a user’s ability to see and interact with your page without obstruction.
To check your LCP score, use Google’s Page Speed Insights. All you have to do is:
After clicking on ‘analyze’, Google will show you a comprehensive report of your current page. Go through it to learn about the gaps in your website. The results will also give you an insight into your web page’s performance in the real world based on chrome browser data.
You can also directly look at your LCP data on Google’s Search Console (GSC). We recommend it over using Google’s Page Speed Insights because of the following reasons:
- On PageSpeed Insights, you’ll get a report of a single webpage you have entered on the search bar for analysis. On the search console, you will see the LCP data of your entire website.
- Through Google’s Search Console, you will get a full list of URLs on your website that are good, bad, or somewhere in between.
- Google’s LCP guidelines categorize your website’s LCP as ‘good’, ‘poor’, and ‘needs improvement’.
The ideal LCP measurement is 2.5 seconds or faster. The faster your page’s main content loads, the better your LCP score. This can be challenging for you if you have a large website with large pages and multiple features.
Signal 2: First Input Delay (FID): Checks Interactivity / Responsiveness
The First Input Delay is Google’s second core web vital. It measures interactivity.
In simple terms, First Input Delay (FID) refers to the time it takes for a page to become interactive. You can say that it measures the duration it takes for an activity to happen on a page. More specifically, it measures the time it takes for users to actually do something on your page.
The ideal FID measurement is less than 100 ms.
Here are some examples of on-page interactions that are calculated for FID scoring:
- The time it takes for a user to choose an option from the menu.
- The time it takes for a user to enter your email into a field.
- The time it takes for a user to click on a link in the site’s navigation.
For business websites that collect user data or ask for login details, FID scoring is incredibly crucial.
Signal 3: Cumulative Layout Shift (CLS): Checks Visual Stability
A Cumulative Layout Shift (CLS) is a core web vital that measures visual stability. It is a metric that calculates all layout changes that are not caused by user interaction. In other words, we can say that this metric takes into account the visual stability of a page as it loads.
If more elements on your page move around while the page is loading, the higher your CLS would be. If fewer elements move while your webpage loads, the lower your CLS.
The lower your CLS, the better your page score performance.
A CLS score of less than 0.1 is considered ideal for a webpage so make sure that you target this while optimizing your website for optimal page experience.
How to Optimize the Three Web Vitals (LCP, FID, CLS)
Optimizing the three web core vitals is important to improve the page performance and your web page’s overall page experience. Here are some ways you can improve them.
How to optimize the Largest Contentful Paint (LCP):
Here’s a list of what you can do to improve your website’s LCP:
- Minify your CSS: The smaller the CSS, the faster your LCP.
- Remove large page elements: Fortunately, Google’s Page Speed Insights will show you if there’s an element on your website that is slowing down your page’s LCP. Once you identify what it is, you can quickly resolve it. For example, an analysis of Techmagnate’s LCP score on Google’s Page Speed Insights shows up this element as faulty:
- Upgrade your web host: With better hosting comes faster load speeds (including LCP).
- Remove unnecessary third party scripts: Avoid third-party scripts as much as you can.
- Set up lazy loading: Lazy loading means that images load only when a user reaches that point on your webpage that features an image. By setting up lazy loading, you can achieve LCP faster.
Executing the tips mentioned above can help you enhance the LCP perfection it takes to get a good LCP score. The better your LCP score, the better your page experience score and ranking chances. So optimize your LCP now if you haven’t already.
How to optimize First Input Delay (FID):
Here are some steps you can do to improve your site’s FID scores:
- Minimize (or defer) Javascript: Minimizing or deferring JS on your page can help you enhance your web page’s FID speed as the need for your browser to load JS gets reduced or eliminated.
- Remove non-critical third-party scripts: Third-party scripts like Google Analytics and heatmaps can negatively impact FID and the content loading speed. Identify the ones that are not crucial for your website and remove them if they’re not critical for your webpage.
- Keep request counts low & transfer sizes small: Optimize code to restrict request counts and minimize transfer sizes of HTML files, media, images etc.
How to optimize Cumulative Layout Shift (CLS):
Here are some simple actions you can take to improve your CLS:
- Assign ad elements a reserved space on your webpage: Doing this simple task will ensure that your content remains where it should be. Web pages that don’t have a designated ad space tend to mess up with the content structure and positioning, sometimes pushing it up and down the page resulting in a high CLS and a bad page experience score.
- Add new UI elements below the fold: When a user browses through a page on your website, they expect elements to stay where it is. By adding UI elements, you can ensure that this happens and the page content structure stays unaffected.
- Use set size attribute dimensions for media: Using a set size attribute dimension for media such as videos, images, GIFs, infographics, or other media elements is important. Doing this will show you how much space that element will take up on that page, thus helping you protect your webpage from unprecedented content misplacement.
Our Website Design and Development Services helps to optimize the Core Web Vitals Score.
How to Measure Web Vitals Score:
Now that you know what the three core web vitals are, here are some tools to help you measure it.
- Google’s Search Console: Another powerful and extremely convenient tool for analyzing your core web vitals is the Google Search Console. It comes with a unique core web vitals report under the enhancements section that you can check everytime you conduct a website audit. The best part: Instead of showcasing the page performance of a single web page, search console shows you all webpage performance data in one go.
- PageSpeed Insight: Google’s PageSpeed Insight is a powerful tool that shows you your web page’s core web vitals alongside valuable advice on improvements you can make.
- Lighthouse: Lighthouse is another Google tool that you can use to measure your core web vitals. Formerly designed to audit PWAs, it has now transformed into a potent tool for monitoring performance. Armed with extra features and SEO checks, lighthouse can be fittingly described as a potent tool for analyzing your web page’s speed and page experience data.
- GT Metrix: GT Metrix is a website performance testing and monitoring website. It is a free tool that you can use to evaluate your LCP, TBT, and CLS performance.
How to audit Core Web Vitals using Screaming Frog:
The concept of auditing core web vitals is relatively new. For those of you who want to stay prepared and optimize your website’s core web vitals, using a tool like Screaming Frog can help, especially if you already have a subscription to its premium membership.
Here’s what you will need:
- A paid version of Screaming Frog.
- A PageSpeed Insights API key.
- The domain of the websites you want to audit.
Let’s begin.
Step 1: Connect the PageSpeed Insights API Key to Screaming Frog
Step 1 to using Screaming Frog for optimizing your core web vitals includes connecting your PageSpeed Insights API Key with it. When you connect them, you can access the PageSpeed Insights data and recommendations on a page by page basis on your Screaming Frog dashboard.
Here are the steps you should follow:
- Open Screaming Frog → Configuration → API Access → PageSpeed Insights.
- Page your API Key from PageSpeed Insights into the ‘Secret Key’ box.
- Click ‘Connect’.
- After clicking ‘Connect’, click on ‘Metrics’.
- Choose the metrics you want to audit, and click ‘Ok’.
Step 2: Crawl the Website.
The next step includes crawling your website.
All you have to do is enter the website’s domain name you want to crawl into the box that reads: ‘Enter URL to spider’. After you make the entry, wait for the ‘Crawl’ and ‘API’ progress bar to load.
Once they load to 100%, you can analyze your data.
Step 3: Report the problem to relevant authorities.
After the tool loads your data, you will get a compilation of all the web pages on your website. Here, you need to analyze the number of web pages failing minimum Core Web Vitals thresholds in terms of percentage figures.
Here are some steps you can follow:
- Click on the top navigation bar.
- Click Pagination.
- Click on Page Speed from the drop-down menu.
- Click Export.
After you export the data, fill up the following columns:
- Largest Contentful Paint Time (ms): Put a filter to find pages with 4000ms LCP or more.
- Total Blocking Time (ms): Put a filter to find pages with 300ms TBT or more.
- Cumulative Layout Shift: Put a filter to find pages with 0.25 CLS or more.
Based on this data, you can create a report and send it to a client. If you’re conducting this audit for your in-house page experience optimization requirements, you can send this data to the relevant team, and they can execute the page optimizations accordingly.
Step 4: Report page-wise issues with recommendations.
Now, this is the step where it gets interesting. You are now aware of the percentage of the pages on your website that are failing to meet the minimum Core Google Web Vitals standards. What next?
Do a neat compilation of the relevant problems based on the metric you want to target. Here’s what you can do:
- On the right-hand side of the ‘Overview’ tab, scroll down to PageSpeed.
- Here you will find issues & recommendations related to your website’s page speed, including potential solutions to improve your core web vitals.
- The drop-down of page speed will include various metrics such as:
- Eliminate render-blocking resources (impacts LCP)
- Minify CSS (impacts LCP)
- Minify JavaScript (impacts FID)
- Remove unused CSS (impacts LCP)
- Removed unused Javascript (impacts FID)
- (and many more)
- Click on an issue to see the number of affected pages and export this data into your worksheet. Doing this will help you export all URLs with the relevant issues.
- Based on the data, you can make a judgment call regarding the removal or deferral of these elements from your web page.
Additional Read: What is Page Speed SEO
Step 5: Post-audit and optimization, crawl the site again and compare.
After you have identified the factors affecting your core google web vitals, you can make the optimizations. Post-optimisation, your job is to crawl your site again to assess the results.
Compare the percentage of web pages that don’t meet the minimum core web vitals requirements post-optimization with the numbers pre-optimization.
Other Page Experience Factors You Should Consider:
Here is a list of the top additional factors that Google considers necessary for user experience:
- Safe browsing: If your website does not allow safe browsing, it will be seen as a violation of page experience standards, and you will get a low page experience score. So ensure that your website does not contain malicious or deceptive content such as malware. You can check the safety compliance standards of your website on Google’s Security Issues Report.
- HTTPS: Websites that begin with an HTTPS are more likely to have a secure site connection. If you don’t have a website that begins with HTTPS, learn how to secure your website with HTTPS here.
- Mobile-friendliness: Check if your webpage is mobile-friendly using Google’s Mobile-Friendly Test. If your web page is not appearing as ‘mobile-friendly’ in this quick assessment, execute strategies to optimize your website for mobile phones and tablets. Among other things, improving UX & UI and perfecting off-canvas navigation can help.
- No intrusive interstitials: The content on your webpage should be easily accessible to a user. The lack of it can land you with a low page experience score. Here are the top things you should avoid to make web page content more accessible to your users:
- Avoid using pop-ups that block the majority of your website content.
- Avoid displaying a standalone interstitial that covers the entire screen. This is intrusive as a user has to dismiss it before they can access the main content.
Conclusion:
Google is ready to roll out core web vitals as a key ranking signal in May 2021. The need of the hour is for companies to optimize their websites for this key ranking criteria in advance.
In this blog, we have illustrated the much-needed steps you can take to improve your web core vitals. We have discussed what a core web vital is, the top three metrics for core web vitals, and what you can do to optimize your web page for a good core web vitals SEO score.
We have also outlined a quick hack for analyzing the page experience for those who use Screaming Frog for website auditing. We hope that the information we have provided here has helped. Implement them in your website optimization strategy to maintain your Google rankings.
Let us know in the comments section if you have any doubts or queries.
We would love to hear from you.