Introduction to Google Lighthouse, Bundling & Minification

23 juli 2021 om 10:00 by ParTech Media - Post a comment

Almost everyone uses websites today. However, the purpose for which it is being used differs from person to person. Some use it for shopping, some for trading, some for finding information and so on. There are a plethora of changes that keep happening in the web world; the internet keeps evolving to cater to these changes with the help of new technologies.

However, as a business owning these websites, it is important to measure the performance of the website. It is vital for them to measure key points like how fast it is rendering, how it responds to search engines, do they adhere to best practices, and so on.

Luckily, there are many tools today to measure the website’s performance, one of them being Google Lighthouse. In this post, let’s dive and understand what is Lighthouse and how it is useful.

Tables of contents

  1. What is Lighthouse?
  2. Lighthouse as webpage auditor
  3. How to use Lighthouse
  4. Bundling and minification
  5. Conclusion

What is Lighthouse?

It is an open-source tool from the house of Google used for monitoring the performance of the webpage. It analyzes the website based on the following parameters -

  • Performance
  • Progressive Web App
  • How accessible it is
  • Adherence to Best Practices
  • Optimized wrt Search Engine

Lighthouse also has an internal logic to examine and generate the data for mobile and desktop screens. Google has always emphasized that the speed of the website significantly matters while ranking it in the Google search result. This is understandable as the longer the page load time, the lesser the user experience. Lighthouse awards points out of 100 for each of the above parameters and also provides suggestions to improve these aspects of the website.

The ‘Performance’ category measures the page based on the below parameters -

  • First content in the Document Object Model (First Contentful Paint - FCP),
  • Largest content on the page in the Document Object Model(Largest Contentful Paint - LCP),
  • Time taken for the user to interact with the page (Time to interactive - TTI),
  • The time difference between the FCP and time of interaction (Total Blocking Time - TBT), and
  • How quick the page is being populated (Speed Index - SI).

There is weightage for these ratings. For example, TBT and LCP contribute 25 % weightage. By examining the page with the above parameters, Lighthouse provides data on what can be improved, and what went well with the page, and few tips for improving the overall performance.

Similarly, for Accessibility, Best practices, and SEO, Lighthouse provides the report with three different result sets. Along with these, it also provides the data for the Progressive web app and the runtime settings.

How to use Lighthouse?

Lighthouse provides multiple ways to access and generate the report. We are going to see three ways here -

Accessing through Chrome developer tools

Press F12 in your Chrome browser, and look for the Lighthouse tab. Clicking on it will provide you with the option to generate a report.

On clicking the Generate Report button, the Lighthouse examines the page you are on and provides the necessarydata. The data can be saved in HTML/ JSON format and also can be printed.

Accessing through node module

This requires nodejs to be installed in the local machine, as this needs to be accessed from the command prompt. This method gives you the option for automated/bulk examining of multiple pages. Once the node is installed, the Lighthouse node module has to be installed globally using the below command.

Once it is installed, enter the command -

lighthouse <urltovalidate>

This will fetch the results and export it to HTML. It will be stored in the same place from which it has been executed.

Accessing through Chrome Extension

Go to the Chrome Web Plugin Store and install the Lighthouse extension (https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk). Once installed, the Lighthouse extension appears on the browser, with which you can generate the report.

Bundling and Minification

Whenever we talk about the Performance of a website and the steps of improvement, we cannot ignore bundling and minification. These are two of the handiest approaches for improving performance. They help in improving the request load time of the application.

If the CSS and JS files are not bundled together, then it will take some time to get all the files to the client-side from the server-side. As modern browsers limit the simultaneous connections to a maximum of 6, the requests that come more than six are being queued and executed.

Minification is another process where unnecessary spaces, short variable names, line breaks, and comments are being resolved on the javascript files. Through this, the size of the file is reduced, and the application starts loading faster.

To enable minification and bundling files in MVC application, go to system.web.config file, and enter the below lines -

<system.web>

  <compilation debug = "true" />

</system.web>

By default, the value is set to true, which means bundling and minification are disabled. Make the flag false to proceed with bundling and minification. To bundle files together, you can add code to the BundleConfig present inside the App_Start folder.

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(Add files that needs to be bundled as comma separated values));

And to minify the files, Visual Studio provides web extensions, to Minify, which minifies the provided files. The output of the .css file will be a .min.CSS file.

Conclusion

It is important to improve the performance of a web page which helps to enhance user experience. Tools like Lighthouse provide value and help businesses to identify the key areas of improvement. Similarly, bundling and minification play a key role in performance improvement.