In today's fast-paced digital world, having a website that loads quickly, performs well, and provides a seamless user experience is essential for attracting and retaining visitors. As a web developer, it's your responsibility to ensure that your web pages and applications meet these expectations by testing them for speed, accessibility, SEO, and best practices. Fortunately, Google Chrome Lighthouse devtool is a free and powerful tool that can help you with that.

Lighthouse is a powerful tool that can help you audit your web pages and identify areas for improvement in terms of performance, accessibility, and SEO. With Lighthouse, you can run a comprehensive analysis of your webpage and receive actionable insights on how to optimize it for better user experience and search engine visibility.

In this article, you will learn about the importance of optimizing web pages and dive into the concept of web vitals, as well as their significance. You'll then be introduced to the powerful Google Chrome Lighthouse devtool and learn how to leverage its capabilities to improve your website's speed, accessibility, and overall quality. Whether you're a seasoned developer or a novice, this article will provide valuable information on how to take webpages to the next level using the Google Chrome Lighthouse devtool.

Why Optimize Your Webpages?

Optimizing web pages is a critical aspect of web development that can have a significant impact on user engagement, search engine rankings, and website performance. Web developers should optimize their web pages for several reasons, including:

1. Improved User Experience: Optimizing web pages leads to faster load times, which improves the user experience. Users tend to abandon pages that take too long to load, so optimizing pages can reduce bounce rates and increase user engagement.

2. Higher Search Engine Rankings: Search engines like Google use page load speed as a ranking factor. Faster pages are more likely to appear at the top of search engine results pages, which can drive more traffic to a website.

3. Lower Bandwidth Costs: Faster pages require less bandwidth to load, which can save money for website owners who pay for hosting or data transfer fees.

4. Improved accessibility: Optimized pages are more accessible to users with slow internet connections or older devices, as well as users with disabilities. Optimizing your web pages allows these users to access and use your web pages, thereby increasing the reach of your website and helping to ensure that all users can access its content.

What is Google Chrome Lighthouse Devtool?

Google Chrome Lighthouse Devtool is a free and open-source tool that helps you audit and optimize your web pages for performance, accessibility, best practices, and search engine optimization (SEO). It also includes a section that specifically measures various Web Vitals.

What are Web Vitals?

Web Vitals are a set of metrics that Google uses to measure and analyze the performance, user experience, and overall quality of a website. The Web Vitals include three key metrics, popularly known as Core Web Vitals, which are:

• Largest Contentful Paint (LCP): measures the time it takes for the largest element in the viewport to be rendered on the screen. This metric is used to evaluate the loading performance of a website.

• First Input Delay (FID): measures the time between a user's first interaction with a website and the website's response to that interaction. This metric is used to evaluate the interactivity of a website.

• Cumulative Layout Shift (CLS): measures the visual stability of a web page as it loads. Specifically, it measures the amount of unexpected layout shift that occurs during the page loading process.

These metrics are important for website owners and developers because they can affect a website's search engine rankings, user engagement, and overall performance. By optimizing these metrics, website owners and developers can improve the user experience of their websites and ultimately drive more traffic and conversions.

Lighthouse measures your webpage against six web vitals, with the core web vitals included, except FID. This is because Lighthouse loads pages in a virtual environment without a user (there is no user input). However, the Total Blocking Time (TBT) metric is a great substitute for FID. The web vitals that Lighthouse measures are:

• First Contentful Paint (FCP): measures the time it takes for the first piece of content to appear on the user's screen when they visit a web page.

• Time to Interactive (TTI): measures the amount of time it takes for the page to become fully interactive.

• Speed Index: measures how quickly visual content loads on a page. Lighthouse captures a video of the page while it loads in the browser and computes the visual progression between frames until loading is complete. Screenshots of these loading states will also be shown.

• Total Blocking Time (TBT): measures the amount of time between FCP and TTI during which the main thread of the webpage is blocked and unable to respond to user interactions. TBT is a crucial metric because it represents the time when the page is loading and the user cannot interact with the page. If the TBT is too high, it means that the page is taking too long to become interactive, which can lead to poor user experience and higher bounce rates.

• Largest Contentful Paint (LCP): measures the time it takes for the largest visible content element (usually an image, video or block-level text element) to become fully visible within the viewport of the browser.

• Cumulative Layout Shift (CLS): measures the visual stability of a web page as it loads. Specifically, it measures the amount of unexpected layout shift that occurs during the page loading process.

Lighthouse Tests: An Overview of the Categories

Lighthouse can perform several audits and tests to help you identify areas where your web pages can be improved. Here's an overview of some of the different categories of tests Lighthouse can perform:

1. Performance: Lighthouse can analyze your webpage's performance using metrics such as first contentful paint (FCP), time to interactive (TTI), and total blocking time (TBT). It can also provide suggestions on how to improve these metrics, such as reducing the size of images or eliminating render-blocking resources.

2. Accessibility: Lighthouse can perform accessibility audits to identify potential issues that may affect users with disabilities. It can flag issues such as missing alt text on images, missing form labels, and improper use of ARIA attributes.

3. Best Practices: Lighthouse can analyze your webpage's adherence to web development best practices. It can flag issues such as the use of deprecated features, the use of HTTP instead of HTTPS, and the use of third-party scripts that can slow down your webpage.

4. SEO: Lighthouse can also provide suggestions for improving your webpage's search engine optimization. It can analyze factors such as the presence of a meta description, the use of heading tags, and the presence of structured data.

