Slides from London Web Standards talk April 2010 by Kornel Lesiński.

1. Front-end Performance
Kornel Lesi!ski
London Web Standards 2010

2. Why front-end?
Every site has one
Same technologies everywhere
Page generation time—milliseconds
JavaScript execution time—milliseconds
Page loading time—seconds

3. Why performance?

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)

7. Enemy #1: Latency

10. Latency
Since modems bandwidth improved 300 times
Latency improved 3 times
Latency isn't going away

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

12. 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

16. Cache forever
mod_expires
!"#$%&'()*)#&+$,-.&/#0.+1023+#45'+6+)&-%7
Change URL when content changes
'8)4&9:6;<=>?''
Verify cacheability
Mnot's cacheability engine redbot.org
Webkit's audit
web-sniffer.net

17. Scripts

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

20. Scripts must be at end of body
A'?%$#8+'%?B
A/L2@)B

21. :-%+N@&H&%%&@F
H50?8$20+@&H&%CHE+M
++:-%+&GN@&H&%%&@F
++N@&H&%%&@G&PH50?8$20CEM&CEFHCEOQH
O
…
@&H&%CH50?8$20CEM
++@2N'85HHCEF
OEF
…
@&H&%GH50?8$20CHEM'&8*$,&258CHR6EO+
@&H&%CN@&H&%%&@EF+
N@&H&%%&@G0544F

22. Waiting for ad.doubleclick.net…
Ads

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

26. Waterfall

27. Waterfall

28. Waterfall
Bad
Good

29. Waterfall
IE7 and Opera differ from everything else
www.webpagetest.org
Fiddler
Enable "streaming mode"!
WebKit inspector
Firebug

30. YSlow Google PageSpeed

31. Progressive rendering
friend or foe?

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
…
!"#$%&'(#)(&&*

35. Bandwidth

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

39. ImageAlpha
pornel.net/imagealpha

40. Image optimisation
Remove unused data: comments, EXIF metadata,
colour profiles (use sRGB with gamma 2.2)
Find optimal compression strategy (gzip levels and
methods, PNG filters)
No loss in quality

41. ImageOptim
imageoptim.pornel.net