As software developers, we are often excited to see our code in action and our programs released to the public. However, it is essential to recognise the importance of providing an optimal user experience. As we progress in our development careers, the challenge of creating high-performance web applications increases in importance. It is critical to ensure that we are continually striving to improve the user experience and performance of our applications.
In this post, we will explore the advantages of using Lighthouse, a free and open-source performance monitoring tool, to analyse your application’s performance metrics. Lighthouse is a convenient choice due to its pre-installation in the Chrome browser. Additionally, we will provide some tips for optimising your application’s performance and define certain technical terms that developers may find useful.
What does it mean for a website to be “performance-oriented?”
It is a fact that there is no single metric which can be used to accurately determine the performance of a website. Rather, the performance of a website must be assessed from the perspective of the user, taking into account the speed at which the site appears to load and the amount of time it takes for requested material to become accessible and usable. Ultimately, this assessment must be tailored to the individual user, as their experience of a website’s performance may vary from that of other users.
It takes a certain amount of time, measured in milliseconds, for a web page or web application to be loaded, rendered in the user’s web browser, and become interactive. This time span can be accurately measured from the time the user makes a request until the content is displayed in the browser.
Optimising a website’s performance—what exactly does it entail?
All the actions you do as a developer to improve the perceived and actual speed of a website is known as web performance optimisation.
Why are we even talking about optimisation and performance?
The performance of our software has a significant impact on the satisfaction of our end users, so it is essential that we have meaningful discussions about speed and optimisation. As developers, we must prioritise resolving the issues that our customers bring to our attention, as failure to do so could have a detrimental effect on both our reputation and our profitability. Keeping our customers happy is essential if we are to maintain our success.
Given the wide range of networks and devices our software will be used on, it is crucial that performance is taken into consideration throughout the entire development process. This will ensure that our software runs efficiently and effectively on a variety of different systems.
The findings of the research indicate that it takes two to five times longer to read and compile code on typical smartphones compared to the fastest smartphones. As a result, it is important to take into account the speed when developing applications, since the customer may be using the software on a 3G network with a device that has a slower GPU than the one used in the development process (e.g. 4G on a MacBook or DellInspiron). Therefore, the question that must be answered is how to make it work.
When evaluating success, what criteria should we use?
We need a way to quantify performance if we are to design with efficiency in mind. What should we do?
I’ll demonstrate lighthouse’s functionality using an example from my own work.
The procedure is as follows:
- To ensure your audit is not disrupted by any Chrome add-ons you have installed, open a new Chrome window in Incognito Mode by simultaneously pressing the Control, Shift, and N keys. This will ensure the add-ons are not activated in the new window.
- To access Chrome’s Developer Tools, open your web browser and enter the URL https://sammie-fast-food-fast-react.herokuapp.com/. Then, type the name of the program whose performance you wish to gauge into the address bar and press Command+Option+I (Mac) or Control+Shift+I (Windows) to open the tools.
- When you click the “Developer Tools” button, it will open to the right, as seen in the figure below.
- By clicking on the Audits tab, users can access the Audits page. LightHouse is utilised in the Audits section to evaluate the effectiveness of the app, and provide insights on how to improve performance.
The settings of the Lighthouse tool can be adjusted as necessary in order to accomplish the goals of this inspection. Specifically, we need to evaluate the website’s responsiveness when viewed from a mobile device and to simulate the effect of a 4G network connection with a fourfold decrease in processing power.
Select the Run audits button to begin the inspection.