Fast web

by Roman Zolotarev

As our computers and internet connection are getting faster, we tend to care less about performance optimization. How can we fix it? Do we need to fix it at all?

First, let me introduce the most popular computer in the world.

MacBook

Oh wait, Mac is popular only among web developers only because it is default development environment. But notebooks and desktop computers are not that popular anymore among internet citizens. More than half of internet population uses a mobile phone. Here is the most popular device on the web today.

Smartphone

A hundred-dollar phone. Slow CPU. Small RAM. A battery is always low. That is the reality for a billion people today and the next billion newcomers.

On the other side, average page grows in size and demands more powerful devices and faster connections. So the majority of people is looking at the web through this teeny-tiny window, and an average page takes five seconds to load.

What you can do

I believe we as web developers are responsible for keeping the internet nice and tidy. Cat pictures should be accessible for everyone on this planet!

Check the current state

For a start, you can test your site with something straightforward and easy to use like Pingdom Website Speed Test.

Pingdom Speed Test results

If your performance grade is lower than 90, then you probably should fix it.

Design

  1. 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.

  2. 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?

  3. Simplify layout and typography. Content is king. Use large fonts and white space. Avoid huge images and custom web fonts as long as you can.

Heavy cargo

  1. Low-res video. Make sure low bitrate is available (e.g. 12 fps, 80 kbps). Make sure your videos looks good at low resolution. Test all small texts and every little detail. Use a larger font for captions. Keep bit rate low.

  2. No preload. Unless it is necessary and expected by users, do not preload videos and do not start playing automatically.

  3. Optimize images. Pick a proper format for every image. Sometimes indexed PNG at 16 colors beats JPG and vice versa. Use ImageOptim for every picture.

  4. Lazy load. If your page is long and has lots of images and videos, you must load them lazily on the scroll. Use bLazy.js (it adds 1.4KB) or better write your script.

HTML, CSS, JavaScript

  1. Minify. This part is easy. You can minify all text assets at build time or even let CloudFlare do this.

  2. No frameworks. Avoid CSS and JavaScript frameworks unless you need them.

  3. Code-splitting. Load JavaScript and CSS only when you need them. This can be very challenging without automation, and this kind of optimization requires a lot of work, but when your app is large you have no choice.

  4. Keep pages static. Static HTML are blazingly fast. Use as much as possible static HTML. For a blog, you can easily avoid databases on the server side and JavaScript on the client side.

  5. 3rd party scripts. Think twice if you are going to add social media buttons (Facebook, Twitter, GitHub, etc.). Use plain text and links instead. Same applies for Google Analytics. Get rid of it unless you need all that data.

    Yes, these scripts can be convenient in few cases, but the price is enormous. Folks with ad blockers won’t see the button you expect them to click, while other people will experience a few times slower page load and compromised privacy (additional requests, kilobytes of JavaScript, and cookies).

Automate

You may say premature optimization is the root of all evil. In this case, it may be opposite. Focus on performance from the beginning may save your project. Focus on performance helps you to pick right tools from the start, build a great product. Performance optimization becomes prohibitively expensive as your web app grows.

Talk to your team. Automate web page performance testing. Include it into your continuous deployment process. Set performance budget. Catch performance issues early.

Quick start

Install webpagetest.

npm install webpagetest -g

Save your specs to webpagetestspecs.json.

{
  "median": {
    "firstView": {
      "requests": 10,
      "render": 1000,
      "loadTime": 1000,
      "score_gzip": {
        "min": 90
      }
    }
  }
}

Request your API key at WebPagetest.org. Wait for the email with your key. The API key is limited to 200 page loads per day.

Export your API key as WPT_API_KEY and target URL as URL. Run your test.

export WPT_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
export URL=https://www.romanzolotarev.com/fast/
webpagetest test $URL \
  --first \
  --poll \
  --specs webpagetestspecs.json \
  --key $WPT_API_KEY

The output should look like this:

WebPageTest
  ✓ median.firstView.requests: 6 should be less than 10
  ✓ median.firstView.render: 605 should be less than 1000
  ✓ median.firstView.loadTime: 527 should be less than 1000
  ✓ median.firstView.score_gzip: 100 should be greater than 90


4 passing (6ms)

Now you can add this test to your continuous deployment process. That is it.


If you found this guide useful, subscribe for updates:



Further reading

A random illustration