Watch the video playlist

Performance

Making your website fast is extremely important for usability and probably one of the most important design considerations for the web.

“Good performance is good design” — Brad Frost

Why performance is important

None of us want to wait for websites to load. I’m pretty confident that all of us have closed a website because it was taking too long to load. That’s why performance matters.

The slower your website the less people will use it, the less purchases, and the more ire your users direct towards you. Also, Google is starting to penalize slow and non-mobile–friendly websites in search results, even marking them as “slow”.

Performance as a design constraint is important to consider, especially on mobile devices where the Internet connection is flaky and not near as fast as our home computers.

Remember we’re building websites for the World Wide Web: there are many places in the world with much slower connections than us.

Links

Checking performance

There are lots of tools provided by browsers, online, and command line to help check the performance of our websites.

Browser developer tools

The browser’s developer tools have a few options: the network panel, the performance audit, and the connection emulator.

The Network panel shows a waterfall of all the different resources used to load the website with some important data across the bottom.

The Performance Audit panel will test the website for common performance issues and give you a report.

Simulating slower Internet

With the Chrome Developer Tools we can even simulate different Internet connections to see how our website performs.

It’s a good idea to test your website with a slower connection to see how it looks.

Testing tools

There are a bunch of tools to help you diagnose performance problems on your website, here are a few popular ones.

The most popular testing tool is Web Page Test—an open source suite of tools for testing performance. You can use the online version or create your own instances.

Another popular tool is Google’s Page Speed: an online tool or a browser extension. (Also check out Yahoo’s YSlow).

Links

Performance budgets

Performance budgets are a good constraint to add to your web design to help push performance as an important factor.

There are lots of different metrics that can be used when creating your performance budget: load time, number of requests, page size, tool scores, etc. Pick the items that make the most sense for your situation and discuss them with your team.

Example performance budget

Here’s an example performance budget that might work for you:

  • ❏ Load time: < 1s (1000ms)
  • ❏ Speed index: < 800
  • ❏ Page size: 800 KB transfer size maximum
  • ❏ Requests: 15 requests maximum
  • ❏ Pass: Google Mobile Friendly Test
  • ❏ Page Speed: achieve green on Mobile & green on Desktop

Links

Basic performance techniques

Here’s a list of things to help fix performance problems on your website, especially to speed up download time.

Use these in conjunction with a performance budget to get the fastest website possible.

The thing that affects the website’s performance the most is images—spend lots of time on optimizing images:

  • Use as few images as possible
  • Properly save them with “Save for Web” from Photoshop
  • Smush them with ImageOptim or Spritebot
  • Don’t make them bigger than they need to be in the design

A few other things you can do to your website to make it load faster are:

  • Remove any unused or duplicate HTML & CSS
  • Make sure there’s no broken links
  • Put your CSS <link> tag at the top of the HTML
  • Be careful not to use too many font styles

Links

Advanced performance

There’s a bunch more you can do to make your website super fast.

☛ Check out the other things you can do in the advanced performance tutorials.

Video list

  1. Performance: Browser developer tools
  2. Performance: Online tools
  3. Performance: Images
  4. Performance: Code
  5. Performance: Fonts