Web Performance Optimization with Google Lighthouse

As competition in the field of Web Development increases today, new concepts and tools addressing these concepts are entering our lives. It is now widely accepted that user experience is highly important when accessing a web application. Users tend to prefer applications that may be simpler but allow them to quickly accomplish their tasks over ones that are packed with features but are too complex and don't cater to user experience. Frontend developers are constantly improving themselves in this regard.

After developing an application using modern frontend technologies that adhere to appropriate design techniques and meet user needs, the next focus gradually shifts to the performance of the application. Tools that assess the performance of web applications, highlighting weak points and providing a roadmap for improvement, are not new and have been around for a while. However, one tool has stood out in recent years: Google Lighthouse. There are various performance metrics from different auditors, each producing different results. Since Google is the most widely used web browser and search engine today, its analysis offers more reliable results when it comes to performance evaluation.

Google Lighthouse and Google Lighthouse Score

Google Lighthouse is an open-source tool designed for developers by Google. This tool is used to audit a website’s quality in terms of performance, accessibility, SEO, and more. The findings are converted into a score that helps understand the level of optimization for the site. Understanding this score is crucial for anyone aiming to improve their website's ranking in Google search results.

Google Lighthouse Metrics

Our Google Lighthouse score is based on certain metrics that assess specific conditions. For example, how long does it take to receive the first response when a user navigates to the application, or what is the latest loaded content, and how many seconds did it take to load? Let’s now look at these metrics and how we can improve them.

First Contentful Paint (FCP)

Here, the FCP time indicates the second frame because that’s when the first response from the site is received.

FCP measures the time (in seconds) from when the user navigates to the application until the first DOM element is rendered in the browser. These DOM elements include images or SVGs, except for iframes. Even the loading spinner before the site fully loads is included because it is rendering a DOM element, signaling to the user that the application is loading. If the returned time is between 0–1.8 seconds, it is green (fast); 1.8–3 seconds, orange (moderate); and over 3 seconds, red (slow).

How can we improve our FCP score?

• We can reduce all tasks running before FCP in the browser’s performance tool.
• We can view tasks blocking FCP in the performance tab of the browser.
• We should ensure that the fonts we use are not blocking the browser.
• We can prioritize loading critical CSS for the first visible components.

Speed Index

Speed Index measures how quickly our web application loads. It tracks from the first loaded element to the last one, with each visual change creating a new frame. These frames are then compared to the final frame, representing the fully loaded state. Lighthouse uses the speedline module for this measurement.

The image above shows that the webpage went through six different changes, with each creating a new frame. Each frame is compared to the final one (fully loaded state).

The first few frames do not resemble the last frame, so they add more to the Speed Index score. If the user sees a blank page for one second, that adds one second to the Speed Index. The last three frames are close to the final frame, so they only slightly increase the Speed Index. If the user sees a page that is 90% loaded for two seconds, that increases the Speed Index by 10% * 2 seconds, which adds 200 milliseconds.

How can we improve our Speed Index score?

• We can minimize the main thread.
• We can reduce JavaScript execution time.
• We can allow text to be displayed with a fallback font while the actual font is loading.

Total Blocking Time (TBT)

Total Blocking Time is a metric determined by the response times of inputs from the user. Tasks running before FCP are not considered since users cannot interact with the page during that time. Tasks that take longer than 50 milliseconds after Time To Interactive (TTI) count towards the blocking time.

How can we improve our TBT score?

• We can eliminate unused or unnecessarily long-running code blocks.
• We can break down long-running tasks into smaller micro-tasks.

Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visible element on the screen to load.

How can we improve our LCP score?

• We should identify which element is loading last and why. There are different solutions for different causes. For example, if the server responds slowly, we should focus on improving server response times. If images are loading late, we can use WebP or AVIF formats for modern web browsers.

Time To Interactive (TTI)

Time To Interactive measures the time from the start of the page load until there are no more blocking tasks, and the page is fully interactive. The time starts with the FCP metric and continues until there are no more than two outstanding get requests. The time stops when the application is fully ready to respond to user inputs.

Optimizing web performance is essential for delivering a seamless and efficient user experience, and Google Lighthouse is one of the tools that can be used in this regard. By providing solutions for metrics like FCP, LCP, and TBT, Lighthouse offers valuable insights for improving speed, accessibility, and overall usability.

High Lighthouse scores not only improve SEO but also ensure that your application meets modern performance standards.