Performance Checklist
Checklist for a better web application performance
Was this helpful?
Checklist for a better web application performance
Was this helpful?
Performance is crucial in today's web applications. A slow app feels buggy to the users and makes them flee it. Although performance is such an important topic, there are so many optimization vectors that it's easy to forget some of them. The intent of this checklist is to gather performance practices to apply when developing a web application.
While we apply these practices, we should always keep the following rules in mind:
Don't optimize too early
Don't let performance ruin productivity
Always check an optimization is efficient by measuring performance before and after it
Images represent in average ~60% of a page's weight, thus it's an important part to optimize.
User-perceived performance is often disregarded but can be more important than actual performance. These techniques allow us to improve it.
Provide batch queries/transactions instead of making the client send multiple requests
Identify & optimize slow resources
Parallelize slow tasks
Use relevant data structures
Don't overuse serialization
Generate static content when deploying so that it will be computed only once
can help we estimate the size of a new dependency.
can help
Consider technologies like and , but be aware of their pros and cons
Replacing animated gifs by videos can reduce their size dramatically (details )
Use tree shaking (e.g. with ) to remove unused code
Serving ES2015 code to browsers supporting it and ES5 code to browsers that don't, using type="module"
and nomodule
, can improve the bundle size and parsing time (details )
Tools like the can help.
We can use prefetching to prepare the browser to next requests and make them faster or even instant. is a few old but explains well the following techniques.
The difference between prefetch
and preload
is explained .
Ideally the critical code should fit in 14KB in order to be server in the first TCP roundtrip (). These techniques help to achieve this goal.
Tools like and can help defining the site's critical CSS
can help achieving that
More explanations on this technique
Defer fonts loading; the technique is explained
Subset the fonts using
Prefer animating using CSS' transform and opacity; more explanations
Show app shell before content if needed; more explanations
We can replace an image with a very lightweight, blurred version of it. This efficient technique is explained in from Facebook.
Make an optimistic UI to make some interactions feel instant; a quick explanation can be found
If possible, use to improve memory allocation
Use HTTP cache; the different caching techniques are explained in
If hesitating between NoSQL solutions, may help us.
provides a complete guide on this subject for common RDBMS.
Tune the DB; tools like and the experimental can help
If using pagination, use the last row instead of offset
as a starting point; more explanations
If possible, enable to improve memory allocation
If using UUIDs, reorder them before storing them; more explanations
On many DBMSs often gives interesting results.
Use to avoid round trips during TLS negotiations
Measure client-side performance; tools like can help
Use tools like to audit the site
and are good tools to perform these tests.
Take into account the request header to serve lighter assets to clients with limited resources