Back in mid 2020, Google announced essential metrics for a healthy website. These metrics are in turn to help site owners in achieving an overall great user experience.
Within this article, we will look into these metrics and how to test them within a website using Googles’ own tools.
Table Of Contents
What Is Google Lighthouse
Core Web Vitals
Tips to Improve Your Core Web Vitals Scores
What Is Google Lighthouse
Google Lighthouse is a tool that helps you improve the performance and quality of your website.
Using the tool, users are in a position to carry out an audit of a website, mainly focussing on core web vitals.
Lighthouse generates a report on the following key areas:
1. Performance
2. Accessibility
3. Best Practices
4. SEO
5. Progressive Web App
Core Web Vitals
These are standardized factors that Google uses to understand users’ experience of a web page.
User experience is one of the main factors that Google uses in page ranking within search results.
The main core vitals include:
1. Largest Contentful Paint (LCP)
This metric checks when the most important part of a page loads, where this part forms most of the content within the page and is readable to the user. The content can be in the form of images, text,videos e.t.c.
This is quite an integral part of the user experience as web users do not want to have a long waiting time for any particular content within a page to load. If for example you have a page with minimal text and the rest of the content is mainly videos, the videos will be the LCP and hence it would be vital to have them optimized.
When it comes to page speed, LCP mainly focuses on what really matters within a page.
How to check your sites’ LCP score
In order to determine your sites’ LCP score, you can then use Lighthouse for this.
In order to run Lighthouse, you can use the chrome browser dev tools. To do so, carry out the following:
i) Visit the site you wish to audit, in incognito mode
ii) Access the Chrome dev tools
iii) Enable the Lighthouse if not enabled and on the lighthouse tab
iv) Select all the categories and Device you wish to carry out the audit
v) Generate the report
vi) With this done, you should have a report on the page:
Another alternative that can also be used is PageSpeed Insights.
Below is a sample test:
For a good LCP, the load time should be at least within 2.5 seconds. If the content takes more than this to load, then this would lead to a poor user experience.
2. First Input Delay (FID)
This measures the amount of time it takes (delay) for a web browser to respond to users’ first interactions. Examples of such interactions include; clicking navigation links, button clicks, field inputs, e.t.c.
Similar to LCP, this can be measured via PageSpeed Insights or Lighthouse.
An FID of 100 ms is considered quite good and there will be no noticeable delays by users. If however it exceeds 300ms, then it is considered poor and delays are noticeable by Google algorithms.
3. Cumulative Layout Shift (CLS)
This metric helps in determining the website visual stability by determining how many times components within the website jump when loading.
The more the jumps, the poor the user experience. Take for example a loading CTA button and in the background there is a slowly loading video. Initially the button may be loaded towards the top, but as the video loads, the positioning of the CTA moves towards the bottom and a user is not in a position to click on it, till the video is fully loaded.
Similar to LCP, this can be measured via PageSpeed Insights or Lighthouse as can be seen from the example below:
Tips to Improve Your Core Web Vitals Scores
1. Increase the server response time
Having a fast server response time greatly contributes to high speed metrics, which include LCP. The faster the server response time, the lesser the page load time.
One of the ways to ensure a fast server response time is using a good hosting provider with good performance.
2. Optimize and compress images
Images are likely to form the LCP of a website. It is hence recommended to have the images optimized in order to ensure that the webpage is quickly loaded and thereby having a lower LCP.
A tool such as Tinyjpg can be used to compress the images that you upload to your website.
Here is also a guide on image optimizations in WordPress.
3. Optimize Scripts and remove any unnecessarily third-party scripts
You need to check if there are third-party scripts that are slowing down your site, and if you trace them, have them removed as these are likely to have a negative impact on the FID.
Ad scripts for example may not be necessarily within multiple sections on a website, and hence it would be important to determine whether they are really necessary within particular sections on the website.
In addition, you should consider optimizing your Javascript. Some of the ways this can be carried out include: Minifying Javascript files, Inline external scripts, Eliminate render blocking resources amongst others.
4. Implementing Lazy Loading
Lazy loading will help in achieving a good LCP in that, images will only be loaded once a user scrolls to a particular section within the site, thereby reducing the load time of a web page as well.
Here is a guide on more details relating to Lazy Loading.
5. Specifying Content dimensions
Specifying dimensions to content such as images, videos and ads is quite vital as it helps in reducing the Cumulative Layout shift.
If there are no dimensions assigned to such content, more specifically within the CSS, the elements are likely to jump during page load.
Conclusion
Google mainly uses three main metrics (LCP, FID, CLS) to determine the performance, responsiveness and Visual stability of a particular website.
It is hence important for website owners to carry out improvements to their sites based on these metrics as they will influence the site ranking.
No Comments