from Google is the new ranking signal in the town expected to arrive with full force in 2021. It will join the ‘page experience signal’ to promote the websites for developing better user experience characteristics like mobile-friendliness, loading speed, etc. Core web vitals But before taking a deep dive into the core web vitals, it is important to have a quick understanding of the page experience signals first to develop a better picture of the core topic. “The role of page experience signals is to evaluate and measure the experience of users while interacting with a website page.” The data collected through page experience signals can be analyzed and put into action to optimize the site for improved performance so that the users can have a seamless experience while browsing around the website. It is a great way for a business to strengthen its bond with the target audience and build long-lasting and trustworthy relationships. Although these signals are not just limited to assist businesses in building concrete relationships. Websites that will take effective actions from page experience signal metrics shall have a better chance to shine in the search results because Google intends to create an improved web experience environment for the users. The page experience signal metrics are taken into account when it comes to ranking a website on Google search engine result pages. As of now, the “page experience signal” includes the following metrics- Mobile-friendliness Secure browsing HTTPS-security Intrusive interstitial If necessary implementations are observed to improve the position of these aforesaid metrics for a website, then it will help to push the URL to a more competitive spot on the search engine result pages. However, these metrics are not detailed or comprehensive which sometimes do not provide a clear direction to the website owners. Core web vitals somewhere fill this gap as they are more detailed and provide actionable insight. So, how do core web vitals work and how can they help the websites? Let’s find it out. Understanding All 3 Core Web Vitals As already discussed before, the core web vitals is not a new category of ranking signal, but an addition to Google’s existing ranking factor- “page experience signal”. The core web vitals will stage the page experience signal to the next level with its informative metrics and help the owners, developers, or marketers to navigate the opportunities for the improvement of website experience. So, the three core web vitals are as follows: LCP (Largest Contentful Paint) FID (First Input Delay) CLS (Cumulative Layout Shift) LCP (Largest Contentful Paint) The usual speed measurement metrics like- Time to first byte (TTFB) or First Contextual Paint (FCP) are not the most effective ways for highlighting the web pages’ speed because they don’t correspond to what a user sees on the screen while interacting with the page. When it comes to website speed, then what matters the most is- how much time it is taking for a user to interact with the largest contents of the page. This is where LCP comes to the rescue. LCP measures the time a web page takes to load from the users’ perspective. To put it in other words, it determines the time consumed for loading the largest content (text, image, or video block) on the screen right after the user has requested the URL. So, how to know if the LCP score of the website is good, average, or bad? According to the specific , the LCP speed of the website can be categorized into any of the following three- LCP guidelines of Google (if the largest content on the page loads within 2.5 seconds) Good (if the largest content on the page takes more than 2.5 seconds but less than 4 seconds to load) Needs Improvement (if the largest content on the page takes more than 4 seconds to load) Poor source: web.dev Hence, a website’s goal should be to hit the LCP within 2.5 seconds for every page that it has. FID (First Input Delay) First Input Delay is another core web vital that calculates the time taken by the website to respond to the interaction request of the user. These interactions with a website can be anything like- selecting an option from the menu, putting the email address into a field, choosing the newsletter subscription offer, etc. So, how to know if the FID score of the website is good or not? According to the specific , the FID speed of the website can be categorized into any of the following three: FID guidelines of Google (If the site response time is less than 100 milliseconds) Good (If the site response time is more than 100 milliseconds but less than 300 milliseconds) Needs Improvement (If the site response time is more than 300 milliseconds) Poor source: web.dev FID measures the time it takes to do something on a web page, hence, it is also a speed score. Although it goes one step ahead as it evaluates the time consumed for the users to execute something on the website. CLS (Cumulative Layout Shift) An unexpected change in the web page layout leads to a very bad user experience. For example, if a user is reading a blog on a website but the text shifts to another place without any warning, then it will create an annoying experience for the users. Also, the unexpected movement can happen for not only text but for other elements on the page also such as links, images, fields, or call-to-action buttons. It is not at all good for the reputation of the website. Hence, it is important that such issues related to the unexpected movement of content are resolved. For this purpose, the third core web vital of Google- CLS is here to guide because it evaluates how often such unexpected movements are being faced by the users. CLS calculates the stability of a web page layout. So, how to know if the CLS score of the website is good or not? According to the specific , the CLS score of the website can be categorized into any of the following three: CLS guidelines of Google (If the CLS score is less than 0.1) Good (if the CLS score is more than 0.1 but less than 0.25) Needs Improvement (if the CLS score is more than 0.25) Poor source: web.dev So, if a website wants to present a good user experience, then it should have a CLS score of less than 0.1. Tools for measuring Core Web Vitals There are six tools from Google as of now that can help in measuring core web vitals. These tools are easy to use and allow quick evaluation of the LCP, FID, and CLS position of the website. Check them out below- PageSpeed Insights Chrome UX Report Search Console Chrome DevTools Lighthouse Web Vitals Extension source: web.dev : Anybody can visit the tool, insert the web page URL, and click on the “analyze” button. That’s it. In just three easy steps, the core web vitals data will be generated for both web and mobile interface along with the suggestions that can help to improve the page experience. PageSpeed Insights PageSpeed Insights : The for Google Chrome can be downloaded to generate the core web vitals information. It was recently updated to version 6.0 that has introduced additional audits and new metrics like TBT for a detailed diagnosis of web page performance. It also helps in providing opportunities to reform the UX of the website. Lighthouse lighthouse extension : , also known as CrUX is a public dataset that has been made from various samples collected from chrome users’ browsing experience on the web. This report measures all three core web vitals and reports the real-world information instead of the lab data which is very useful. Chrome UX Report Chrome UX report : Chrome DevTools is great for website owners to find and restore visual instability or unexpected layout shifts issues present on the web page. The investigation for such issues on the pages can be done from the new in the performance panel of the tool. It also calculates TBT- Total Blocking Time which can assist in improving FID. Chrome DevTools experience section : for Chrome measures all three core web vitals- LCP, FID, and CLS in real-time. Web Vitals Extension Web Vitals Extension : The tools discussed above lack one thing or another that prevents them to be labeled as a one-stop solution for rectifying all the user-experience related issues, but this is where the Google Search Console joins the game. It has a lot of features that can assist in the foolproof improvement of page experience. The tool analyzes every page of the website and detects the ones that are having problems related to LCP, FID, or CLS metrics. It also lists out the opportunities for improvement to allow website owners and developers to implement necessary solutions. Google Search Console All three core web vitals can be evaluated in Javascript  by using standard web APIs. The is the most simple way to calculate each metric of core web vitals. Measuring each metric with web-vitals JavaScript library is as simple as calling a single function: web-vitals JavaScript library {getCLS, getFID, getLCP} ; { body = .stringify(metric); (navigator.sendBeacon && navigator.sendBeacon( , body)) ||
      fetch( , {body, : , : });
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics); import from 'web-vitals' ( ) function sendToAnalytics metric const JSON // Use `navigator.sendBeacon()` if available, falling back to `fetch()`. '/analytics' '/analytics' method 'POST' keepalive true However, it is recommended to go with the six tools and extensions mentioned above so that you don’t have to pull any extra effort in writing codes. The next important thing to discuss is- how optimized images improve the core web vitals of a website and SEO. Let’s discuss this. Role of Optimized Images in Core Web Vitals The most important thing for improving the page experience quality of a website involves- image optimization. The large image placed on the homepage of a website is often the LCP (Largest Contentful Paint) and if it is not optimized, then it will affect the LCP score because of slow loading. It will not serve a good user experience. In image optimization, the objective should always be to compress it to the right size and right format without affecting the quality of the image. Optimized images not only improves the loading time of a web page but also provides the much-needed SEO advantage. Implementing the next-gen image formats like AVIF and WebP can be observed during image optimization as these formats bring the best quality in low-size. The good news is that the majority of the popular browsers extend support to these modern formats. All three core web vitals have one single objective- to improve the page experience factor by focusing on the website’s speed and performance and optimized images are the best solution to gain the advantage. Although, the organizations often fail to find the balance in size and format while optimizing the images. This problem will become a hurdle when the companies will optimize for the core web vitals. For this purpose, the experienced development team at can provide a wide range of robust solutions for optimizing images. The ImageEngine team puts service into the application that takes care of converting the images to next-gen image formats (having the best quality at low size) like WebP, AVIF, etc. and then serving the same to the popular browsers. ImageEngine image CDN Wrapping it Up: How ImageEngine will Help Boost SEO optimizes the images to provide companies of all sizes with a competitive SEO advantage. The in-house experts understand how the search engine behaves and interprets the image when ranking the URLs. ImageEngine Our image CDN service reduces the loading time of the website which initiates a string of events. When the site performance and speed are elevated, then the bounce rates are reduced. It is important to control the bounce rates. According to Google if the loading time is increased from 1 second to 3 seconds, then the bounce rate will shoot up to 32% and if the loading time is increased from 1 second to 6 seconds, then the bounce rate will jump to 106%. This is bad not only for the business but for search engine ranking also. Once the bounce rates are under control, then the website engagement and user experience progress to improve the probability of additional conversions. The end result is a successful business as well as a better ranking on the search engine. This is what the team at ImageEngine strives to achieve so that your business grows with a perfect blend of technology and experience. Previously published at https://imageengine.io/blog/improve-core-web-vitals-with-imageengine

Fetch

Google

Target

Core Web Vitals: How To Improve To Rank Higher On Google And Succeed In Your Business

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Automatic Image Optimization: Next.js 10 New Standards for 2020

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

5 Tips to Improve the Core Web Vitals of WordPress Websites

7 Ways to Achieve a Faster Core Web Vitals Score

8 Ways to Improve the CLS Score in Google’s Core Web Vitals

A Beginner's Guide: Responsive Images With srcset

Automatic Image Optimization: Next.js 10 New Standards for 2020

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

5 Tips to Improve the Core Web Vitals of WordPress Websites

7 Ways to Achieve a Faster Core Web Vitals Score

8 Ways to Improve the CLS Score in Google’s Core Web Vitals

A Beginner's Guide: Responsive Images With srcset

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps