2. Why front-end?
Every site has one
Same technologies everywhere
Page generation time—milliseconds
JavaScript execution time—milliseconds
Page loading time—seconds
4. Google/Bing speed test
Delays under half a second impact business metrics
The cost of delay increases over time and persists
Number of bytes in response is less important than
what they are and when they are sent
Use progressive rendering
5. Factor in Google ranking (affects 1%)
Grain of salt needed for Webmaster Tools page speed
and "Let's make web faster" site
6. Nielsen’s
response time limits
100ms feels instantaneous
1s keeps flow uninterrupted
10s is the limit (especially without feedback)
11. HTTP & TCP/IP latency
Three-way handshake: SYN, SYN-ACK, ACK
2 ping times to download anything
Pipelining unreliable
Slow start = unused bandwidth
HTTPS is much much worse
Reduce number of requests
13. Merge all JavaScript files into one
don’t forget to put newlines between files
Merge all CSS files into one
don’t use @import! Bu
tn
ot
use @media print in P
HP
!
Auto mate this
14. CSS sprites
Merge many small images into one
Use background-position
Good for hover effects
Not clipboard-friendly
Avoid huge bitmaps
Maintenance pain
15. Parallelise!
IE7 has 2 connections limit per hostname (not server)
That's what RFC2616 suggests
Use cookie-less assets sever (CDN)
Serve CSS from same host as HTML
18. @2?5,&08>3%$8& is evil
Scripts are black box. Can affect rest of the document:
A'?%$#8B
++@2?5,&08>3%$8&C1AD997EF
A/'?%$#8B
A'?%$#8+'%?G1H227BA/'?%$#8B
99B
19. @2?5,&08>3%$8& is evil
Makes parser wait for scripts
WebKit, Firefox and IE8 parse page twice
IE7 and Opera don't!
There’s no hope for scripts that write scripts
@2?5,&08>3%$8&C1A'?%$#8+'%?GI@$'-'8&%JK
23. Ads
Place at very end of document
and use #2'$8$20Q-L'2458&
Use $H%-,& otherwise
SWFObject is great
Remember embeds and buttons are same thing
24. Don't use @&H&% attribute
Few browsers support except IE
Poor support in IE too
Quirky and not really asynchronous
@2?5,&08>3%$8& won't work anyway
-')0? is better, but beware of race conditions
25. Hosted libraries don't help
Few users have same version cached
Extra penalty if they don't
Caches are not as persistent as you think
You’ll need your own scripts file anyway
32. Makes slow pages faster
Makes fast pages slower
Rendering delay: load under 2s for greatness
Specify image dimensions
Specify float widths
33. Avoid clearing divs or brs! Lorem ipsum. This is subliminal message. You
love this presentation. Kornel is the best. Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et
Use overflow:hidden
dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint
Use clearfix where occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
Lorem ipsum. This is subliminal message. You
love this presentation. Kornel is the best. Lorem
overflow can't be used
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est
laborum. Lorem ipsum. This is subliminal
message. You love this presentation. Kornel is the
best. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est
laborum.
AL%+?4&-%G-44B
34. Avoid clearing divs or brs! Lorem ipsum. This is subliminal message. You
love this presentation. Kornel is the best. Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et
Use overflow:hidden
dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint
Use clearfix where occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
Lorem ipsum. This is subliminal message. You
love this presentation. Kornel is the best. Lorem
overflow can't be used
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est
…
!"#$%&'(#)(&&*
36. Gzip, gzip, gzip
HTML, CSS, JS—everything text-based >50% savings
Very fast, faster than network
mod_deflate/mod_compress
PHP filter
Automatically negotiated
37. Minify
10-15% users might not ask for gzip (lousy proxies,
antivirs, corporate firewalls)
Makes gzipped files even smaller
YUI Compressor for CSS and JS
Google Closure Compiler advanced optimisations
Makefile is a good idea
38. Image reduction
Lowest number of colours
Don't use PNG24. If you do, try posterize
Use PNG8+alpha (Photoshop sucks. Fireworks rocks)
Don't use GIF
JPEG likes blur and 8x8 boundaries
