Faster Frontends

2,128 views

Published on

Faster Frontends - talk on web performance from Bristol Skillswap, March 2012

Covers the basics but a bit wordy in places!

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,128
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • Other indications\n - Google’s / Yahoo/ Bing experiments\n - Mozilla\n - Shopzilla\n - Kerboodle experience\n\nAlso people’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’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’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’t compress EOT fronts\n
  • Do you even need jQuery - zepto.js and other js frameworks (microjs.com)\n
  • \n
  • \n
  • Faster Frontends

    1. 1. Faster Frontends@andydavies Bristol Skillswap, Mar 2012 http://www.flickr.com/photos/mikebaird/2464769129/
    2. 2. People are impatient... Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez
    3. 3. Pages are bigger and more complex 14.1k 498k 684k 2.3 objects 75 objects 83 objects (est) http://www.strangeloopnetworks.com
    4. 4. Are we relying on browsers and ISPs tobail us out? http://www.flickr.com/photos/12023825@N04/2898021822/
    5. 5. Browsers are kickin’ ass and taking names http://www.flickr.com/photos/brianauer/2197218356/
    6. 6. But faster connections have limited impact 40Percentage 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. 7. So, what can we do to make sites faster? http://www.flickr.com/photos/halans/5456860491/
    8. 8. Bulk of load time after page has been generated Front-end time Look: Bandwidth not close to being maxed out!
    9. 9. The basics...
    10. 10. Beat latency - reduce requestsMerge CSSMerge JSCombine images into spritesPictogram / icon fontsdataURIs?Cache forever http://www.flickr.com/photos/martinrp/470090889/
    11. 11. Work the bandwidth - squeeze the contentgzip/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. 12. Images make up the bulk of bytes transferredPick 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. 13. Frameworks and tools can helpFrameworks are adding support for minifying,merging, versioning and cachingServer plugins and cloud based services to dosimilar things are available http://www.flickr.com/photos/mtneer_man/359116762/
    14. 14. Progressive Rendering
    15. 15. Load CSS firstBrowsers block rendering until external CSS filesare downloaded (avoids the ‘Flash of UnstyledContent’)Avoid inline styles outside the <head>, maytrigger reflow and repaint
    16. 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. 17. Load Third Party ‘Widgets’ asynchronouslyScript 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 toload or is blocked.
    18. 18. When Third Party ‘Widgets’ go bad From http://bit.ly/yRjX63
    19. 19. When Third Party ‘Widgets’ go bad From http://bit.ly/yRjX63
    20. 20. Flush the <head> CSS starts loading before page has finished (Can also flush other blocks of the page too)
    21. 21. background-image: url(...) delays thehero Hero arrives 4.5s in debenhams.com tested from Dulles,VA using webpagetest.org
    22. 22. A few last things...
    23. 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. 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. 25. Font foundries will slow things downGoogleTypekit (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. 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. 27. Performance matters, it has a measurable impact on engagementBrowsers and ISPs can’t fix all our speed issues We have the tools and techniques to make a dramatic difference
    28. 28. http://www.slideshare.net/andydavies @andydavies andy@asteno.com http://www.flickr.com/photos/auntiep/5024494612

    ×