Slide 1
Slide 1 text
HTML, CSS, JS, gzip
and all that
Building
Web Apps
Fast
Slide 2
Slide 2 text
why bother?
it’s 2012
Slide 3
Slide 3 text
hi-speed
internet
Slide 4
Slide 4 text
modern
browsers
Slide 5
Slide 5 text
multi-core
devices
Slide 6
Slide 6 text
it’s The Future
isn’t it?
Slide 7
Slide 7 text
and we’re still
doing it wrong!
Yes, it is!
Slide 8
Slide 8 text
the internet is fast
but it’s clogged
JS
CSS
Slide 9
Slide 9 text
the browsers are modern
but we’re
treating them
like IE6*
* no offence
Slide 10
Slide 10 text
the cores, they are many…
but they’re not really
doing much
Slide 11
Slide 11 text
then there’s mobile…
Oh, yeah
Slide 12
Slide 12 text
battery life sucks
on mobile
devices
Slide 13
Slide 13 text
mobile web traffic is
still expensive
$!
$!
$!
$!
$!
$! $!
Slide 14
Slide 14 text
the screens,
they’re just so small
TINY SCREEN
Slide 15
Slide 15 text
Going
Fast
Nowhere
Slide 16
Slide 16 text
Going
Fast
Everywhere
Slide 17
Slide 17 text
Front-end
Best Practices
Tips & Tricks
Performance
Slide 18
Slide 18 text
Yahoo!
YSlow
Google
PageSpeed
Slide 19
Slide 19 text
Steve Souders
Yahoo!
YSlow
Google
Velocity
wrote the books on
front-end performance.
Literally
Slide 20
Slide 20 text
Books
Slide 21
Slide 21 text
of the load time is
spent on the
front-end
85%
Slide 22
Slide 22 text
download
parse
exec
render
Slide 23
Slide 23 text
requests
caching
js & css
images
2
1
3
4
Slide 24
Slide 24 text
Request
less
Slide 25
Slide 25 text
.js
.js
.js
.js
.js
Slide 26
Slide 26 text
.js
.js
“there, I fixed it!”
Slide 27
Slide 27 text
Request
less*
* mobile – request more, smaller, when required
Slide 28
Slide 28 text
Require.js
LABjs
Loading
And
Blocking
JavaScript
Slide 29
Slide 29 text
3 RTT
(Round Trip Time)
1 DNS resolution
2 TCP connection setup
3 HTTP Request
Slide 30
Slide 30 text
Reduce DNS
lookups
less subdomain nesting
serve “critical path” JS
in from main hostname
Slide 31
Slide 31 text
Avoid Bad
Requests
4XX
Reduce
Redirects
3XX
Slide 32
Slide 32 text
Parallelize
Downloads
Slide 33
Slide 33 text
How your browser
sees the Internet
CSS
host1.com
PNG
host1.com
CSS
host1.com
PNG
host1.com
CSS
host1.com
PNG
host1.com
time
Slide 34
Slide 34 text
How your browser
can see the Internet
CSS
host1.com
PNG
host1.com
CSS
host2.com
PNG
host2.com
CSS
host3.com
PNG
host3.com
time
Slide 35
Slide 35 text
How your browser
can see the Internet
CSS
host1.com
PNG
host1.com
CSS
host2.com
PNG
host2.com
CSS
host3.com
PNG
host3.com
time
Slide 36
Slide 36 text
Browserscope.org
Slide 37
Slide 37 text
Google
Facebook
gstatic.com
static.ak.fbcdn.net
profile.ak.fbcdn.net
Slide 38
Slide 38 text
NO
COOKIES
Slide 39
Slide 39 text
Content
Delivery
Network
use a
Akamai
CloudFront
Amazon
Slide 40
Slide 40 text
Minimize Overhead
upload/download
1:4 1:20
Slide 41
Slide 41 text
Minimize Overhead
Keep GET short
Use less cookies
Slide 42
Slide 42 text
Cookies
count calories
<1000 bytes
Slide 43
Slide 43 text
Cookies
eat them when
they’re done
yum!
Slide 44
Slide 44 text
requests
caching
js & css
images
2
1
3
4
Slide 45
Slide 45 text
What to cache?
.js
.css
.png
anything binary
do not cache
.html
Slide 46
Slide 46 text
How long to cache?
Expires:
Cache-control:
Thu, 16 Mar 2012 11:00:00 GMT
max-age = 3600
Slide 47
Slide 47 text
Did it expire?
Last-Modified:
ETag:
Thu, 16 Mar 2012 11:30:00 GMT
"1edec-3e3073913b100"
Slide 48
Slide 48 text
Versioning
force new request with
<script/>
Slide 49
Slide 49 text
requests
caching
js & css
images
2
1
3
4
Slide 50
Slide 50 text
Combine files
.js
.js
.js
Slide 51
Slide 51 text
Why combine files?
.js
less requests
less overhead
more discipline
Slide 52
Slide 52 text
Don’t
over do it!
all.js
Slide 53
Slide 53 text
Suggestion
jquery.js
jquery.plugin1.js
jquery.plugin2.js
jquery.plugin1.conf.js
jquery.plugin2.conf.js
Slide 54
Slide 54 text
Suggestion*
jquery.js
pageName.conf.js
* your mileage may vary
Slide 55
Slide 55 text
Minify
Keep only the file nutrients
strip code comments
pack names
Slide 56
Slide 56 text
tips for better results
var foo;
var bar;
var baz;
var foo,
bar,
baz;
Minify
Single var declaration
Slide 57
Slide 57 text
tips for better results
if (i>0){
return i
}
return 0;
var res = 1;
if (i>0){
res = i
}
return res;
Minify
Single return (over-simplification)
Slide 58
Slide 58 text
tips for better results
App.component.module.panel
Minify
Avoid long namespaces
Slide 59
Slide 59 text
Compress
.js
Content-encoding:
gzip
Slide 60
Slide 60 text
Correct
loading
order
CSS
JS
JS
Slide 61
Slide 61 text
Styles first
Scripts after
HTML next
Slide 62
Slide 62 text
Scripts block
downloading
and
parsing
move to end or
load async
Slide 63
Slide 63 text
<script src=“setup.js” defer >
JavaScript
Slide 64
Slide 64 text
Cuzillion
‘cuz there are
a zillion pages
to check
Slide 65
Slide 65 text
requests
caching
js & css
images
2
1
3
4
Slide 66
Slide 66 text
Optimize images
strip meta
unused channels
Slide 67
Slide 67 text
Optimize images
OptiPNG
ImageOptim
jpegtran
Tools
Slide 68
Slide 68 text
CSS Sprites
less requests
less overhead
Slide 69
Slide 69 text
base64
data:image/gif;base64,
R0lGODlhAQABAID/
AMDAwAAAACH5BAEA…
less requests
some overhead
more CPU work
think about less gifted devices
!
!
Slide 70
Slide 70 text
Speaking of mobile
and their tiny-ish screens
serve scaled
images
CPUs that
Slide 71
Slide 71 text
burn that CPU
!
transform: rotate(360deg)
vs
CSS effects
vs
CSS effects
Slide 72
Slide 72 text
CSS effects
hog that GPU*
tranform3d
*where available
Slide 73
Slide 73 text
linear-gradient()
box-shadow
border-radius
background: im1.png, im2.png
Replace images
with CSS
Slide 74
Slide 74 text
However…
"border-radius" is among
the most expensive
CSS properties
to affect rendering time […]
”
- Juriy Zaytsev AKA kangax
Slide 75
Slide 75 text
Balance
you must seek it
http
requests
machine
load
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
requests
caching
js & css
images
2
1
3
4
Slide 79
Slide 79 text
Tips & Tricks
in your workflow
Slide 80
Slide 80 text
Deploy hooks
.html
css
css
css
.html
css.min
?v=2
Slide 81
Slide 81 text
Track your speed
PageSpeed
Service or SDK
Google
HTTPArchive.org
Slide 82
Slide 82 text
mod_pagespeed
Apache 2.2
Performance
booster
Customizable
filters
Slide 83
Slide 83 text
Tips & Tricks
in your code
Slide 84
Slide 84 text
jQuery Selectors
70% faster than
$(“#parent”).find(“.class”)
$(“#parent .class”)
Slide 85
Slide 85 text
$(selector
)
is expensive
there’s a reason it’s a dollar
Slide 86
Slide 86 text
jsPerf.com
run your own tests
test your assumptions
Slide 87
Slide 87 text
DocumentFragment
document.
createDocumentFragment()
Slide 88
Slide 88 text
Detach Node
detached =
Node.removeChild(child)
before heavy manipulation
Slide 89
Slide 89 text
Delegate Events
body
.addEventListener(“click”,
function(e){
if (e.target.name = “el”)
// magic
})
Slide 90
Slide 90 text
Less requests
Smaller files
More caching
CSS vs IMG
Take pride
Slide 91
Slide 91 text
it’s The Future
isn’t it?
Slide 93
Slide 93 text
Resources
http://code.google.com/speed/page-speed/
http://developer.yahoo.com/yslow/
http://code.google.com/speed/page-speed/docs/module.html
mod_page speed
Measuring tools
http://stevesouders.com/
Expert blogs
http://addyosmani.com/blog/
http://calendar.perfplanet.com/2011/
Slide 94
Slide 94 text
More Resources
http://www.browserscope.org/
http://stevesouders.com/cuzillion/
Tools
https://developers.google.com/closure/
https://github.com/mishoo/UglifyJS
http://www.spritecow.com/
http://optipng.sourceforge.net/
Minification
Image optimization
http://imageoptim.com/
Slide 95
Slide 95 text
Even More Resources
http://addyosmani.com/jqprovenperformance/
http://jsperf.com/popular
JavaScript Performance
http://perfectionkills.com/profiling-css-for-fun-and-profit-
optimization-notes/
http://www.webkitbits.com/post/16771926700/matt-seeley-
webkit-in-your-living-room
http://velocityconf.com/velocity2012
CSS Profiling & WebKit
Conference
• http://jsperf.com/jquery-selector-perf-right-to-left