Performance Budgets for Designers
Vancouver HTML5 Meetup
Feb 3rd, 2014
- UI Developer at HootSuite
- Working online since 2005
- Worked as well as a UX/UI designer
- I kinda like gif's...
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
- 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.
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.
- 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
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
- 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"
Lets load 5+ large images, find an jQuery plugin to manage it
"Our mobile users will love it!"
- 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!
(hit me up with questions/comments!)