Optimizing the quality of user experience is key to the long-term success of any site on the web. Whether you're a business owner, marketer, or developer, Web Vitals can help you quantify the experience of your site and identify opportunities to improve.
Foreword
In this blog, let us try to understand what happens inside a search engine and what sets one website higher than another one in Google page rankings.
We shall try to understand some jargon like core web vitals, speed metrics, page ranking, SEO, and more. We will illustrate them in simple words to understand them better. For a brief and compressed version, please scroll to the last section of this article
Introduction
Do you sometimes wonder if your new website is reaching all your target audience? Are the users comfortable using your website or are they unhappy with the experience? As a blog owner do you wonder why don't you get new readers despite putting up thoughtfully curated diverse content?
Well, in the backend of your search engine (Google for example), there is an intelligent algorithm at play, called SEO(Search Engine Optimisation) that is responsible for displaying websites when a user searches for one, with a keyword. A site’s SEO score is determined by four factors. Technical, content, user experience, and mobile.
Tackling that algorithm will help you gain more visibility and reach more audiences. Page ranking is one of the most crucial segments of a good SEO score.
Understanding Page Rankings or SEO
From time to time, Google announces what according to them makes a good webpage. Web pages that meet their standards are ranked from best to worst.
To put it in simple words, Page rankings by Google indicate how important the website is to them. A higher position in Google’s ranking list paves a path for increased user traffic. Viewers also tend to associate a higher-ranked website as highly reliable and authentic. A higher page rank also translates to a good SEO score.
This time around, Google announced that they have modified their page ranking algorithm to focus on ‘page experience’. What determines the best page experience for a user? What benchmarks can you monitor to understand if your website gives the user a good experience?
The answer is core web vitals.
What are core web vitals?
Core web vitals are the important aspects that influence the user experience on a web page.
Google defines three core web vitals. They are,
- Largest Contentful Paint (LCP)
- First Input Delay(FID)
- Cumulative Layout Shift(CLS)
Let us now try to understand each core web vital in more detail
Largest Contentful Paint
LCP is the time taken for the largest element of the website to appear on the screen. If there is a video of 1 megabyte, a gif of 40kb, and an image of 100kb in a webpage, the time taken for the video to load completely determines the LCP time for the web page (not the total time taken to load the video, gif, and image together)
Benchmark
Tools like Lighthouse and chrome user experience report help in the measurement of LCP for a webpage.
According to Google, the LCP should be less than 2.5 seconds. An LCP above 2.5seconds but less than 4 seconds needs improvement. LCP greater than 4 seconds is considered poor as per google standards. Applying it to our example, the video should be ready to be played within 2.5 seconds of loading the website on the browser, to provide the best experience to the user
How to optimize LCP?
You can use some of the following suggestions to optimize LCP
- Improve server response time: It is a good idea to optimize your server, or route the user queries to CDN(Content Delivery Network) near them. You can also cache assets for a quicker server response
- Reduce blocking times: render-blocking resources like scripts and stylesheets introduce delays to LCP. So it is better to defer non-critical JavaScript and CSS (Cascading Style Sheets). Also, reduce CSS blocking time with tools like minify CSS or by inlining critical CSS
- Minimize time taken for loading resources: You can compress images and text files or preload some resources. You can also employ adaptive serving
- Special care for sites that render on the client-side: If your websites are rendered on the client-side instead of servers, then try to do some pre-rendering or minimize critical JavaScript. If possible, try to shift to server-side rendering.
First Input Delay
The first input delay is the time between the user’s first interaction and its response from the website. The quicker the response, the better is the browsing experience for the user. Though the webpage is completely loaded complying with the LCP benchmark, if the touches and swipes go unresponsive even for a short duration, the user experience is compromised.
Benchmark
FID can also be determined from the Chrome user experience report. For a good user experience, the FID should be less than 100milliseconds. Google classifies a response time between 100ms to 300ms as needing improvement and anything greater than 300ms as poor performance.
How to optimize FID?
You can use some of the following suggestions to optimize FID
- Avoid heavy JavaScript execution by breaking up long tasks and deferring unused JavaScripts
- Optimize your web page and keep it ready for interaction.
- Keep an eye on third party script executions so that they do not pre-empt the first party scripts
Cumulative Layout Shift
CLS measures how stable the webpage is by checking how fast do elements move around in the webpage. If a clickable button or an image moves while the user tries to click on it, or if the webpage shifts down due to an ad banner loading on top of the webpage, it leads to a layout shift. Google suggests keeping layout shifts to a minimum for a better user experience.
Benchmark
Lighthouse can be used to measure CLS too. By comparing the displayed frames, movement is identified. With this data, CLS is calculated.
A value less than 0.1 is considered to be a good score by Google, while a score between 0.1 and 0.25 needs improvement, anything above 0.25 is considered poor
How to optimize CLS?
- Avoid images without dimensions on your webpage. Always include size attributes in your image and video elements
- Reserve space for Ad slots and dynamic contents (like pop up dialogue boxes)
- Use transform animations instead of animation of properties
In a nutshell
Core web vitals are considered for page ranking in websites on mobile browsers only.
Google defines 3 core web vitals that greatly influence user experience and page ranking.
- LCP is a measure of webpage loading performance
- FID gauges responsiveness of the webpage
- CLS evaluates the visual stability
All three web vitals must fall in the ‘good’ score band as defined by Google to secure a higher position in page rankings and thereby improve SEO score.
Made with Superblog