How to Enhance Your Angular App’s Performance using Google Lighthouse

Image for post
Image for post

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.

Image for post
Image for post

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:
Image for post
Image for post
  • An interface will open. Here, you choose from a number of options available to customize your report generation parameters:
Image for post
Image for post
  • Click on Generate Report to perform an audit.
  • After around 40 to 60 seconds, Lighthouse generates a report for the page:
Image for post
Image for post

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.
  • Best Practices: This measures how well a web application is coded and how well an application uses or complies with practices like the use of cookies, the use of appropriate client-side storage technologies for local data, etc.
  • 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:

Image for post
Image for post

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
  • Using &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 preconnect directive 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.
Image for post
Image for post

A preconnect can be added directly to a link tag as an attribute in HTML. It can also be delivered through the Link HTTP header or can be invoked by JavaScript based on user activity. Here is an example of enabling preconnect for a CDN URL:

<link href="https://cdn.domain.com" rel="preconnect" crossorigin>
  • Use the defer attribute. This attribute instructs the browser to work with the page, and load the script “in the background”, running the script when it loads.

Example:

<p>...content before script...</p><script defer src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script><!-- visible immediately --><p>...content after script...</p>

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!

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.

Written by

DLT Labs is a global leader in Distributed Ledger Technology and Enterprise Products. To know more, head over to: https://www.dltlabs.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store