Improve Performance of Angular Apps Using Angular Universal
Angular is awesome. Compared to a Server Side Rendered (SSR) web application, single-page applications (SPA) comes with lots of advantages, but some disadvantages as well.
Angular universal use hybrid approach to inherit some SSR advantages for your angular app.
In this article, we will only consider performance.
The Problem: Mobile Devices are slow but important
When it comes to mobile, angular applications are slow, here is why angular applications (or any other SPA) are slow on mobile and why mobile devices are important.
Did you know: more than 90% of users access facebook using a mobile device instead of a desktop computer
Mobile has become the primary device of accessing the internet, not just Facebook. This means there is a 90% chance that you are reading this article from a mobile device.
Keeping that in mind, After the angular app is built we get a bunch of minified javascript files like this, as you can see some files may even larger than 800kB, in my case.
After we deployed these files to the server and a user request the web site an empty index.html with those scripts in the <head>will send back to the client. Then the application rendering starts and users will see a white empty screen till those files are completely downloaded.
Comparing to a desktop computer a mobile device is low in performance, both in terms of network speed (maybe connected to a 2G or 3G network) and CPU speed.
Did you know: According to a research done at Google, if web page doesn’t load within 3 seconds, there is 32% increment of the chance that user will abandon the website which is increased to 90% when initial load takes 3 to 5 seconds.
So you will lose the battle even before it begins.
The solution
Angular universal provides facilities to do the rendering on the server side. Let’s assume that there is an E-commerce web site, some user sees a facebook advertisement about a product.
So the product information is available on this URL,
https://my-ecom.com/store-141/product-1414
If we don’t use angular universal, at first, javascript files which include the application module are downloaded, then shopping cart, product buy page and all of those templates that are compiled into javascript files are downloaded. Then rendering starts. So the user has to wait till all of these downloading and rendering happens on the mobile phone to view the product description page.
Waits 3 seconds, 5 seconds and it is still downloading …………………..
What angular universal does is, it takes this overhead from the client side to the server-side.
So now this will happen,
- The server will render and generate the HTML view which is related to the requested route and send it with the
index.htmlfile. - Then other assets (javascript files that I mentioned above) will download in the background while users enjoying the content.
Note: This does not take away SPA advantages of the application as after the initial load the application will behave like a SPA app. The only difference is that the initial content is rendered on the server side and sent with the initial response
This is not the only advantage of using angular universal, Some in build app browsers (Linkedin app inbuilt browser for example) may not have rich javascript APIs that are required to render a SPA. Some issues that might happen on these light web browsers may be resolved.
Another disadvantage of a SPA is, lack of SEO support since the crawlers have to understand and render the site using javascript to get the side content.
Here is a guide on how to setup Angular Universal on your angular app.
Finally, In the above link, you don’t see any fancy images right? Actually, angular docs are also built with angular. As you may already know social media and other crawlers (in this case the Medium crawler) required to present a metadata tag on the page in order to display a thumbnail image. With angular, this is not possible since the empty index.html comes as the response. So you only see Angular Docs header with no image.
With angular universal, you can make it happen.
Thank you for taking a few minutes to read this article ❤
Hope it will help to improve the performance of your next angular app. Happy Coding!!
