Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Speed is Essential for a Great Web Experience (Digicure - Copenhagen)
1. Speed is Essential for a
Great Web Experience
@andydavies
Digicure
Oct 2012
http://www.flickr.com/photos/ahockley/3576838608
Wednesday, 24 October 2012
2. Performance isn’t always a priority
http://www.flickr.com/photos/randomidea/247994072
Wednesday, 24 October 2012
3. “Has it loaded yet?”
http://www.flickr.com/photos/kindofindie/4099768084
Wednesday, 24 October 2012
4. 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
Wednesday, 24 October 2012
5. “50% more concentration when using
badly performing web sites”
Foviance
http://www.flickr.com/photos/yourdon/3366991042
Wednesday, 24 October 2012
6. Effect of delay on abandonment rate...
Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez
Wednesday, 24 October 2012
7. Bing did some experiments
+1s
$/
- 2.8%
+
Wednesday, 24 October 2012
21. Bigger, Faster Servers?
http://www.flickr.com/photos/getbutterfly/6317955134
Wednesday, 24 October 2012
22. 80% plus of page load time is on front-end
Backend
news.bbc.co.uk
Frontend
ebay.co.uk
debenhams.co.uk
direct.gov.uk
amazon.co.uk
mumsnet.com
guardian.co.uk
0 1.25 2.5 3.75 5
Measured on residential ADSL line using Chrome 19
Wednesday, 24 October 2012
23. Fix slow server responses first
4 seconds!
Wednesday, 24 October 2012
24. Bandwidth (often) isn’t the bottleneck
2.0
1.5
1.0
0.5
0s 5s 10s
news.bbc.co.uk tested via webpagetest.org throttled at 1.5Mbps
(bursts over 1.5Mbps are artefact of testing)
Wednesday, 24 October 2012
31. Move the content closer
http://www.flickr.com/photos/jamesjordan/2198988999
Wednesday, 24 October 2012
32. Organise content so it’s easy to load
http://www.flickr.com/photos/jemsweb/4363548805
Wednesday, 24 October 2012
33. What’s the web made of?
Images
Scripts
Stylesheets
HTML
Flash
Other
Composition of ‘average’ web page via httparchive.org
Wednesday, 24 October 2012
34. Images are 64% of an ‘average’ web page
http://www.flickr.com/photos/zaprittsky/4520788183/
Wednesday, 24 October 2012
36. New Devices, New Challenges...
2 x Resolution = 4 x Pixels!
http://www.flickr.com/photos/roopaw/6985954465
Wednesday, 24 October 2012
37. Some Alternatives
CSS SVG Fonts
Watch SVG sizes not always smaller than bitmap!
Wednesday, 24 October 2012
38. Don’t block the browser...
http://www.flickr.com/photos/barteko/6128499314
Wednesday, 24 October 2012
39. news.bbcimg.co.uk
static.bbc.co.uk
Browsers can download resources in parallel
Wednesday, 24 October 2012
40. But Sometimes... The Waterfall of Doom!
2 seconds! (nearly)
Wednesday, 24 October 2012
41. The Script Tag
<script src=″…″></script>
Until the script has executed, the rendering of
all elements below is blocked!
Wednesday, 24 October 2012
42. “Virgin Media Broadband ISP Users
Affected by Website Routing Woes”
ISP Review, May 26, 2012
Customer jcmm33 said:
“Same issue here as well, been like this all day. Sites like
autotrader.co.uk don’t appear to be accessible, others like
the telegraph.co.uk are waiting on other components to
download (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
Wednesday, 24 October 2012
43. Impact on The Telegraph…
Same issue affected many other sites http://bit.ly/Ncy7Rd
Wednesday, 24 October 2012
44. Load Third Party scripts asynchronously
<script type="text/javascript">
function() {
var js = document.createElement('script');
js.async = true;
js.src = 'myscript.js';
var e = document.getElementsByTagName('script')[0];
e.parentNode.insertBefore(js, first);
})();
</script>
async attribute may be option but not supported by IE & Opera
Wednesday, 24 October 2012
45. The Challenge of Mobile
http://www.flickr.com/photos/cubicgarden/3281555681
Wednesday, 24 October 2012
46. Argh... My brain hurts!
http://www.flickr.com/photos/corneveaux/3248566797
Wednesday, 24 October 2012
47. Don’t have to do it all by hand
http://www.flickr.com/photos/simeon_barkas/2557059247
Wednesday, 24 October 2012
48. Performance isn’t just for Christmas
Measure
Optimise Analyse
Wednesday, 24 October 2012
49. Measure Impact on Business Goals
http://www.flickr.com/photos/safari_vacation/5961260280
Wednesday, 24 October 2012