The Page Loading Checklist
Improve the user’s speed perception of your app
Those first seconds already give the impression of how well your application works.
Developers must always consider the use of a good tool that analyzes what happens when a page is loading. The one I use is YSlow.
A good exercise is to evaluate the resources that are critical in the first seconds of loading and the ones that are not.
This article is based on a course¹ by Kyle.
Performance Optimization Checklist to Improve Page Load Time
1. Reduce the number of requests for resources during page load
Every piece of data that is not essential for what you show at the beginning should be loaded later.
2. Optimize the size of the images
A good idea is to shrink the size of the image without losing quality. There are several tools to do that.
Also, another possibility is to use image spriting but this, in my opinion, makes the code to handle the images too complex.
3. Avoid redirects
This will tell the user’s browser to re-request the page again to a different location, unnecessarily making two requests instead of one.
4. Use a CDN (content delivery network) for static resources
CDNs provide more points of presence around the world, most likely close to where the request is made, so it is faster for the user to download static resources.
5. Defer the loading of resources to a future time with non-critical resources
Also called lazy loading.
For example, avoid loading non-critical CSS in the first seconds and just load them later.
This feature will make the application’s code, in general, more complex. Sometimes, this makes sense for features that users rarely use, download them only when they are needed.
It can be tricky though, you have to be careful and avoid applying this technique to features that are frequently used, you take the risk of the user experiencing a very slow site after loading a very fast first page.
Lazy loading is particularly important for images. We already talked about making them as small as possible but avoiding loading them when you are not showing them is even better.
In fact, it is something so important that, starting with Chrome 76, they support it natively. They introduced a new
loading attribute to lazy-load. When this is widely implemented by other browsers, there will be no need for fancy JS libraries that do this.
6. Use Gzip, Brotli, or other compressors
This helps reduce the size of files. This is something that needs to be configured in the server.
7. Use Expires/Cache-Control headers
Take advantage of the fact that the browser caches resources.
Notice that, many times, it's not easy to specify the correct amount of time when a resource should expire and, as a consequence, a user can be seeing outdated content.
8. Place the CSS references at the top and scripts to the bottom
A good practice that gives the user the impression that a page is fast is to place the CSS references at the top and scripts to the bottom.
The reason for placing CSS files at the top is that the browser will often block the rendering of the content until it knows all about the stylesheets. The best option is that the browser finds it as soon as possible.
9. Avoid the use of CSS expressions to calculate the position on the page
This is slow in the browser, just avoid using it.
So the browser can help with caching.
This is a technique that reduces the size of files, removing redundant data without affecting the logic.
12. Use a reduced amount of fonts used by your site
13. Use ETags HTTP headers
This is hexadecimal code which uniquely represents the fingerprint of a resource, meaning that, if the file changes, this hexadecimal code changes as well.
This helps with conditional loading. If the ETag of a resource changes, it means it was updated and then it has to re-download the resource.
You need to configure this feature in your server as part of a strategy for optimizing the performance of the site.
14. Try to make fewer DNS lookups
If you start referencing too many domains, this will add new DNS lookup latency. Browsers help with by pre-caching some DNS lookups.
15. Optimize your JSON responses
It is important that the JSON responses contain only the data that is needed, to reduce the download time.
Other Things to Consider for Better Web Performance
This technique is helpful for avoiding the download of many resources to the client, the response is the HTML file completely rendered.
An example where this is a must would be if the page is consumed from a mobile phone with very limited speed.
setInterval it can be problematic. In general, buggy animations are perceived as a badly implemented site.
Thanks for reading! If you have any suggestions or ideas, please let me know.