Faster Frontends
•
2 likes•1,157 views
Faster Frontends - talk on web performance from Bristol Skillswap, March 2012 Covers the basics but a bit wordy in places!
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Faster Frontends
Similar to Faster Frontends (20)
More from Andy Davies
More from Andy Davies (18)
Recently uploaded
Recently uploaded (20)
Faster Frontends
- 1. Faster Frontends @andydavies Bristol Skillswap, Mar 2012 http://www.flickr.com/photos/mikebaird/2464769129/
- 2. People are impatient... Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez
- 3. Pages are bigger and more complex 14.1k 498k 684k 2.3 objects 75 objects 83 objects (est) http://www.strangeloopnetworks.com
- 4. Are we relying on browsers and ISPs to bail us out? http://www.flickr.com/photos/12023825@N04/2898021822/
- 5. Browsers are kickin’ ass and taking names http://www.flickr.com/photos/brianauer/2197218356/
- 6. But faster connections have limited impact 40 Percentage Improvement 30 20 10 1 2 3 4 5 6 7 8 9 10 Bandwidth (Mbps) Mike Belshe, “More Bandwidth Doesn’t Matter (much)” - http:// bit.ly/ACPGiA
- 7. So, what can we do to make sites faster? http://www.flickr.com/photos/halans/5456860491/
- 8. Bulk of load time after page has been generated Front-end time Look: Bandwidth not close to being maxed out!
- 10. Beat latency - reduce requests Merge CSS Merge JS Combine images into sprites Pictogram / icon fonts dataURIs? Cache forever http://www.flickr.com/photos/martinrp/470090889/
- 11. Work the bandwidth - squeeze the content gzip/deflate anything that can be compressed html, css, js, xml, json etc. (perhaps even favicon.ico) ‘Minify’ js and css http://www.flickr.com/photos/andih/240584392/
- 12. Images make up the bulk of bytes transferred Pick the right format Consider alternatives jpeg - lossy SVG png - lossless CSS3 gif - animated Canvas Icon / pictogram fonts Don’t forget to optimise them! http://www.flickr.com/photos/zaprittsky/4520788183/
- 13. Frameworks and tools can help Frameworks are adding support for minifying, merging, versioning and caching Server plugins and cloud based services to do similar things are available http://www.flickr.com/photos/mtneer_man/359116762/
- 15. Load CSS first Browsers block rendering until external CSS files are downloaded (avoids the ‘Flash of Unstyled Content’) Avoid inline styles outside the <head>, may trigger reflow and repaint
- 16. Split the JavaScript payload Load only the essential JS in the <head> - mondernizr, html5shiv etc. Put the rest at the bottom of the page, or load asyncronously (Pagespeed can help find deferrable js) “Fast Loading Javascript” by @aaronpeters is a really good reference http://www.slideshare.net/startrender/fast-loading-javascript
- 17. Load Third Party ‘Widgets’ asynchronously Script for asynchronous loading: <script type="text/javascript"> function() { var js = document.createElement('script'); js.async = true; js.src = 'myscript.js'; var first = document.getElementsByTagName('script')[0]; first.parentNode.insertBefore(js, first); })(); </script> Synchronous scripts can break a site if the script fails to load or is blocked.
- 18. When Third Party ‘Widgets’ go bad From http://bit.ly/yRjX63
- 19. When Third Party ‘Widgets’ go bad From http://bit.ly/yRjX63
- 20. Flush the <head> CSS starts loading before page has finished (Can also flush other blocks of the page too)
- 21. background-image: url(...) delays the hero Hero arrives 4.5s in debenhams.com tested from Dulles,VA using webpagetest.org
- 22. A few last things...
- 23. How many of these stylesheets get loaded? <link rel="stylesheet" type="text/css" href="css/base.css" /> <link rel="stylesheet" type="text/css" href="css/flow.css" media="screen and (max-width: 960px)" /> <link rel="stylesheet" type="text/css" href="css/mobile.css" media="screen and (max-width: 480px)" /> <link rel="stylesheet" type="text/css" href="css/retina.css" media="screen and (-webkit-min-device-pixel-ratio: 2)" /> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="css/ie7.css" /> <![endif]-->
- 24. How many of these stylesheets get loaded? <link rel="stylesheet" type="text/css" href="css/base.css" /> <link rel="stylesheet" type="text/css" href="css/flow.css" media="screen and (max-width: 960px)" /> <link rel="stylesheet" type="text/css" href="css/mobile.css" media="screen and (max-width: 480px)" /> <link rel="stylesheet" type="text/css" href="css/retina.css" media="screen and (-webkit-min-device-pixel-ratio: 2)" /> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="css/ie7.css" /> <![endif]--> All of them! (ie7.css only in IE7 though)
- 25. Font foundries will slow things down Google Typekit (Both have really short cache expiry times. Typekit doesn’t compress eot) http://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/
- 26. Browsers move on - use up to date libraries Most popular version of jQuery is over two years old! (released Feb 2010) 1.3.0 1.3.1 1.3.2 1.4.0 1.4.1 1.4.2 1.4.3 1.4.4 1.5.0 1.5.1 1.5.2 1.6.0 1.6.1 1.6.2 1.6.3 1.6.4 1.7.0 1.7.1 Based on references to jQuery hosted on Google CDN in http://httparchive.org/ Feb 2012 crawl
- 27. Performance matters, it has a measurable impact on engagement Browsers and ISPs can’t fix all our speed issues We have the tools and techniques to make a dramatic difference
- 28. http://www.slideshare.net/andydavies @andydavies andy@asteno.com http://www.flickr.com/photos/auntiep/5024494612
Editor's Notes
- \n
- Other indications\n - Google&#x2019;s / Yahoo/ Bing experiments\n - Mozilla\n - Shopzilla\n - Kerboodle experience\n\nAlso people&#x2019;s perception of time is faulty... (Stoyan Stefanov, Psychology of Performance)\n - Average person perceives page takes 15% longer to load that reality\n - Will recount it as 35% longer when talking to others\n\n
- Developing richer, higher fidelity, usable more pleasant experiences for people\n\nContent growth: 2001 -> 2012 (Souders / HTTP Archive)\nhtml+10%\njs+44%\ncss+19%\nimages +21%\nflash -21%\n \n
- \n
- Faster JS engines\nBetter network management e.g. SPDY, speculative TCP connections\nGPU acceleration\nNew formats e.g. WebM, WebP\n\n
- At low speeds throughput matters but as speeds rise number of requests and latency becomes the limiting factor\nConnection speeds are increasing but connections are shared and contention can be a problem (both within a household and at the exchange)\n\n\n
- \n
- \n
- \n
- What about CDN?\nWhat about cheating on TCP slow-start\nLinux 2.6.39 increases initcwnd to 10\n
- \n
- Images form on average 59% of site content (exc video and audio) \n\nRetina displays complicate things - time for vectors / fonts?\n
- Framework support\n Asset pipeline (Rails)\n Resources plugin (Grails)\n Webassets (Python)\n Assetic (PHP)\n\nServer plug-ins\n mod_pagespeed\n Reduce Requests (IIS)\n Aptimize (IIS)\n
- Shows the page is loading\n\nPage usable sooner\n\nJavascript issues don&#x2019;t block the rendering\n
- \n
- Asynchronous loaders like LABjs, yepnope, HEADjs\n
- \n
- \n
- Caveat: What happens if the page fails after the flush?\n
- Film strip of debenhams.com loading, frames at 0.5s interval\n\nMain hero/banner image is delayed as it&#x2019;s loaded using background-image: url(...)\n\nWould load sooner if <img> was used instead\n
- \n
- \n
- Major and minor breakpoints in Responsive Design (@byranrieger / @stephanierieger)\n
- Number of domains involved for Google\nBoth have very short cache-expiry time for fonts\nTypekit doesn&#x2019;t compress EOT fronts\n
- Do you even need jQuery - zepto.js and other js frameworks (microjs.com)\n
- \n
- \n