The Page Loading Checklist

Improve the user’s speed perception of your app

In terms of user experience, the first seconds a user enters your site are critical. If your site is perceived as slow, the user might leave the page before the loading is even finished.

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.

10. Always externalize CSS and JavaScript files

So the browser can help with caching.

11. Minify CSS and JavaScript files

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

Server-side rendering

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.

Favour CSS animations over JavaScript animations

It is better to move all possible JavaScript animations to the CSS engine.

JavaScript is not precise with time and if your code relies on setTimeout or 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.

Resources

[1] Kyle Simpson “Website Performance” (March 29, 2013).