Performance on the web

If there’s one thing you can do to improve user-experience on a site it is making it fast. It isn’t optimizing your media queries or making images fade smoother. It is making it fast. The money tells us that speed is more important than aesthetics. I’d argue otherwise but then again I’m not the money. This is an overview of performance on the web.

When you’re dealing with a web server serving files, you should at least consider these four techniques:

  1. Minimize HTTP Requests: A browser can only download so many files at a time and since HTTP requests (the browser asking for a file) is one of the biggest performance penalties, the less requests you make, the faster it’ll get.

  2. File concatenation is a great way to minimize requests. It basically means merging multiple files into a single one. All your styles in one, all your scripts in another and so on. Unless you’re using HTTP2. Yeah.

  3. File minification — once your files are concatenated, you can minify them. That means stripping whitespace, linebreaks, unessesary characters, renaming variable names and much more. There are plenty online tools that can do this for you but that’s not very practical. Instead you could use a build tool like Grunt or Gulp but that’s for another chapter. There are also GUIs for all of this like CodeKit or Hammer.

  4. Caching - by leveraging caching you can avoid sequential requests. The browser has a handy cache but there are also database caching, local storage etc.

CDN

Browsers have a limit of how many files they can download in parallel per domain. This is the main reason we do file concatenation. We can further improve load by distributing files on several (sub)domains to circumvent this limit. Instead of setting up all those domains you can use a content delivery network (CDN) service. MaxCDN and Cloudflare are to examples.

  • Serve site assets from multiple domains?
  • Why? How many resources will a browser download from a given domain at a time?

Don’t use stuff you don’t need

All of these tips are about optimizing the content you already have. If you didn’t have any files or content, you’d be great! Wouldn’t that be easy. In other words, remove all that you don’t need. Perhaps there are some scripts lying around that you aren’t even using?

Perceived performance

There are two sides to performance: actual and percieved. So far we’ve only talked about actual performance but just as important is perceived performance. Using clever UX tricks you can make your site feel faster. Read more about perceived performance

Tools

There are tons of great tools to help you analyze bottlenecks on your site.

Script performance

Another aspect is the runtime performance of your code. JavaScript can slow your site down if not used properly. Fancy CSS animations and transforms that are modified on scroll is often not done right resulting in a very janky experience.

Resources

Maintaining a performance budget ☞