Transcript of "Essential for a great web experience e briks infotech"
Speed is Essential for aGreat Web Experience@andydavies#oredevNov 2012 http://www.ﬂickr.com/photos/dex1138/7879381800
Performance isn’t always a priority http://www.ﬂickr.com/photos/randomidea/247994072
“Has it loaded yet?” http://www.ﬂickr.com/photos/kindoﬁndie/4099768084
Our perception of response time Instant Seamless Yawn!100ms 1s 10s 3s - Recommended 6.5s - Alexa 2000 Load Time Fall 2012 Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968
“50% more concentration when using badly performing web sites” Foviance http://www.ﬂickr.com/photos/yourdon/3366991042
Effect of delay on abandonment rate... Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez
Over 80% of page load time is on front-end Backend news.bbc.co.uk Frontend ebay.co.ukdebenhams.co.uk direct.gov.uk amazon.co.uk mumsnet.com guardian.co.uk 0 1 2 3 4 5 Measured via residential ADSL line using Google Chrome
But don’t forget to fix slow server responses 4 seconds!
Bandwidth (often) isn’t the bottleneck2.01.51.00.5 0s 5s 10s news.bbc.co.uk tested via webpagetest.org throttled at 1.5Mbps (bursts over 1.5Mbps are artefact of testing)
Visualising TCP Carlos Bueno (@archivd) https://vimeo.com/14439742
Impact of Latency 4 3Page Load Time (s) 2 1 0 20 40 60 80 100 120 140 160 180 200 220 240 Round Trip Time (ms)
Minimum round trips to download a ﬁle (TCP Segments)285kB214kB143kB 71kB Size 1 2 3 4 5 6 7 8 9 10 11 Round Trips TCP and the Lower Bound of Web Performance John Rauser
Latency is Our Biggest Enemy “In 2012, the average worldwide RTT to Google is still ~100ms, and ~50-60ms within the US.” “we are looking at 100-1000ms RTT range on mobile” Ilya Grigorik http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
3G Radio Resource Control Idle for 12s IDLE CELL_FACH 1s delay 1-2s delay! CELL_DCH Idle for 5s Exact timings vary and depend on carrier NOT device http://web.eecs.umich.edu/~fengqian/paper/3g_imc10.pdf
New Devices, New Challenges... 2 x Resolution = 4 x Pixels! http://www.ﬂickr.com/photos/roopaw/6985954465
Some Alternatives CSS SVG FontsBitmaps still a challenge but interesting experiments around
It’s no longer a desktop world http://www.ﬂickr.com/photos/adactio/6960610178
Go “Mobile First” for Responsive Designs http://seesparkbox.com
Use “Right-sized” Images http://www.ﬂickr.com/photos/emzee/139794246Standards support (picture? srcset?) is coming but unclear when!Meanwhile services such as sencha.io, resrc.it and JS libraries -pictureﬁll.js, foresight.js can help.
Parallel Downloads news.bbcimg.co.uk static.bbc.co.uk Domain Sharding increases number of parallel downloads but… …more connections may not be a good idea on mobile …may also interfere with multiplexing in protocols like SPDY
Get the <head> straight<!doctype html><html><head> CSS before JS <meta charset="utf-8"> Ideally one ﬁle* <title>This is my title<title> <link rel="stylesheet" href="styles.css" type="text/css" /> <script src="script.js"></script> . . Only JS needed . during page load</head> * Depends on size and whether major / minor breakpoints used
The Script Tag <script src=″…″></script> Until the script has executed, the rendering of all elements below is blocked!
“Virgin Media Broadband ISP UsersAffected by Website Routing Woes” ISP Review, May 26, 2012Customer jcmm33 said:“Same issue here as well, been like this all day. Sites likeautotrader.co.uk don’t appear to be accessible, others likethe telegraph.co.uk are waiting on other components todownload (content from sites like cg-global.maxymiser.com,pixel.quantserve.com).” http://www.ispreview.co.uk/index.php/2012/05/uk-virgin-media-broadband-isp-users-affected-by-website-routing-woes.html
Impact on The Telegraph…Same issue affected many other sites http://bit.ly/Ncy7Rd
Lots of factors to think about... http://www.ﬂickr.com/photos/corneveaux/3248566797
Don’t have to do it all by hand http://www.ﬂickr.com/photos/simeon_barkas/2557059247
Performance isn’t just for Christmas Measure Optimise Analyse
Measure Impact on Business Goals http://www.ﬂickr.com/photos/safari_vacation/5961260280