9 proven actions that speed up your web site
In this post, I identify a list of techniques that will make your pages fast.
As a web developer, this year I am principally writing and testing page speed user stories for legacy applications. In the process, I compiled a list of actions that fix page speed. I like to focus on what I can do to a request, rather than trying to fix an entire page.
I start with a waterfall. Review all the requests. Find the slowdowns. If I fix all the requests, I fix the page.
- Eliminate a request — Someone once said, “The fastest request is a request not made.” This is the simplest user story to both write and test. It starts by reviewing each request made by a page, identifying why it’s there (i.e. design choice, marketing, analytics), and contacting its owner (i.e. business, developer, marketing).
- Unblock a request — This usually applies to scripts and style sheets. I prefer to load scripts in the <head> and use the defer and async HTML attributes. Stylesheets can be unblocked when the critical CSS is inlined and then the monolithic file can be asynchronously loaded.
- Asynchronously make a request — Admittedly this is a technique that can unblock a request, so maybe it’s repetitive. I list it separately as I want to make sure that I investigate this option as it can make a big impact. It can be applied to scripts, but also this can be applied to images or video using lazy loading.
- Defer a request — This also is a way to unblock a request, but I also include deferring an entire feature. For example, if a contact form is placed on the side rail of a page. The responsive mobile layout often stacks the side rail so it appears at the bottom of the page. We deferred a whole series of requests by loading the form only when it was visible to the user. This idea is a core tenant of progressive web applications and is made possible using the Intersection Observer API.
- Make a request sooner —Sometimes requests are being made out of order. For example, stylesheets need to be loaded before scripts. Or maybe you are lazy loading an image that is required for the largest contentful paint and needs to be loaded as soon as possible.
- Preload a request — This is a specific way to make a request sooner, and can be used to mitigate chained resource requests. If you use Google Fonts, you might try to preload the font files (this is tricky) or a stylesheet that is loaded by a third-party script.
- Make a request faster — The most common way to do this is to load a request from a CDN like Cloudflare. A variation of this is to make sure common requests are well cached to make sure the cache HIT ratio is high.
- Reduce the size of a request — Often images can be optimized to be smaller using better compression or formats. It also extends to responsively loading images to reduce the payload to mobile devices. This also applies to getting rid of unused scripts and styles.
- Reduce CPU time — Browsers have a single main thread, so it is important to optimize its use (especially when looking at first input delay). CPU time can be broken down into loading, scripting, layout, and painting times. This is the newest addition to my list, and I’m still learning how to use it. I know that focusing on total blocking time has not been useful, rather I am starting to just reduce the number of long tasks.
Page Speed Rubric
Below I am publishing a rubric that correlates all 9 actions to a metric.
Wait it’s actually simpler
I used this rubric in the development of Waterfaller.dev which is an opinionated web application that pinpoints and fixes page speed and core web vital issues.
And while I was working on the algorithm, I found that all 9 strategies above can be further simplified:
- Make a request smaller or faster
- Make a request load sooner or later
If I question each request asking the above questions, I quickly have a testable list of user-stories that I can add to my agile board.
As a side hustle and to help me in my daily work, I am working on Waterfaller.dev which I use to improve page speed and core web vital scores. I look forward to your comments.
