As a web developer, you have to focus on a million different things. It is easy to forget about performance optimization, especially when you are working against deadlines. This recipe is a good starting point to make the web faster.
As our computers and internet connection are getting faster, we tend to care less about performance optimization. How can we fix that? Or do we need to fix it at all?
Notebooks and desktop computers are no longer that popular among internet citizens. We live in the era of smartphones. Limited CPU, RAM, and battery. That’s the reality for a billion people today and for the next billion newcomers.
On the other side, the average page grows in size and demands more powerful devices and faster connections. So the majority of people are looking at the web through a teeny-tiny window, and the average page takes five seconds to load.
I believe we as web developers are responsible for keeping the internet nice and tidy. Cat pictures should be accessible to everyone on this planet!
For a start, you can test your site with something straightforward and easy to use like the Pingdom Website Speed Test.
If your performance grade is lower than 90, then you should probably fix it.
Set strict constraints. For a web page like this, I set the following limits: up to ten requests per page, 1000 ms for render, 1000 ms of load time. For a single-page application, it can be a few times more.
Cut everything you can. Always question yourself before adding every feature, every asset, every byte. Is it worth adding 300 KB for a web font? Do I need to place everything on one page? Do I need this huge background image?
Simplify layout and typography. Content is king. Use large fonts and white space. Avoid huge images and custom web fonts as much as you can.
Low-res video. Make sure low bitrate videos are available (e.g., 12 fps, 80 kbps). Make sure your videos looks good at low resolution. Test all text and every other little detail. Use a larger font for captions. Keep bitrate low.
No preload. Unless it is necessary and expected by users, don’t preload videos and don’t start playing automatically.
Optimize images. Pick the appropriate format for every image. Sometimes an indexed PNG at 16 colors beats a JPG, and vice versa. Use ImageOptim for all images.
Lazy load. If your page is long and has lots of images and videos, lazy-load the page as the viewer scrolls. Use bLazy.js (it weights 1.4KB) or better yet, write your own script.
Minify. This part is easy. You can minify all text assets at build time or even let CloudFlare do it.
Third-party scripts. Think twice about adding social media buttons (Facebook, Twitter, GitHub, etc.). Use plain text and links instead. The same applies to Google Analytics: get rid of it unless you need all that data.
A focus on performance helps you to pick the right tools from the start and build a great product, but performance optimization becomes prohibitively expensive as your web app grows.
Talk to your team. Automate web page performance testing. Include it in your continuous deployment process. Set a performance budget. Catch performance issues early.