Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The CBC on a diet - Slimming down for a whole nation


Published on

Talk at FITC Spotlight Web Performance and Optimization, March 16, 2013, Toronto.

The CBC serves optimized content to millions of Canadians. We’ll share our experience & knowledge of optimizing content delivery for a high-scale & unpredictable audience. We will explain our performance stack from server-side optimization tricks to automated performance tools during deployment. We will discuss our challenges, findings and learnings of continually improving site delivery.

Published in: Technology
    Are you sure you want to  Yes  No
    Your message goes here
  • Odd carb trick burns up to 1LB per DAY.. How?? .. ♥♥♥
    Are you sure you want to  Yes  No
    Your message goes here
  • Enough is a enough! Is this going to be the day you finally do something about your health? It is a lot easier than you think to be able to shed off unwanted weight. See how you can get started today with 1 minute weight loss routines! ♣♣♣
    Are you sure you want to  Yes  No
    Your message goes here

The CBC on a diet - Slimming down for a whole nation

  1. 1. The CBC on a DietSlimming down for a whole nation #SpotlightWPO
  2. 2. Barbara // bbinto Blake // blakecrosbySenior Architect, Mobile Web Team Lead, Media Production Support Digital Operations, CBC MO&T, CBC #SpotlightWPO
  3. 3. Today’s workout• Quick dive into web performance• The CBC - weight problems and temptations• How to stay in shape• Real production exercises that worked for CBC• Our fitness tips summarized• Performance Quiz (if time permits) #SpotlightWPO
  4. 4. PerformanceWhy the need for speed? #SpotlightWPO
  5. 5. #SpotlightWPO
  6. 6. Perception of Speed• It feels slower when... • Unpleasant • Unknown • Boring• It feels faster when... • Task is successful • Responsive system • Progress and informed #SpotlightWPO
  7. 7. “Ultimately performance is about respect”Brad Frost #SpotlightWPO
  8. 8. Mobile & PerformanceWhy is performance for mobile so crucial? #SpotlightWPO
  9. 9. It’s a mobile (browser) world #SpotlightWPO
  10. 10. Performance on Mobile• Battery-driven device, heavy pages will drain the battery (excellent paper)• Smaller CPU• Network connectivity / latency• Data usage - Dont make the user pay for bad performance #SpotlightWPO
  11. 11. You’re dealing with impatient users74% of mobile web users expect a page to loadin 5 seconds or lessGomez - What Mobile Users Want #SpotlightWPO
  12. 12. Measure performance #SpotlightWPO
  13. 13. Tools, Formats and Browser Plugins• Browser plugins • “Waterfall” inside Firebug, Chrome etc • PageSpeed, YSlow and YSlow Plugin for 3rd party• HAR (ultrasound of a web page) • Based on the HTTP Archive specification • Captures web page loading information in a JSON format • Visualizing: HAR Viewer #SpotlightWPO
  14. 14. Collecting measurements #SpotlightWPO
  15. 15. Synthetic Testing and Real User Monitoring (RUM)Hand in hand #SpotlightWPO
  16. 16. Synthetic Testing• You run the test• Establish a baseline performance level (e.g identify poor 3rd party scripts)• Measuring one exact configuration (of your choice)• Pitfalls • “[...] your real users are experiencing page load times that are twice as long as their corresponding synthetic measurements.” (Steve Souders) #SpotlightWPO
  17. 17. Synthetic Testing - Tools• PageSpeed • Insights API curl ""• • Public and private instances with RESTful API• Headless Scripts and Tools • phantomJS, confess, or write your own script #SpotlightWPO
  18. 18. Real User Monitoring (RUM)• User runs the test• Measures the experience of the “actual” user • “It is the ground truth for what users are experiencing” (Steve Souders)• Get concrete information about user’s connectivity, latency, bandwidth etc. #SpotlightWPO
  19. 19. RUM• Based on navigation timing !"#$%&()&*+,$-(.(,)$• Free Tools • Boomerang • Google Analytics• Vendors • Keynote • New Relic • and more... /0123344454"5+6)3-73,&()&*+,8*.(,)3$#SpotlightWPO
  20. 20. Canadian crown corporation Desktop site page views ~5Mio/day Mobile Touch site page views ~ 500K/day Canadian Broadcasting Corporation National public radio and television broadcasterKind of like the BBC but not really - the CBC employs commercial advertising to supplement its federal funding #SpotlightWPO
  21. 21. Mandate: The 1991 Broadcasting Acts statesthat..."...the Canadian Broadcasting Corporation, as the national public broadcaster, shouldprovide radio and television services incorporating a wide range of programming thatinforms, enlightens and entertains;...the programming provided by the Corporation should:vi. be made available throughout Canada by the most appropriate andefficient means and as resources become available for the purpose, andvii. reflect the multicultural and multiracial nature of Canada.” #SpotlightWPO
  22. 22. Organizational Structure - Clients #SpotlightWPO
  23. 23. CBC’s digital ecosystem #SpotlightWPO
  24. 24. What constitutes a web product at CBC? #SpotlightWPO
  25. 25. Anatomy of a CBC page• 3rd party scripts • Tracking (SiteCatalyst, ComScore, ClickTale) • Ads (GPT) • Social plugins (Gigya)• Content • Global header and footer (for branding) • Actual content to tell a story, e.g. Text, Video, Audio, Images etc. #SpotlightWPO
  26. 26. Weight Check: Desktop and Mobile #SpotlightWPO
  27. 27. A typical CBC story page #SpotlightWPO
  28. 28. Let’s put them on a scale!Content Breakdown #SpotlightWPO
  29. 29. Content Breakdown - Mobile #SpotlightWPO
  30. 30. Content Breakdown - Mobile Fully loaded 247kB HTTP requests 36 #SpotlightWPO
  31. 31. Content Breakdown - Desktop #SpotlightWPO
  32. 32. Content Breakdown - Desktop #SpotlightWPO
  33. 33. Content Breakdown - Desktop Fully loaded 1,539kB HTTP requests 164 #SpotlightWPO
  34. 34. Too heavy? Compared to what though...? #SpotlightWPO
  35. 35. httparchive.orgThe HTTP Archive tracks how the web is built #SpotlightWPO
  36. 36. Desktop - Total Transfer Size November 2010 - March 2013: + ~50% 1211kB 90 req. #SpotlightWPO
  37. 37. Mobile - Total Transfer Size June 2011 - March 2013: + ~50% 720kB 60 req. #SpotlightWPO
  38. 38. The average page will hit 2MB by 2015Images and 3rd party scripts are the main culprits #SpotlightWPO
  39. 39. Avoid Dangerous Temptations #SpotlightWPO
  40. 40. Temptations• That’s a lot of cookies Yikes! Oh No!
  41. 41. Temptations Tipping the scale #SpotlightWPO
  42. 42. Cookies on a Diet• Use the path option to limit cookie scope• Store your static assets at a different domain (• Don’t use cookies for fun. Ask: Do you really need them? #SpotlightWPO
  43. 43. Common temptations of a front-end dev #SpotlightWPO
  44. 44. Temptations Let’s use thoseYeah yeah, 2MB retina I want toI’ll optimize images for use thatlater every cool new platform plugin I just found Sure, I’ll add Wait....I just want to that new make it pretty (and social media prettier) plugin #SpotlightWPO
  45. 45. 3rd Party Monsters #SpotlightWPO
  46. 46. Monsters?• Kinds of monsters • Ads, tracking, social buttons• They are unpredictable, scary, disruptive, sneaky and • Could slow down your site • Could bring down your site (Single Point of Failure) • Could do things you don’t want them to do • Add weight and complexity to your page #SpotlightWPO
  47. 47. What would a life without ads feel like....???? #SpotlightWPO
  48. 48. The wonderful life without ads.... #SpotlightWPO
  49. 49. CBC without mobile touch ads....• Using server-side ads code over client-side code saved us ~20% of load time• Using no ads in comparison to client-side ads reduced our load time by ~40% #SpotlightWPO
  50. 50. And the danger with all diets .... #SpotlightWPO
  51. 51. Yo-yo effect• Keep the excitement and awareness• Be diligent and stay focused• Don’t gain the weight back #SpotlightWPO
  52. 52. Monitor your fitness levelSo you can identify your problem areas #SpotlightWPO
  53. 53. Monitoring your fitness level Alerts #SpotlightWPO
  54. 54. Monitoring your fitness level Automated Reports #SpotlightWPO
  55. 55. Monitor and test your speed (Mobile)• Device testing and speed simulation • Adobe Edge • shim (Boston Globe) • Slowy• Remote debugging • Weinre / • Bookmarklets (Firebug Lite, YSlow) • Safari Remote Web Inspector #SpotlightWPO
  56. 56. Monitor and average the Unpredictable Typical (breaking) news traffic • Difficult to measure average, visitors
  57. 57. Create your own performance dashboard #SpotlightWPO
  58. 58. Create your own perf dashboard• Run WebPageTest on your own server and export HAR files• Automate your test runs• Use js tools to visualize (Google chart tools, d3.js) #SpotlightWPO
  59. 59. Create your own perf dashboard• JavaScript based tools • PhantomJS: headless webkit with JavaScript API • CasperJS: navigation scripting and testing utility for PhantomJS • boomerang.js (JavaScript library for RUM): measures the page load time experienced by real users #SpotlightWPO
  60. 60. Stay in shape #SpotlightWPO
  61. 61. #SpotlightWPO
  62. 62. Front-End• Google • rules_intro• Yahoo • #SpotlightWPO
  63. 63. Front-End• Conditional loading• Be careful on the 3rd party scripts (SPOF)• Avoid re-rendering DOM elements• Use data:uri • Encoded in base 64 format • For example, can be used to replace background images < 2kB #SpotlightWPO
  64. 64. data:uri• Task: CBC Gem• Performance test 30px • no background image, pure CSS • png background image inside CSS 30px • data:uri (encoded png as base 64) inside CSS• Conditions • all minified, concatenated, compressed #SpotlightWPO
  65. 65. data:uri - pure CSS #SpotlightWPO
  66. 66. data:uri - png bg img in CSS #SpotlightWPO
  67. 67. data:uri in CSS #SpotlightWPO
  68. 68. Performance comparison pure CSS PNG in CSS data:uri in CSS HTTP requests 2 3 2 Bytes in kB 4.1 2.9 3.3 Load Time 0.303s 0.389 0.26 (Median) #SpotlightWPO
  69. 69. Server and Back-End• Last mile acceleration (use GZip compression)• Take advantage of a CDN, if possible• Only use cookies where necessary• Caches are your friend #SpotlightWPO
  70. 70. Dedicated mobile sites #SpotlightWPO
  71. 71. Server-side Optimization & DeviceDetection• Decide on the server what to serve • Different websites (Text, Rich, Touch) for optimized experience • Optimized and different images for all of our 3 mobile sites• Edge side include technology (ESI) for device detection and/or conditional loading #SpotlightWPO
  72. 72. Responsive Web Design and Web Performance“72% of the sites using responsive design dont optimize for mobile” (Guy Podjarny)(86% in 2012) #SpotlightWPO
  73. 73. How about RESS?• Responsive Web Design with Server Side Components• Heavy resource lifting should be done on the server #SpotlightWPO
  74. 74. Second Screen Example - RESSTouch Mobile Tablet Desktoplow-res images and mobile ads retina high-res images and mobile ads high-res images and fullsite ads #SpotlightWPO
  75. 75. RESS - Server Side Component #SpotlightWPO
  76. 76. RESS - RWD component #SpotlightWPO
  77. 77. Exercises that worked for CBC #SpotlightWPO
  78. 78. The Power of 304• Very important to support If-Modified-Since requests• Allows caches to properly cache content. Don’t cache bust! #SpotlightWPO
  79. 79. The Proof 28kb 12kb #SpotlightWPO
  80. 80. Before.... After
  81. 81. Keep those 404s in check• Heavy 404 Page?• Browser will download the 404 page even if it’s for a broken image or other asset #SpotlightWPO
  82. 82. Definitely not super-model thin...
  83. 83. The Difference...• 5.2kB versus 1.4kB• Savings of ~75% #SpotlightWPO
  84. 84. Global Shell• Shared by all• Visual representation• Non-visual representation • SSI variables in header to serve ads and tracking • Global scripts and stylesheets • SiteCatalyst and ComScore #SpotlightWPO
  85. 85. Improvement is easier than you think #SpotlightWPO
  86. 86. How did we improve? Simple!• Re-factored code: Removed old/un-used code• Moved some scripts to the bottom of page• Minified and concatenated scripts and CSS files to reduce file size and HTTP requests #SpotlightWPO
  87. 87. How did we improve?• Why optimizing manually if you can just automate it• Included performance optimization into your deploy and release process #SpotlightWPO
  88. 88. Automated & Built-in Performance Tips• Maven, Ant Tools and Plugins • Closure Compiler (Google) • Minify-maven-plugin • HTMLCompressor • Confess • cssembed.jar for data:uri #SpotlightWPO
  89. 89. Automated & Built-in Performance Tips• If you can’t / don’t want to use Maven / Ant • Taskrunners and Scaffolding: Grunt, Yeoman• Continuous integration • Jenkins and Hudson #SpotlightWPO
  90. 90. What were the results? #SpotlightWPO
  91. 91. Global Shell #SpotlightWPO
  92. 92. Global Shell Area Before After Improvement (in %) HTTP 24 18 25 RequestsPage Weight 71.9kB 69.8kB 3 Page Load* 3.16s 1.91s 40 *Page load depends on connection and latency #SpotlightWPO
  93. 93. If you don’t monitor your weight, you can alsomake it worse......and you’ll get unexpected visitors again ..yo-yo effect #SpotlightWPO
  94. 94. #SpotlightWPO
  95. 95. 3rd Party Monsters interrupt ((" ()" ISP issues Client-side scripts " &" !"#$%&( %" $" #" Global Shell !" $*+(*(+" $*+&*(+" %*#*(+" %*(+*(+" %*(*(+" %*+$*(+" &*+*(+" &**(+" &*($*(+" &*+,*(+" &*,)*(+" *$*(+" *(,*(+" *+)*(+" *+%*(+" ()*!*(+" ()*((*(+" ()*(&*(+" Data from Keynote #SpotlightWPO
  96. 96. A user who has to endure an 8-seconddownload delay spends only 1% oftheir total viewing time looking at the featuredpromotional space on a landing page.In contrast, a user who receivesinstantaneous page rendering spends20% of viewing time within thepromotional area (source: Nielsen) #SpotlightWPO
  97. 97. CBC’s fitness tips - Take aways #SpotlightWPO
  98. 98. Share your results Fitness Tip #SpotlightWPO
  99. 99. “It’s not about what you can add, it’s about whatyou can’t take away”(Christian Heilmann, The Vanilla Web Diet) Fitness Tip #SpotlightWPO
  100. 100. You can never measure and test enoughRun tests frequently Fitness Tip #SpotlightWPO
  101. 101. Show graphs and complexity to illustrateperformance success and also bad hitsA picture is worth a thousand words Fitness Tip #SpotlightWPO
  102. 102. Make it fun and painless, make it part of your dailyroutineAutomated Performance within your organization Fitness Tip #SpotlightWPO
  103. 103. Watch those 3rd party monstersEvaluate their impact, ask and push for server-side solutions Fitness Tip #SpotlightWPO
  104. 104. Serve only what the client needsDevice Detection, Server-side components and Responsive Web Design Fitness Tip #SpotlightWPO
  105. 105. Share your ideas and knowledgeWeb Performance Working Group Fitness Tip #SpotlightWPO
  106. 106. Create a culture of performanceBring everyone on board Fitness Tip #SpotlightWPO
  107. 107. Set a Performance Budget Fitness Tip #SpotlightWPO
  108. 108. Performance Budget• Be diligent and cautious about new features• Set a baseline / weight (e.g. BBC 10 seconds on 3G/GPS)• Evaluate a good conversion rate, cost vs. revenue• Visit HTTP Archive for comparison• Always evaluate what you can take away (content breakdown) #SpotlightWPO
  109. 109. Samples of Performance Budget• Set a budget for 3rd party scripts • “Should not weigh more than ...”• Evaluate the need for frameworks• Run quick performance tests on mocks #SpotlightWPO
  110. 110. Questions?#SpotlightWPO /blakecrosby /bbintoWe’re hiring! Thank you! #SpotlightWPO
  111. 111. Photo Credits•••••••••••••“Who killed my battery: Analyzing Mobile Browser Consumption”•••Desktop:•Mobile:•• #SpotlightWPO