boost your Angular application for maximum speed

as we always talk about how to speed up your application or website. I will gather all these posts together in a revised easy-to-read article.

there are some steps specialized to front-end frameworks such as #react, #vuejs, and #Angular.

today we will constrain in boosting our Angular applications with easy steps.

summary

divide your app into small modules

• enable server-side-rendering (SSR)
• enable pre-rendering
• setup app shells
• enable strict mode and side-effects free feature

divide your app into small modules

when Angular builds your application it generates a very big js file called `main.js` containing all of your components.

by this approach, when a visitor visits your website he/she waits until this big file loads then the first contentful paint appears.

the file `main.js` includes all of your components even ones that not relevant to the current route.

to solve this, we have to divide our main module (AppModule) into small modules and load each module only when needed.

we call this approach lazy loading modules and we will talk about it in detail in a separate article.

enable server-side-rendering (SSR)

by default, Angular renders your app in the browser. this makes some problems.

when you open the source code you will not see any data, just js files. so while you can see the page, the search engines cannot see any content.

SSR means that you can render some of your pages on the server, and this approach has many benefits

the page is rendered in the page and the final output is served as plain text which means:

• the source code now has content and the search engines can see it which improves your SEO ranking
• the app could be served statically, i.e as if it is just HTML & js files
• the response is faster

we can add caching layers for the generated output which speeds up our response and decrease the server loads in subsequent requests

enabling pre-rendering

as we saw, with SSR we can render part of the app on the server. furth more pre-rendering offers the ability to render some routes even before the visitor requests them, particularly in build time.

setup app shells

even if we rendered the app on the client-side or server-side or even used the pre-rendering feature, the visitor has to wait until main.js loads and shows the first part of our app.

we need to display a part of our app to the visitor as soon as possible, even before starting loading main.js, we can for example display the main menu and our page's skeleton.

to achieve that we can move some parts of our app from app.component.html into index.html

but we may need to compile it first by Angular if this code contains Angular features, so we can use app-shell here to pre-compile this part and inject the output result into index.html as static code.

enable strict mode and side-effects free feature

strict mode enables us to quickly detect issues in our base code early.

next step

in the next step, we will go deeply into detail to learn everything in these techniques

keep in touch with us