Performance Budgets for Designers

Vancouver HTML5 Meetup

Feb 3rd, 2014

@stevemynett

#whoami

  • UI Developer at HootSuite
  • Working online since 2005
  • Worked as well as a UX/UI designer
  • I kinda like gif's...

Preamble

I'm going to refer to designers and developers not as people or roles, but areas of contribution.

When we think of web performance:

The Weight of the Web is increasing

#fact

  • Average webpage size 1.7MB
  • Images: 1MB
  • Custom Fonts: 37%
  • Everything is on the rise

This is the fault of designers.

What are we seeing more of?

  • HiDPI Images
  • Web Fonts
  • Long scrolling single Page Sites
  • Responsive Sites
  • Mobile usage

When we think of web performance we think of making existing web pages faster.

Web performance should be about making the users experience faster

As a user I want my web experiences to be fast

As a user I want my DNS connections to be fast

As a user I my browser to load less scripts and styles.

Budgets

I have a certain amount of [something] and I can not go over a preset limit of [something]. I'm actively monitoring and being aware of how what I'm doing impacts this budget.

Example Budgets

  • I have $750 to spend on groceries this month
  • I have 120 calories to eat today
  • I am only going to watch one episode of House of Cards Season 2 per day
  • I want my homepage to load in under two seconds
  • As Facebook I want Paper to never run under 60 FPS

The fastest webpage

Proof!

As a designer

  • I want a user to accomplish an action
  • Each millisecond affects their ability to complete that action
  • Every element on the page decreases the likelihood they will attempt that action

The increasing weight of the web is the fault of designers

Performance needs to be considered closely during the design phase of any project and this needs to be monitored and set using performance budgets

Performance Budgets

  • Only use one web font in the project and only load the weights that are required
  • No more than 500k of images on a page
  • The page must load in under one second
  • Consciously build a library-less site

Be aware of implications of a decision

"Lets add a gallery to the homepage! It will be awesome"

equates to...

Lets load 5+ large images, find an jQuery plugin to manage it

"Our mobile users will love it!"

tl;dr

  • Performance is about building fast websites, not making existing websites faster
  • Involve Dev early in the design phase for feedback on implications
  • Set and enforce budgets for projects and monitor them over time
  • Track all teh thingz!

Link Drop

Thank You!

@stevemynett

(hit me up with questions/comments!)