We are faster #sorrynotsorry — How to optimize Angular websites
Published in
6 min readJan 11, 2021
Low website speed is one of the most frustrating things that will turn users off about your website.
In this post, I have put together some general and Angular best practices to improve the load time of your website.
What is Website Performance Optimization?
Web performance refers to the speed at which web pages are downloaded and displayed on the user’s web browser. Web performance optimization (WPO), or simply website optimization is the field of knowledge about increasing web performance.
Why is WPO important?
Website performance optimization is something that should be a top priority.
It is an important determinant of a website’s success.
Google has indicated that page speed is one of the factors used to rank pages. So, even if your website has good content and great SEO, loading slow will lead to a high bounce rate and you will not get the rankings you want.
What should I optimize on my website?
Using a WPO tool like Google’s PageSpeed Insights or Pingdom will show you what is causing your website to load slow. It will analyse your website, give a score and tell you what to do to improve the score.
Guidelines to speed up your website
- Enable Gzip compression
GZIP, short for GNU Zip, is the most popular lossless data compression method on the web. It allows you to reduce the size of your site’s HTML pages, stylesheets, and scripts. - Minify CSS, JavaScript, and HTML
Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser — e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on. - Reduce redirects
Minimizing HTTP redirects from one URL to another cuts out additional RTTs and wait time for users. - Remove render-blocking JavaScript
External blocking scripts force the browser to wait for the JavaScript to be fetched, which may add one or more network roundtrips before the page can be rendered - Leverage browser caching
Page load times can be significantly improved by asking browsers to save and reuse the files included in your website. - Reduce Server Response Times (TTFB)
Server response time measures how long it takes to load the necessary HTML to begin rendering the page from your server, subtracting out the network latency between browsers and your server. - Reduce HTTP requests
Reducing the number of files your site needs to render can help speed it up — fewer files mean fewer HTTP requests. - Use CDN
Using a CDN allows us to terminate the connection close to the user, which can reduce the data transfer amounts between the CDN’s cache servers and the client - Optimize images: compression and serving scaled images
Having the right combination of file format, compression type and size, you can reduce your image size by as much as 5 times
- Original picture: https://limehome.imgix.net/website/hero/bg-large.jpg: 1MB
- Compressed picture https://limehome.imgix.net/website/hero/bg-large.jpg?auto=format: 180KB which is 18% of the original one. - Images Lazy loading
Delaying image loading only until the user scrolls within the viewport.
It improves the fully loaded time, number of requests and total page size. - Resource Hints
- DNS Prefetch: it is used to indicate an origin that will be used to fetch required resources, and that the user agent SHOULD resolve as early as possible
- Preconnect: it is used to informs the browser that your page intends to establish a connection to another origin, and that you’d like the process to start as soon as possible
- Prefetch: it is used to identify a resource that might be required by the next navigation, and that the user agent SHOULD fetch, such that the user agent can deliver a faster response once the resource is requested in the future. - Critical CSS
It is a technique that extracts, minifies and inlines the CSS for above-the-fold content in order to render the page to the user as fast as possible.
An npm module and a webpack plugin are available. - Reduce dom size
A large DOM tree and complicated styles rules make a huge work for the browser. The browser has to parse the HTML and construct the render tree. Every time the user interacts or something in HTML changes, the browser has to compute this again which will increase the memory usage.
DOM nodes should be created only when needed and should be destroyed when they’re no longer needed.
Several techniques can be used to achieve this goal depending on the structure of your webpages.
- Example 1: A slider that has plenty of items. No need to render them all at first, only the visible ones. The rest can be displayed after a user interaction (click, swipe ..etc)
- Example 2: No need to include modals (popups) in Html during the first page load. They can be rendered on-demand.
- Optimize your CSS
- Reduces the complexity of your selectors by using BEM.
- Reduce the number of elements being styled
- Remove unnecessary Fonts
- Avoid @import
- Avoid expensive properties: border-radius, box-shadow, opacity, transform, filter and position: fixed
Angular Performance Tuning: Limehome.com as an example
We listed the WPO best practices that are relevant to any website.
But what can we do to improve an Angular application?
- Use the latest versions of Angular and Angular-cli:
They always offer fixes and enhancements to address performance, bugs fixes, new features, security etc. - Enabling the Prod mode:
It will enable various build optimizations like uglify, AOT, removal of sourcemaps…etc - Server-side rendering:
Angular Universal can be used to run your application in SSR. It generates a static version of web apps without JavaScript which is a great improvement for SEO as well. - Images optimization:
- Compress the images without losing much of the quality is a good idea. We are using Imgix to compress them. This tool reduces the images substantially and can serve them in Webp format when supported by the browser.
- All images in our Angular app are lazyloaded. We are using Lazysizes for that.
- The images are scaled depending on the device resolution - Lazy loading the modules:
By default, NgModules are eagerly loaded, which means that as soon as the app loads, so do all the NgModules, whether or not they are immediately necessary.
Lazy loading speeds up the application load time by splitting it into multiple bundles and loading them on demand. - Tree-shaking:
It is the process of removing unused code resulting in smaller build size. Tree-Shaking is enabled by default when using angular-cli. - Webpack Bundle Analyzer:
We use webpack Bundle Analyzer with Angular to help realize what’s really inside the bundle and find out what modules make up the most of its size. - No unnecessary use of third-party packages:
Including a third-party package can be harmful to the page speed.
One of these packages on our website was a help widget. It loads many assets (Js, CSS and Images) that were not needed for the first page load. We solved this issue by loading the widget only on-demand: when the user wants to launch it by clicking on the “Help” button. - Updating Third-Party Packages:
Usually, newer packages may contain many performance improvements including smaller size and other build-time performance optimizations. - Use trackyBy with ngFor directive:
trackBy should be used when iterating over a large array of objects collection. It improves the *ngFor performance by reducing the DOM manipulation. - Unsubscribing Observables:
Observables can lead to a build-up of memory leaks. So it is better to unsubscribe them when they are not needed anymore — e.g. in ngOnDestroy
Conclusion
Users don’t want to wait 10 seconds for your site to load. They will simply click back to Google search and select another result.
Web performance optimization should be always a top priority, especially when there is so much online competition.
