Slide 1
Slide 1 text
THE PATH TO
PERFORMANCE
@katiekovalcin
Slide 2
Slide 2 text
From Columbus via
Austin via Cincinnati
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
$250 million construction
$25 million in renovations
$70 million renovations
Slide 6
Slide 6 text
In other words, it looked great
but functioned terribly.
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
The demise of beauty
that doesn’t perform
Slide 10
Slide 10 text
Project Timeline
Proposal Discovery Design Development Launch
Where we think
performance happens
Slide 11
Slide 11 text
Project Timeline
Proposal Discovery Design Development Launch
Where performance
needs to happen
Slide 12
Slide 12 text
START NOW.
Slide 13
Slide 13 text
“Performance more often comes
down to a cultural challenge, rather
than simply a technical one .”
–Lara Hogan
Slide 14
Slide 14 text
66 people answered on
their performance culture
Slide 15
Slide 15 text
Company Size
1-20
20-50
50-100
100-200
200+
0 5.5 11 16.5 22
Slide 16
Slide 16 text
Type of Work
Client Services
Product
In House
Other
0 10 20 30 40
Slide 17
Slide 17 text
Other
9%
No
29%
Yes
62%
DO YOU FEEL
EMPOWERED TO
IGNITE CHANGE
IN YOUR ORG?
Slide 18
Slide 18 text
No
42%
Yes
58%
IS
PERFORMANCE
CURRENTLY A
PRIORITY?
Slide 19
Slide 19 text
Change begins with you
Slide 20
Slide 20 text
“I just do what I can
when no one is looking”
survey response
Slide 21
Slide 21 text
IS SOMEONE AN
ADVOCATE FOR
PERFORMANCE?
Other
11%
No
9%
Yes, it doesn't work
32%
Yes, it works!
48%
Slide 22
Slide 22 text
HURDLES
Slide 23
Slide 23 text
Other
19%
Developers
21%
Designers
25%
Leadership
35%
WHAT
HURDLES DO
YOU FACE?
Slide 24
Slide 24 text
“Other priorities often
take precedent”
survey response
Slide 25
Slide 25 text
CLIENTS
Slide 26
Slide 26 text
“Not valued as a billable
priority by the client”
survey response
Slide 27
Slide 27 text
“We don’t have that many
mobile users”
—Anti-RWD clients circa 2011
Slide 28
Slide 28 text
“We don’t have that many
mobile users”
—Anti-perf clients circa 2015
Slide 29
Slide 29 text
“Almost 8% of websites
went responsive within
the span of a single year”
between 2013-2014
guypo.com/rwd-2014/
Slide 30
Slide 30 text
Discuss in sales,
not development
Slide 31
Slide 31 text
Project Timeline
Proposal Discovery Design Development Launch
The most crucial
conversation
Slide 32
Slide 32 text
“We’ll provide you with a fast,
responsive, immersive online
experience.”
–A good sales pitch
Slide 33
Slide 33 text
Sell it. Hard.
Slide 34
Slide 34 text
webpagetest.org
Slide 35
Slide 35 text
Competitors
Client
2s to load
Competitor 1
1.7s to load
Competitor 2
1.2s to load
Slide 36
Slide 36 text
“That 0.8s is very expensive!”
Slide 37
Slide 37 text
“Sales at Amazon increase by 1% for every
100 milliseconds it shaves off download
times.”
“If a page load takes more than two seconds,
40% are likely to abandon that site. “
Data Monday: E-commerce Performance by Luke Wroblewski
Slide 38
Slide 38 text
LEADERSHIP
Slide 39
Slide 39 text
“Politics play a large
role in what gets done.”
survey response
Slide 40
Slide 40 text
Other
3%
Impossible
5%
Hard
11%
Moderate
35%
Easy!
47%
HOW EASY
IS IT TO TALK TO
LEADERSHIP
ABOUT IDEAS?
Slide 41
Slide 41 text
State your case
• Lunch ’n Learns
• It’s a reusable process
• I’ll own it for a trial run!
Slide 42
Slide 42 text
“Resource isn't budgeted for
us to give the code the care it
needs to deliver performance”
survey response
Slide 43
Slide 43 text
PM Education
• Understand the importance
• Advocate with clients
• Help maintain performance budget
Slide 44
Slide 44 text
AESTHETIC HEAVY
DESIGNERS
Slide 45
Slide 45 text
“The heaviness of the design
keeps performance from
being a first-class citizen”
survey response
Slide 46
Slide 46 text
Performance is
design’s best friend,
not its enemy
Slide 47
Slide 47 text
“But here’s the thing: the web is far more fragile
than we might like to admit. It’s fraught with
uncertainty—a connection could be dropped, or
a network’s latency could be too high—which
means entire elements of our designs might
never reach our users.”
–Ethan Marcotte
foreword in Responsible Responsive Design by Scott Jehl
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
Project Timeline
Design
Development
Slide 50
Slide 50 text
Design
Development
Performance Checking:
• Are there red flags?
• Can you offer a solution?
Performance Design Reviews
Slide 51
Slide 51 text
Performance Design Reviews
Carousel Red Flags
• Push back on priority
• What alternate solutions can
we offer?
Slide 52
Slide 52 text
Performance Design Reviews
Image
However, don’t push back:
• If it’s “too difficult”
• “Dumb idea”
• Subjectively don’t like it
• Can’t offer alternatives
Social
Slide 53
Slide 53 text
Design
Development
Mockup designs in code
• Run performance tests on early
designs
• Designer & Developer pair up to
refine/address problem areas
Get into code early!
Slide 54
Slide 54 text
“Sometimes you’ll make choices that favor
performance; other times, you’ll make choices
that favor aesthetics. The key is using all the
information available to you to make the right
decision for you and your site.”
—Lara Hogan
Designing for Performance
Slide 55
Slide 55 text
“It's easy to rally everyone
behind a cause. Follow-through
is a different story.”
survey response
Slide 56
Slide 56 text
PERFORMANCE
BUDGETS
Slide 57
Slide 57 text
“That’s the value of a performance budget: it
provides a framework for discussions as you
move forward. It serves as a point of reference
as you decide what components should, and
shouldn’t, get added to a page.”
—Tim Kadlec
Setting a Performance Budget
Slide 58
Slide 58 text
Project Timeline
Proposal Discovery Design Development Launch
Establish
performance
budget
Slide 59
Slide 59 text
Project Timeline
Proposal Discovery Design Development Launch
Maintain
performance
budget
Slide 60
Slide 60 text
ESTABLISHING
Slide 61
Slide 61 text
Important Metrics
1. Page weight (kb/mb)
2. Start Render (s)
3. Fully Loaded (s)
Slide 62
Slide 62 text
Page weight
Slide 63
Slide 63 text
$500 monthly budget
1. $100 groceries
2. $100 clothes
3. $300 rent
Slide 64
Slide 64 text
$400 monthly budget
1. $100 groceries
2. $100 clothes
3. $300 rent
Slide 65
Slide 65 text
$400 monthly budget
1. $100 groceries
2. $100 clothes
3. $300 rent
Slide 66
Slide 66 text
$400 monthly budget
1. $50 groceries
2. $50 clothes
3. $300 rent
Slide 67
Slide 67 text
400kb performance budget
1. 50kb fonts
2. 50kb css
3. 300kb images
Slide 68
Slide 68 text
400kb performance budget
1. 100kb fonts
2. 50kb css
3. 200kb images
4. 50kb javascript
Slide 69
Slide 69 text
You can’t spend what you
don’t have!
Slide 70
Slide 70 text
USING WITH
clients
Slide 71
Slide 71 text
Work with their team
Slide 72
Slide 72 text
1. What is a performance budget?
2. What is this project’s budget?
• Cite goals/requirements
3. Why are we using this?
4. How we add new features
• (optimize, remove, or don’t add)
5. Every template’s weight
6. Image optimization guide
Define for them:
Slide 73
Slide 73 text
Curveballs!
Slide 74
Slide 74 text
3 options:
1. Optimize existing feature
2. Remove existing feature
3. Don’t add
Slide 75
Slide 75 text
400kb performance budget
1. 0kb system fonts
2. 50kb css
3. 350kb images
Slide 76
Slide 76 text
Remember: you can’t
spend what you don’t have!
Slide 77
Slide 77 text
USING WITH
designers
Slide 78
Slide 78 text
“I believe designers do their best work within
constraints, and knowing those constraints
before starting a design can be incredibly
enabling.”
—Dan Mall
How to Make a Performance Budget
Slide 79
Slide 79 text
Collaborate
Slide 80
Slide 80 text
Work together to
determine the budget
Slide 81
Slide 81 text
design development
“The client has a
new promo video we
need to include on
the homepage”
“That will weigh
about 500kb. We
should only use
50kb fonts, then.”
Slide 82
Slide 82 text
“We have to use
their 2 brand fonts.”
“We should use no
more than 2 weights
for each”
design development
Slide 83
Slide 83 text
“We need to achieve
X, Y, Z using A, B, C
brand guidelines”
“That will weigh
700-900kb. Their
current site is 1.2mb,
let’s budget 800kb.”
design development
Slide 84
Slide 84 text
It’s not a trump card
for developers
Slide 85
Slide 85 text
“The client has a
new promo video we
need to include on
the homepage”
“Nope. We can’t do
that. I think the page
should be 200kb and
that will absolutely
not work.”
design development
Slide 86
Slide 86 text
Fonts
Slide 87
Slide 87 text
“The weight of a font kit is arguably more
important to a site’s performance versus other
heavy hitters (like images), because fonts are
loaded on every single page.”
Alternatives to Popular Web Typefaces for
Better Performance
Slide 88
Slide 88 text
Speedy Fonts
Futura: 268kb
• book
• book italic
• bold
• bold italic
Speedy Fonts
Brandon Grotesque: 133kb
• book
• book italic
• bold
• bold italic
Alternatives
Slide 89
Slide 89 text
“Is the extra 135kb worth
the aesthetic change?”
“Does the heavier font kit
better represent the brand?”
Slide 90
Slide 90 text
100kb
Fonts:
Book—20kb
Book Italic—20kb
Bold—20kb
Bold Italic—40kb
Groceries:
Veggies—$20
Pizzas—$20
Fruits—$20
Meats—$40
$100
Slide 91
Slide 91 text
Curveball! I had to
spend $60 at the vet
Slide 92
Slide 92 text
40kb
Fonts:
Book—20kb
Bold—20kb
+System Fonts
Groceries:
Veggies—$20
Fruits—$20
+Pantry Foods I’ve
been avoiding eating
for 2 months
$40
Slide 93
Slide 93 text
HOW THIS HELPS
development
Slide 94
Slide 94 text
Project Timeline
Proposal Discovery Design Development Launch
Client understands
the benefit
Slide 95
Slide 95 text
Project Timeline
Proposal Discovery Design Development Launch
PM advocates
performance as a priority
Slide 96
Slide 96 text
Project Timeline
Proposal Discovery Design Development Launch
Design is done
within a performance
budget
Slide 97
Slide 97 text
Project Timeline
Proposal Discovery Design Development Launch
Development is prepared
to successfully integrate
performance as a priority
Slide 98
Slide 98 text
Resources
Slide 99
Slide 99 text
Resources
• Designing for Performance by Lara Hogan
• Responsible Responsive Design by Scott Jehl
• How to Make a Performance Budget by Dan Mall
• Design Decisions through the Lens of Performance by
Yesenia Perez-Cruz
• Anything on timkadlec.com
Tools
• Web Page Test
• Grunt Performance Budget
Slide 100
Slide 100 text
THANK YOU!
@katiekovalcin