The story of how I achieved top notch results on page speed and performance with Angular2.
It is an open source project on github: https://github.com/voxmachina/angular2-boilerplate
Check also the results from WebPageTest:
Everyday we see a new chart comparing a bunch of frameworks for their “performance”, and I always laugh at it, because I do know that performance has less to do with code and more with tooling and configurations. By simply removing some tasks from my project, and not touching the code or the framework at all, I could make the website the worst in terms of performance ever!
Performance has less to do with code and more with tooling and configurations
The front-end section is build with Angular2, the back-end uses PHP to deliver the results and also cache them locally, also provides all the necessary .htaccess files and rules to make the app work properly.
The project uses a series of methods and mechanisms to achieve top performance and speed, and all is manageable through simple Gulp tasks; the only more complex task is the task that performs the Angular AoT compilation mechanism which replaces the app entry code by updating some imports, I admit, it was a hacky solution to achieve conditional imports because that is something that Typescript does not support.
Another complex mechanism is added as a task also to deliver a first version of the content for the above-the-fold target, which basically transforms index.html into an index.php with the top menu bar and only loads through PHP the Medium feed, a barely perceived difference on good connections, but on slow connections it makes all the difference between someone leaving your site or start reading something right away and staying for more.
The code itself it’s very simple, but here’s the list of tasks that I did to make it top notch on performance and speed:
- Always deliver gzipped content
- Use really long term caches for your assets and use a cacheburn mechanism to purge
- Compress and minify all of your assets
- Make use of the framework AoT compilation mechanism, which basically makes the build process not to include the framework runtime compiler, which not only increases speed but also decreases file size.
- Optimize your first content load with the bare minimal content and style for a very fast first page load
- Make good use of a CDN
I’ve managed it all with Gulp, so one could even say that replacing the framework and using the same tooling and configurations, we could achieve the exact same result.
Some might say that writing code with Angular it’s messy, well then, take a look at my code structure:
And at my code:
And tell me if this feels messy to you?
Performance and speed are not dependent on a framework or on a library, they are the responsibility of the developer, as the code quality and structure itself.
Careful with the next time you’ll say: “Framework X is slow and heavy and I hate it”, you might be saying that you don’t know how to optimize an application yourself.
I must admit, I’ve come to enjoy this new version of the framework, as I do enjoy React, although I think of it more as a library, Backbone and others. They are tools for one to choose the appropriate solution for the issue at hands given an amount of time and resources.
Before you hate it or love it, do the same as me, test it yourself and share your knowledge and learnings.