Due to the substantial improvement of technologies, websites are developed more efficiently to grab the customer’s attention by adding exceptional features.

User’s apparently getting annoyed to face the long wait of website loading. One thing we should set straight that delaying will equally result in losing potential customers. Therefore, how can we increase the website speed to retain the customers.

On the pursuit of finding the phenomenal changes to increase the site speed, I had tried all the tactics whichever mentioned on the internet but unfortunately nothing worked out for me. In search of finding the list of straight bulleted tactics to improve the site speed & performance of an angular application. I have ended up with the following strategies to overcome those issues.

Here is the statistical report of our website speed before applying all these the tactics,

At the end of this article i had also attached the final statistical report of my site performance.

Alongside I have also mentioned some of the common standard metrics which can be applied to all the applications including Angular.

Angular CLI App Features

Basically, Angular CLI app have default features which can do all the required optimization for the site,

Lazy Loading
Ahead-of-Time Compilation (AOT)

Lazy Loading

Lazy loading is the perfect plot that enables you to release the complexity of routers and components. To avoid the mess of dealing Chunk files, lazy loading allows you to split the large chunk file into multiple files and loads the JavaScript components only when the specific router gets triggered.

Ahead-of-Time Compilation (AOT)

Before running the code, this compiler will convert your typescript code into a polished JavaScript code to optimize and compress the entire structure of the code.

Once the angular application done with this in built optimization features, Start focusing on the page speed.

Now, Google GT Metrix will give you following suggestions,

Serve scaled images
Optimize images
Leverage browser caching
Enable gzip compression

Serve Scaled Images

Serve Scaled images is the performance matrix for images, used to optimize the site with scaled images. HTML can display any image size you upload, but that is not the case here. When you try to compress large scale image into a fixed size, then that will occupy the extra space which will result in reducing the site speed. So make sure the image you upload matches the actual size of HTML image in your site.

Optimize Images

Optimizing images are another source for improving site speed. While uploading images on site, maximum try to upload the images in KB size rather than uploading it in MB. It’s always preferable to convert large size file into small size.

Leverage Browser Caching

Leveraging” browser caching is a cache mechanism that works between server and user browser. Once the site got loaded, then complete data of the site (HTML/CSS/js/images/PHP) will be stored locally. We can deal it with the stored cache to manage how the local data should react with site Instead constantly retrieving data from the server every time.

We do have another option to leverage the browser cache by setting up the time limit to free up the stored data. When the specific interval of time exceeds then automatically it will release the local data to free up the space which favors in increasing the speed while navigating through the website pages.

Enable Gzip Compression

When users try to load the site then obviously the big files will take huge time to fetch the data. To avoid this kind of intrusion, this technique helps to compress all the bigger size to smaller size for the faster loading.

Note: I have uploaded the coding part of leverage browser cache mechanism and Gzip compression in Github. Uploaded two seperate file for Apache configuration and Ngnix configuration for both Leveraging browser cache & Gzip compression. Chect out the below link for coding.

Get The Code Here

Maximum all the problem will get solved if you apply all the above tactics in your angular website. And also the few metrics and tactics can result in improving the performance of your site which can be applied to all the applications.

If you still find issues in page loading.

Here are the few best solutions I found that gives the best results and merely, you should give a try first,

1 Remove all the commented code in your project
2 Remove unused library file (Remove modules)
3 Remove unused language packages from the used library. (Consider alike moment js file which has a lot of languages)

Finally, Here is our result at the end!

What are you waiting for?

Try now and Share your result with us!

Also ensure to read our previous blogs about Angular Applications,