5. Progressive Web App(PWA): Lighthouse can also perform a PWA audit to evaluate how well your webpage conforms to the characteristics of a PWA. PWAs are web applications that can provide an app-like experience to users, with features such as offline capabilities, push notifications, and home screen icons. The PWA audit in Lighthouse evaluates your webpage's adherence to key PWA characteristics, such as the presence of a web app manifest file, a service worker, and HTTPS. It also evaluates other PWA features, such as the ability to launch the app from a device's home screen, and the quality of the app's icons.

Using the Lighthouse Chrome Devtool

Lighthouse is integrated into Google Chrome's Developer Tools panel. To access Lighthouse in Google Chrome's Developer Tools panel, follow these steps:

1. Open the webpage you want to audit on Google Chrome.

2. Right-click on this page, and click on “Inspect”. This displays the Developer tools.

3. In the Developer Tools panel, click on the Lighthouse tab (if it isn't visible, click on the right arrow, and then click on Lighthouse).

On the Lighthouse tab, you will be able to select the mode you want to use to analyse your page, the device type you want to check, and the categories you want to evaluate using Lighthouse. Hovering over these categories will provide you with a little additional information about each of them.

1. Click on “Analyze page load” to generate a report.

Lighthouse will then run the selected audits and generate a report with the results, showing how well your webpage performs in the categories you selected. For the purpose of this article, we will not run a check on Progressive Web App(PWA), but rather on other checks that can help ensure your webpage loads quickly and has good interactivity.

Analysing the Lighthouse Report

It is recommended to generate Lighthouse reports in an incognito window to ensure that the results are not affected by any extensions or cached data that may be present in your regular browsing session. Once the report is generated, you should see something like this:

Each category is scored out of 100, with a higher score indicating better performance. Lighthouse also provides suggestions on how to fix any issues it identifies. For this article, we will analyze a web app that fetches and displays a user's GitHub repositories. The app was created with React.js and multiple libraries. It also makes various requests to the GitHub API, and contains multiple components and pages. All these hinder the performance of the site, as shown in the report above.

Lighthouse checked our webpage against several web vitals, and based on these metrics, generated a performance score. Let's take a closer look at the results:

You may observe that this website performs poorly against most web vitals, as indicated by the red warning icons in these metrics. Additionally, screenshots also demonstrate how long it takes for the website to fully load.

Further scrolling will reveal the Opportunities and Diagnostic sections, which offer valuable insights into potential improvements that can enhance a website's performance.

The Opportunities section includes suggestions for how to optimize the crucial aspects of your website, depending on what is diagnosed. Such aspects include: improving image compression, minifying the javascript file, reducing unused javascript, and so on. You can also expand on these suggestions to see further information on them. Each suggestion is accompanied by a score indicating the estimated amount of time you’ll save by implementing the recommended improvement.

The Diagnostics section provides additional information on potential issues that may be affecting a website's performance. These suggestions are not as critical as the suggestions listed in the opportunity section. They are indicated with an amber icon or bullet points. This includes issues such as unused CSS, duplicate IDs, and minimizing HTTP requests. Each issue is accompanied by a description and guidance on how to resolve it.

Going further down to see the rest of the report, we can see the following suggestions from the tests

When designing webpages, it is important to keep in mind visitors who may have disabilities, such as those who use screen readers. To ensure accessibility for all, it is recommended that we write semantic code. This means that we should group all of our list items (<li>) within a parent tag such as <ol> or <ul>. By doing so, we improve the organisation and structure of the content, which makes it easier for screen readers to interpret and for users to navigate. This is crucial for creating an inclusive online experience.

Lighthouse suggests that this page may not be fully optimised for search engine optimization. To address this issue, we can use the "rel=canonical" tag, which is an HTML element that helps search engines understand the preferred or canonical version of a web page. This is particularly useful when there are multiple versions of the same page with different URLs, such as a blog post that may have links to other people's web pages. In such cases, the canonical tag helps search engines identify the preferred version of the content and avoid duplicate content issues. The canonical tag should contain an absolute URL that points to the preferred version of the page.

To implement this solution, simply ensure that the index.html file on your webpage includes a canonical value. Once you do this, your app will be optimised for search engine optimization. Here's an example of how to include a canonical tag in your HTML code:

<head>
    <title>Your Page Title</title>
    <link rel="canonical" href="https://www.example.com/canonical-url">
</head>

How to improve your websites performance

One of the main issues affecting the performance of this website is the large size of its JavaScript files, which contain some unused code and haven't been compressed to reduce their file size. When a user visits this site, each file requires an additional HTTP request, which can slow down the loading time.

To improve your site's performance, you can create a "build" of your app that combines all the CSS into a file, and also all JavaScript files into a single file. This reduces the number and size of files that users need to download, speeding up the website.

To implement this, simply run the following code in your terminal:

npm run build

This will create a .dist file in the root directory, which will serve as the source folder for hosting the webapp.

After optimising this webpage with Lighthouse's suggestions, and using the build tool to minify the JavaScript files, take another look at the website to see the improvements in performance.

If your build file is still causing slow performance issues, Lighthouse can provide specific suggestions for every problem it detects. Not only that, but it also provides helpful links to content that can assist you in fixing the issues it identifies.

Wrapping Up

Google Chrome Lighthouse devtool is a powerful tool that can help you optimise your web pages for better performance, accessibility, and search engine visibility. By running Lighthouse audits on your webpage and addressing the issues it identifies, you can improve the user experience and achieve your website goals more effectively.

You've learned how to access Lighthouse in Google Chrome's Developer Tools panel, what this tool can do, how to run tests, and how to interpret the results to get the most value from it. I encourage you to start using the Google Chrome Lighthouse devtool today to optimise your web pages and provide a better experience for your users. With its user-friendly interface and comprehensive audits, Lighthouse is a valuable tool for any web developer.