As developers, we feel an immense sense of accomplishment when we deploy our code and launch our applications. Yet, providing a seamless user experience is equally crucial. As we evolve in our profession, honing the craft of building high-performance web applications becomes increasingly vital. Constantly enhancing the user experience and performance of our applications should be a never-ending pursuit.
In this article, we will examine the benefits of leveraging Lighthouse, a performance monitoring tool that is open-source and free to use, to measure the performance metrics of your application. Lighthouse is a convenient option as it comes pre-installed with the Chrome browser. Additionally, we will share some suggestions on how to optimise your application’s performance and define some technical jargons that developers may appreciate.
What is meant by a “performance-oriented” website?
It is a well-known reality that website performance cannot be accurately determined by a single metric. Rather, and more importantly, the performance of a website must be assessed from a user’s standpoint, considering the perceived loading speed of the site, and the time it takes for requested content to become available and functional. User-specific assessment is crucial since website performance experience may differ amongst users of the site.
Loading and rendering a web page or application in a user’s web browser takes a particular amount of time, usually gauged in milliseconds. During this time, the requested content comes from the server and appears on the user’s screen. From the moment a user initiates a request, to when the content is fully accessible to the user in the browser, this timeframe can be precisely measured.
What does it mean to optimise a website’s performance?
Web performance optimization refers to all the measures that developers take to enhance the speed of a website, both in terms of perceived and actual speed.
What is the significance of talking about optimisation and performance for websites?
The satisfaction of our end-users is heavily influenced by the performance of our software. Therefore, having meaningful conversations about speed and optimisation is crucial. As developers, it is our responsibility to address any issues our customers may face since it could impact our image and revenue stream. Maintaining the happiness of our customers is necessary for our continued success.
Considering the various networks and devices our software operates on, prioritizing performance throughout the entire development lifecycle is vital. This approach will guarantee that our software runs seamlessly on various systems, ensuring optimal efficiency and effectiveness.
The research showed that typical smartphones take two to five times longer to read and compile code as compared to the fastest smartphones. Therefore, developing applications while keeping the speed in mind is essential since customers may use the software on a 3G network or a device with a slower GPU than the one used during development (such as a MacBook or DellInspiron with 4G). As a result, we must consider how to make it function appropriately.
What standards should we use to assess success?
To develop with efficiency in mind, we require a method to measure performance. What steps should be taken to achieve this?
There are several tools available, such as LightHouse, GTMetrix.com, WebPageTest, and PageSpeedInsights, that can be utilized. This article will specifically use LightHouse.
To illustrate Lighthouse’s functionality, I will use an example from my previous work.
The process is outlined as follows:
- To prevent any Chrome add-ons from interfering with your audit, start a new Chrome window in Incognito Mode by pressing the Control, Shift, and N keys simultaneously. This will deactivate add-ons in the new window.
- To open Chrome’s Developer Tools, launch your web browser and navigate to the URL https://sammie-fast-food-fast-react.herokuapp.com/. Next, type in the name of the program for which you wish to evaluate performance in the address bar and press Command+Option+I (Mac) or Control+Shift+I (Windows) to launch the tools.
- After clicking the “Developer Tools” button, it will appear on the right side, as shown in the figure below.
- Users can access the Audits page by clicking on the Audits tab. In the Audits section, LightHouse is utilized to evaluate the app’s effectiveness and provide suggestions on how to improve performance.
The settings of the Lighthouse tool may be customized to meet the objectives of the audit. Specifically, the website’s responsiveness when accessed from a mobile device needs to be evaluated, and the effect of a 4G network connection with a fourfold reduction in processing power needs to be simulated.
Click on the Run audits button to start the inspection process.