Let’s do a bunch of
simple stuff to make
our websites faster
Slide 2
Slide 2 text
CHRIS
COYIER
@chriscoyier
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Let’s do a bunch of
simple stuff to make
our websites faster
Slide 5
Slide 5 text
Let’s do a bunch of
simple stuff to make
our websites faster
Slide 6
Slide 6 text
PAUL
IRISH
Google
Slide 7
Slide 7 text
1
2
3
4
“Have a good to awesome affect
on performance.”
“A single person can do without
coordinating with anyone else.”
“Don’t require complex or
mature processes.”
“Require minimal or no ongoing
maintenance efforts.”
LOW EFFORT BIG IMPACT
Slide 8
Slide 8 text
STEVE
SOUDERS
Slide 9
Slide 9 text
80
20
THE PERFORMANCE GOLDEN RULE
Slide 10
Slide 10 text
On average, 80% of the
end-user response time is
spent on the front end.
THE PERFORMANCE GOLDEN RULE
Slide 11
Slide 11 text
“20%”
Slide 12
Slide 12 text
“80%”
Slide 13
Slide 13 text
117 Requests
7.81 MB
4.59s Total*
0.16s Back End
4.43s Front End
3% / 97%
* on Madison broadband
Slide 14
Slide 14 text
24%/76% Top 10
8%/92% 10 ~10,000
16%/84% Startups
13%/87% Top 50,000
Slide 15
Slide 15 text
1
2
3
4
“Have a good to awesome affect
on performance.”
“A single person can do without
coordinating with anyone else.”
“Don’t require complex or
mature processes.”
“Require minimal or no ongoing
maintenance efforts.”
5 Focus more on the front end.
Slide 16
Slide 16 text
THE PLAN
1
2
3
4
Turn on HTTP Compression!
i.e. (GZip)
Cache stuff!
server and client side
Losslessly optimize images!
and sprite if you can
Combine CSS and JS!
three, two, or one per page
Slide 17
Slide 17 text
1TURN ON HTTP
COMPRESSION
Slide 18
Slide 18 text
“The Internet”
file file
SERVER BROWSER
“The Internet”
imperceptibly fast
squishing
file file
imperceptibly fast
un-squishing
Slide 19
Slide 19 text
gzipwtf.com
Slide 20
Slide 20 text
html5boilerplate.com
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
2CACHE
STUFF
Slide 25
Slide 25 text
BROWSER
CACHE
SERVER
CACHE
Hey, you’re going
to need these files.
I already got
a couple of those
right here.
dynamic bit
dynamic bit
dynamic bit
dynamic bit
dynamic bit
static bit
Slide 26
Slide 26 text
html5boilerplate.com
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
Sweet.
YO BROWSER,
you can hold on to a bunch of these files.
You might need them later.
Slide 30
Slide 30 text
The fastest HTTP
request is the one
not made.
http://www.stevesouders.com/blog/2012/03/22/cache-them-if-you-can/
Slide 31
Slide 31 text
It’s up to you to
break cache.
style.v1.css
style.v2.css
style.v3.css
style.v4.css
...
http://derek.io/blog/2009/auto-versioning-javascript-and-css-files/
• 31K minified and gzipped
• On the world’s fastest CDN
• Probably cached
Slide 43
Slide 43 text
Why did you use jQuery?
rabble rabble rabble.
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
GROUP
PINKY SWEAR
Slide 46
Slide 46 text
I PROMISE TO...
1
2
3
4
Turn on HTTP Compression!
i.e. (GZip)
Cache stuff!
server and client side
Losslessly optimize images!
and sprite if you can
Combine CSS and JS!
three, two, or one per page