Date post: | 28-Jan-2015 |
Category: |
Technology |
Upload: | yay-w00t |
View: | 114 times |
Download: | 8 times |
Front-end PerformanceKornel Lesi!skiLondon Web Standards 2010
Why front-end?
Every site has one
Same technologies everywhere
Page generation time—milliseconds
JavaScript execution time—milliseconds
Page loading time—seconds
Why front-end?
Why performance?
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
Factor in Google ranking (affects 1%)
Grain of salt needed for Webmaster Tools page speed and "Let's make web faster" site
Nielsen’s response time limits
100ms feels instantaneous
1s keeps flow uninterrupted
10s is the limit (especially without feedback)
Enemy #1: Latency
Latency
Since modems bandwidth improved 300 times
Latency improved 3 times
Latency isn't going away
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
Reduce number of requests
Merge all JavaScript files into one
don’t forget to put newlines between files
Merge all CSS files into one
don’t use @import!
use @media print
Automate this
But not in PHP!
CSS spritesMerge many small images into one
Use background-position
Good for hover effects
Not clipboard-friendly
Avoid huge bitmaps
Maintenance pain
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
Cache forevermod_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
Scripts
@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
@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
Scripts must be at end of body
A'?%$#8+'%?B
A/L2@)B
@&H&%CH50?8$20CEM++@2N'85HHCEFOEF
:-%+N@&H&%%&@FH50?8$20+@&H&%CHE+M++:-%+&GN@&H&%%&@F++N@&H&%%&@G&PH50?8$20CEM&CEFHCEOQHO
@&H&%GH50?8$20CHEM'&8*$,&258CHR6EO+@&H&%CN@&H&%%&@EF+N@&H&%%&@G0544F
…
…
Waiting for ad.doubleclick.net…
Ads
Ads
Use $H%-,& otherwise
SWFObject is great
Remember embeds and buttons are same thing
Place at very end of document and use #2'$8$20Q-L'2458&
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
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
Waterfall
Waterfall
Waterfall
Good
Bad
Waterfall
IE7 and Opera differ from everything else
www.webpagetest.org
Fiddler
Enable "streaming mode"!
WebKit inspector
Firebug
YSlow Google PageSpeed
friend or foe?Progressive rendering
Makes slow pages faster
Makes fast pages slower
Rendering delay: load under 2s for greatness
Specify image dimensions
Specify float widths
Avoid clearing divs or brs!
Use overflow:hidden
Use clearfix where
overflow can't be used
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. 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. 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
Avoid clearing divs or brs!
Use overflow:hidden
Use clearfix where
overflow can't be used
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. 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 …
Lorem ipsum. This is subliminal message. You
!"#$%&'(#)(&&*
Bandwidth
Gzip, gzip, gzip
HTML, CSS, JS—everything text-based >50% savings
Very fast, faster than network
mod_deflate/mod_compress
PHP filter
Automatically negotiated
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
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
pornel.net/imagealpha
ImageAlpha
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
ImageOptimimageoptim.pornel.net