How to Enhance Your Angular App’s Performance using Google Lighthouse
Lighthouse is an open-source, automated tool that can be run on any web page (public accessible or requiring authentication) to improve the quality of that page. It can conduct audits for performance, accessibility, progressive web apps, SEO, and more on a web page.
Here's how you generate a lighthouse report:
- Open the website you want to generate a report for, on Google chrome.
- Open Chrome DevTools (Using Pressing F12 or Ctrl + Shift + I or right-click and select Inspect elements.)
- Click on the More button and select Lighthouse:
- An interface will open. Here, you choose from a number of options available to customize your report generation parameters:
- Click on Generate Report to perform an audit.
- After around 40 to 60 seconds, Lighthouse generates a report for the page:
Lighthouse can be used as a chrome extension and as a command-line tool. For more details kindly check out the official documentation: https://developers.google.com/web/tools/lighthouse#devtools
Description of different categories available in Lighthouse:
In the above screenshot, there are number of categories you can select that determine what is type of audit being conducted. Let
- Performance: It measures a website’s/web-application’s response time or throughput.
- Progressive Web App: Progressive Web Apps (PWAs) are web applications that are regular web pages or websites which offer a native app-like user experience. This option can be used to measure how well the web application can be used as a PWA.
- Accessibility: This measures a web application’s ability to be used by people with disabilities. Web applications are supposed to be more efficient if they are designed and developed in a manner that makes it easy for them to be used by people with disabilities.
- SEO: Search Engine Optimisation (SEO) is the practice of actively influencing where, when, and how your app appears in search engine rankings. So, SEO here refers to the measure of a web application’s ability to maximize the influx of potential customers.
Creating a report without caching
By default, the clear storage option is selected that causes the clearing of all the cached data and cookies. So, in this case, the report generated will show the statistics of a newly opened website on the browser that has been loaded for the first time.
This option can be de-selected by clicking on the gear icon on the right top corner, as demonstrated below:
Some performance enhancement practices:
- The angular project build should not contain unnecessary modules when loading the main page of the website. It should contain only those modules which are in view on the main page.
This can be checked via the stats.json file using webpack analyzer.
Command to use:
ng build –prod –stats-jsonnpx webpack-bundle-analyzer dist/<project-name>/stats.json
&display=swapwhich instructs the browser to use the fallback font to display the text until the custom font has fully downloaded.
This means the loading of the website is not hindered until the font used on the webpage has not been downloaded. The already existing fonts with the browser are used.
Hint: Roboto font is already available with Chrome browser. So, if Roboto is used in the website, chrome will skip its download thus it will decrease the page loading time.
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,600,700&display=swap" rel="stylesheet">
- Use the preconnect keyword. The
preconnectdirective allows the browser to set up early connections before an HTTP request is sent to the server. This includes DNS lookups, TLS negotiations, TCP handshakes. This in turn eliminates roundtrip latency and saves time for the users. Thus, it enhances performance.
preconnect can be added directly to a link tag as an attribute in HTML. It can also be delivered through the
preconnect for a CDN URL:
<link href="https://cdn.domain.com" rel="preconnect" crossorigin>
- Use the
deferattribute. This attribute instructs the browser to work with the page, and load the script “in the background”, running the script when it loads.
Please note — Scripts with defer never block the page. They always execute when the DOM is ready, but before the DOMContentLoaded event.
Thank you for reading!
Debug Node.js Apps Using Google Chrome and Visual Studio Code
Debugging with superpowers
DLT Labs on medium.com
Angular, Google & Google Lighthouse are trademarks of Google LLC. DLT Labs is a trademark of DLT Global, Inc.
Author — Saurabh Singh, DLT Labs™
About the Author: Saurabh is a young professional currently working as a Software Engineer at DLT Labs. He is a full-stack developer and has knowledge of Angular, NodeJS, and blockchain technology. In his free time, he enjoys playing musical instruments and singing.