The Canadian Public Broadcaster on a Diet: Slimming Down for a Whole Nation
•
1 gostou•3,382 visualizações
Recomendados
Recomendados
Mais conteúdo relacionado
Semelhante a The Canadian Public Broadcaster on a Diet: Slimming Down for a Whole Nation
Semelhante a The Canadian Public Broadcaster on a Diet: Slimming Down for a Whole Nation (20)
Último
Último (20)
The Canadian Public Broadcaster on a Diet: Slimming Down for a Whole Nation
- 1. The Canadian Public Broadcaster on a Diet Slimming down for a whole nation Barbara Bermes and Blake Crosby
- 2. #velocityconf The Canadian Public Broadcaster on a Diet Slimming down for a whole nation Velocity 2013
- 3. #velocityconf Barbara // bbinto Senior Architect, Mobile Web Digital Operations, CBC Blake // blakecrosby Team Lead, Media Production Support MO&T, CBC
- 5. #velocityconf Before we get started #velocityconf
- 10. #velocityconf Canadian Broadcasting Corporation National public radio and television broadcaster
- 11. #velocityconf Canadian Broadcasting Corporation National public radio and television broadcaster Kind of like the NPR
- 12. #velocityconf Canadian Broadcasting Corporation National public radio and television broadcaster Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding
- 13. #velocityconf Canadian Broadcasting Corporation National public radio and television broadcaster Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding Large internal and external digital ecosystem
- 14. #velocityconf Canadian Broadcasting Corporation National public radio and television broadcaster Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding Large internal and external digital ecosystem 3 mobile websites
- 15. #velocityconf Canadian Broadcasting Corporation National public radio and television broadcaster Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding Large internal and external digital ecosystem 3 mobile websites 11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
- 16. #velocityconf Canadian Broadcasting Corporation National public radio and television broadcaster Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding Desktop site page views ~5Mio/day Large internal and external digital ecosystem 3 mobile websites 11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
- 17. #velocityconf Canadian Broadcasting Corporation National public radio and television broadcaster Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding Desktop site page views ~5Mio/day Mobile Touch site page views ~ 500K/day Large internal and external digital ecosystem 3 mobile websites 11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
- 18. #velocityconf Canadian Broadcasting Corporation National public radio and television broadcaster Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding Desktop site page views ~5Mio/day Mobile Touch site page views ~ 500K/day News app page views ~1Mio/day Large internal and external digital ecosystem 3 mobile websites 11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
- 19. #velocityconf Mandate: The 1991 Broadcasting Acts states that... ...the programming provided by the Corporation should: vi. be made available throughout Canada by the most appropriate and efficient means and as resources become available for the purpose, and vii. reflect the multicultural and multiracial nature of Canada.”
- 20. #velocityconf Performance Why the need for speed?
- 22. #velocityconf “Ultimately performance is about respect” Brad Frost
- 23. #velocityconf Mobile & performance Why is performance for mobile so crucial?
- 24. #velocityconf It’s a Mobile (Browser) World 0 500 1000 1500 2000 2007 2008 2009 2010 2011 2012 2013 2014 2015 Desktop Internet Users Mobile Internet Users Source: Morgan Stanley Numberofglobalusersinmillions
- 27. #velocityconf Performance on Mobile Battery-driven Small CPU/GPU
- 28. #velocityconf Performance on Mobile Battery-driven Small CPU/GPU Network connectivity and latency
- 29. #velocityconf Performance on Mobile Battery-driven Small CPU/GPU Network connectivity and latency Data usage
- 30. #velocityconf You’re dealing with impatient users “74% of mobile web users expect a page to load in 5 seconds or less” Gomez
- 31. #velocityconf “Start with Metrics” Creating A Performance Culture Steve Souders
- 32. #velocityconf Anatomy of a CBC page: Tell a story
- 33. #velocityconf Anatomy of a CBC page: Tell a story
- 34. #velocityconf Anatomy of a CBC page: Tell a story
- 35. #velocityconf Anatomy of a CBC page: Tell a story
- 36. #velocityconf Anatomy of a CBC page: Tell a story
- 37. #velocityconf Quick weight assessment for desktop and mobile
- 38. #velocityconf A typical CBC story
- 39. #velocityconf Put them on the scale!
- 42. #velocityconf
- 46. #velocityconf
- 48. #velocityconf Result of assessment: Too heavy? Unhealthy, compared to what?
- 49. #velocityconf Steve Souders and httparchive.org to the rescue Repository of web performance information and to track web trends
- 50. #velocityconf Content breakdown Page Size (kB) 0 200 400 600 800 765 247 CBC HTTP Archive Mobile HTTP Requests 0 18 35 53 70 60 36 Data from June 2013
- 51. #velocityconf Content breakdown Page Size (kB) 0 800 1600 1462 1539 CBC HTTP Archive HTTP Requests 0 45 90 135 180 92 164 Data from June 2013
- 52. #velocityconf What are our options for successful weight measuring?
- 53. #velocityconf Synthetic Testing Real User Monitoring You run the test User runs the test Measures experience of exact one selected configuration Measures experience of “actual user” (peace of mind). You get to know your user better Establish baseline performance level Get concrete information about user’s latency, bandwidth, page load time Tools private/public WebPagetest (API), PageSpeed (API), phantomJS, commercial products etc. Tools boomerang.js, Google Analytics, commercial products etc.
- 54. #velocityconf Collecting measurements - Synthetic
- 55. #velocityconf Create your own performance dashboard
- 56. #velocityconf Setup your own HTTP Archive to track and monitor trends
- 57. #velocityconf • MySQL and PHP • WebPagetest API key (or private instance) • Check out latest source code and DB schema (even dump) • Run batches e.g. daily via cronjob Setup HTTP Archive
- 58. #velocityconf • ~ 44 CBC URLs (cbc.ca/news, cbc.ca/sports, cbc.ca/video, regular story page etc.) • Crawl and compute daily • Measure and monitor trends • Compare directly to Top Alexa HTTP archive • Run queries against database to find bottlenecks • Extend provided graphs Start collecting
- 59. #velocityconf Query the database directly
- 60. #velocityconf 40% of selected URLs use Google hosted jQuery version select count(distinct(pageid)) as count, (100* count(distinct(pageid))/[NumberOfUniqueRequests]) as percent from requests where url like "%ajax.googleapis.com/ajax/libs/jquery/%" and mimeType like "%script%" Hosted frameworks
- 61. #velocityconf 48% of selected URLs use Facebook plugins directly instead of Gigya select count(distinct(pageid)) as count, (100* count(distinct(pageid))/[NumberOfUniqueRequests]) as percent from requests where (url like "%://connect.facebook.net%" or url like "%://static.ak.fbcdn.net%") and mimeType like "%script%" 3rd party scripts
- 62. #velocityconf Visualize data with local HTTP Archive instance
- 64. #velocityconf
- 66. #velocityconf Collecting measurements - Real user monitoring (RUM)
- 67. #velocityconf boomerang.js: JavaScript library for RUM Measures the page load time, latency, bandwidth (and more) experienced by real users
- 68. #velocityconf t_done Perceived load time of the page bw User's measured bandwidth in bytes/s lat User's measured HTTP latency in ms Collecting RUM
- 69. #velocityconf +
- 71. #velocityconf • Add script to touch news landing page sends beacon.gif with params (e.g. t_done, bw, lat, UA etc.) • Define sampling rate • Parse Apache log files for beacon.gif, extract params and import into database • Very noisy data, need to be normalized + Captain RUM
- 73. #velocityconf Latency in ms for CBC touch news landing page 0 10 20 30 40 200 300 400 500 600 700 800 900 1000 2000 1%1%1%1% 2% 4% 7% 18% 37% 27% Data points: 1913
- 74. #velocityconf RUM page load time (PLT) in ms for CBC touch news landing page 0 7.5 15 22.5 30 500 700 1000 2000 3000 5000 7000 10000 15000 50000 2%2% 4% 5% 13% 21% 26% 13% 10% 3% Data points: 4864
- 75. #velocityconf Bandwidth distribution for CBC touch news landing page 1%7% 41% 24% 21% 6% <64Kbps 64-256Kbps 256-512Kbps 512Kbps-1.6Mbps 1.6-3Mbps 3-8Mbps Data points: 8994
- 76. #velocityconf With RUM data “[...] your real users are experiencing page load times that are twice as long as their corresponding synthetic measurements.” Steve Souders
- 77. #velocityconf Comparing synthetic test results with RUM
- 78. #velocityconf Tools Target Network Profile Data points CBC news touch landing page CBC news touch landing page 1) Public WebPagetest No Mobitest (DSL/Wifi) 2) PhantomJS with Slowy for shaping connection Captain Rum (boomerang.js, parsed beaon.gif params into DB) 1) 100 2) 100 After de-noising data: 4864 1) 3G simulation (“apples with apples”) 2) Slowy app with 3G simulation Real user, baby! Median and 95th percentile of page load time (PLT) Median and 95th percentile of page load time (PLT) Synthetic Testing Real User Monitoring Measurements
- 79. #velocityconf Page load time for touch news landing page (RUM and synthetic) RUM (t_done) PhantomJS (3G) WebPagetest (3G) 0 2750 5500 8250 11000 5005 ms 3726.5 ms 1926.5 ms 6094 ms 5246 ms 10088 ms 95th percentile Median RUMSynthetic
- 80. #velocityconf • Synthetic • Lots of variances possible • Challenges to properly simulate for mobile • RUM • Users benefit from cache • Android wrapper app faster than Android browser Some observations
- 82. #velocityconf That’s a lot of cookies Yikes! Oh No! Temptations
- 84. #velocityconf Cookies on a diet
- 85. #velocityconf • Use the path option to limit cookie scope Cookies on a diet
- 86. #velocityconf • Use the path option to limit cookie scope • Store your static assets at a different domain (images.cbc.ca) Cookies on a diet
- 87. #velocityconf • Use the path option to limit cookie scope • Store your static assets at a different domain (images.cbc.ca) • Don’t use cookies for fun Cookies on a diet
- 88. #velocityconf • Use the path option to limit cookie scope • Store your static assets at a different domain (images.cbc.ca) • Don’t use cookies for fun • Ask: Do you really need them? Cookies on a diet
- 92. #velocityconf • Ads, tracking, social buttons etc. Monsters?
- 93. #velocityconf • Ads, tracking, social buttons etc. • They are unpredictable, scary, disruptive, sneaky and Monsters?
- 94. #velocityconf • Ads, tracking, social buttons etc. • They are unpredictable, scary, disruptive, sneaky and • Could slow down your site Monsters?
- 95. #velocityconf • Ads, tracking, social buttons etc. • They are unpredictable, scary, disruptive, sneaky and • Could slow down your site • Could bring down your site (SPOF - single point of failure) Monsters?
- 96. #velocityconf • Ads, tracking, social buttons etc. • They are unpredictable, scary, disruptive, sneaky and • Could slow down your site • Could bring down your site (SPOF - single point of failure) • Could do things you don’t want them to do Monsters?
- 97. #velocityconf • Ads, tracking, social buttons etc. • They are unpredictable, scary, disruptive, sneaky and • Could slow down your site • Could bring down your site (SPOF - single point of failure) • Could do things you don’t want them to do • Will add weight and complexity to your page Monsters?
- 98. #velocityconf What would a life without ads feel like....????
- 99. #velocityconf The wonderful life without ads
- 100. #velocityconf CBC Touch Mobile without ads
- 101. #velocityconf Using no (client-side) ads code reduced our page load time by ~40% 40%
- 102. #velocityconf Using server-side ads code over client-side ads code saved us ~20% of page load time 20%
- 104. #velocityconf • Last mile acceleration (use GZip compression) • Take advantage of a CDN, if possible • Only use cookies where necessary • Caches are your friend Server and back-end
- 106. #velocityconf • 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 Server-side optimization & device detection
- 107. #velocityconf Responsive web design and web performance
- 108. #velocityconf “72% of the sites using responsive design don't optimize for mobile” (86% in 2012) Guy Podjarny 72%
- 109. #velocityconf Responsive Web Design with Server Side Components RESS Heavy resource lifting should be done on the server
- 110. #velocityconf Exercises that worked for CBC
- 111. #velocityconf • Very important to support If-Modified- Since requests • Allows caches to properly cache content. Don’t cache bust! The power of If- Modified-Since
- 112. #velocityconf The proof 28kb 12kb 0 7.5 15 22.5 30 10/29/2011 11/01/2011 11/04/2011 11/07/2011 11/10/2011 11/13/2011 11/16/2011 kBytesperHit
- 114. #velocityconf • Heavy 404 Page? • Browser will download the 404 page even if it’s for a broken image or other asset Keep those 404s in check
- 115. #velocityconf Definitely not super thin
- 118. #velocityconf The difference .... 5.2kB 1.1kB Before After 80%
- 120. #velocityconf Global Shell • Shared by all • Visual representation
- 121. #velocityconf Global Shell • Shared by all • Visual representation
- 122. #velocityconf Global Shell • Shared by all • Visual representation • Non-visual representation • SSI variables in header to serve ads and tracking • Global scripts, 3rd party scripts and stylesheets
- 123. #velocityconf Improvement is easier than you think
- 124. #velocityconf • 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 How did we improve
- 125. #velocityconf Why optimizing manually if you can automate it? Included performance optimization into your deployment and release process
- 126. #velocityconf • Maven, Ant Tools and Plugins • Closure Compiler (Google) • Minify-maven-plugin • HTMLCompressor • Confess • cssembed.jar or compass for data:uri Automated & built-in tools
- 127. #velocityconf • If you can’t / don’t want to use Maven / Ant • You should use taskrunners and scaffolding: Grunt, Yeoman • Continuous integration (e.g SPOFcheck, yslow) Automated & built-in tools
- 128. #velocityconf What were the results?
- 129. #velocityconf Global Shell: Before and after
- 130. #velocityconf Global Shell: Before and after 0 6 12 18 24 HTTP Requests 18 24 Before After 25% 68 69.4 70.8 72.2 73.6 75 Page Weight (kB) 69.8 71.9 3% 0 0.25 0.5 0.75 1 Start to render (s) 0.691 0.942 26% 0 0.325 0.65 0.975 1.3 Visually complete (s) 0.9 1.3 30% Improvements
- 131. #velocityconf Slimmed down! But the danger with all diets ....
- 132. #velocityconf Yo-yo effect Don’t gain the weight back
- 133. #velocityconf If you don’t monitor your weight, you can also make it worse...
- 135. #velocityconf 3rd Party monsters interrupt 0 2.5 5 7.5 10 7/30/12 8/10/12 8/21/12 9/1/12 9/12/12 9/23/12 10/4/12 10/15/12 10/26/12 ArithmeticMeanins Source: Keynote Daily Reports
- 136. #velocityconf 3rd Party monsters interrupt 0 2.5 5 7.5 10 7/30/12 8/10/12 8/21/12 9/1/12 9/12/12 9/23/12 10/4/12 10/15/12 10/26/12 ArithmeticMeanins Source: Keynote Daily Reports
- 137. #velocityconf 3rd Party monsters interrupt 0 2.5 5 7.5 10 7/30/12 8/10/12 8/21/12 9/1/12 9/12/12 9/23/12 10/4/12 10/15/12 10/26/12 ArithmeticMeanins Global Shell Source: Keynote Daily Reports
- 138. #velocityconf 3rd Party monsters interrupt 0 2.5 5 7.5 10 7/30/12 8/10/12 8/21/12 9/1/12 9/12/12 9/23/12 10/4/12 10/15/12 10/26/12 ArithmeticMeanins Global Shell Source: Keynote Daily Reports
- 139. #velocityconf 3rd Party monsters interrupt 0 2.5 5 7.5 10 7/30/12 8/10/12 8/21/12 9/1/12 9/12/12 9/23/12 10/4/12 10/15/12 10/26/12 ArithmeticMeanins Global Shell ISP Issues Source: Keynote Daily Reports
- 140. #velocityconf 3rd Party monsters interrupt 0 2.5 5 7.5 10 7/30/12 8/10/12 8/21/12 9/1/12 9/12/12 9/23/12 10/4/12 10/15/12 10/26/12 ArithmeticMeanins Global Shell ISP Issues Source: Keynote Daily Reports
- 141. #velocityconf 3rd Party monsters interrupt 0 2.5 5 7.5 10 7/30/12 8/10/12 8/21/12 9/1/12 9/12/12 9/23/12 10/4/12 10/15/12 10/26/12 ArithmeticMeanins Global Shell ISP Issues Client-side Ads Source: Keynote Daily Reports
- 142. #velocityconf 3rd Party monsters interrupt 0 2.5 5 7.5 10 7/30/12 8/10/12 8/21/12 9/1/12 9/12/12 9/23/12 10/4/12 10/15/12 10/26/12 ArithmeticMeanins Global Shell ISP Issues Client-side Ads Source: Keynote Daily Reports
- 143. #velocityconf 3rd Party monsters interrupt 0 2.5 5 7.5 10 7/30/12 8/10/12 8/21/12 9/1/12 9/12/12 9/23/12 10/4/12 10/15/12 10/26/12 ArithmeticMeanins Global Shell ISP Issues Client-side Ads Source: Keynote Daily Reports
- 144. #velocityconf 3rd Party monsters interrupt 0 2.5 5 7.5 10 7/30/12 8/10/12 8/21/12 9/1/12 9/12/12 9/23/12 10/4/12 10/15/12 10/26/12 ArithmeticMeanins Global Shell ISP Issues Client-side Ads Ads turned off Source: Keynote Daily Reports
- 145. #velocityconf 3rd Party monsters interrupt 0 2.5 5 7.5 10 7/30/12 8/10/12 8/21/12 9/1/12 9/12/12 9/23/12 10/4/12 10/15/12 10/26/12 ArithmeticMeanins Global Shell ISP Issues Client-side Ads Ads turned off Source: Keynote Daily Reports
- 146. #velocityconf 3rd Party monsters interrupt 0 2.5 5 7.5 10 7/30/12 8/10/12 8/21/12 9/1/12 9/12/12 9/23/12 10/4/12 10/15/12 10/26/12 ArithmeticMeanins Global Shell ISP Issues Client-side Ads Ads turned off Server-side Ads Source: Keynote Daily Reports
- 147. #velocityconf A user who has to endure an 8-second download delay spends only 1% of their total viewing time looking at the featured promotional space on a landing page. In contrast, a user who receives instantaneous page rendering spends 20% of viewing time within the promotional area (source: Nielsen)
- 148. #velocityconf CBC’s fitness tips - Take aways
- 149. #velocityconf Create a culture of performance Bring everyone on board Fitness Tip
- 150. #velocityconf Start today, collect measurements Fitness Tip Run tests frequently, use free or commercial tools to help
- 151. #velocityconf Visualize data and complexity to illustrate performance success and bad hits (show before and after) Fitness Tip A picture is worth a thousand words
- 153. #velocityconf Watch those 3rd party monsters Evaluate their impact, ask and push for server-side solutions or use non-blocking, asynchronous solutions Fitness Tip
- 154. #velocityconf Serve only what the client needs Device detection, server-side components and responsive web design Fitness Tip
- 155. #velocityconf Use RUM and synthetic testing Fitness Tip Get to know your users’ performance and your features’ performance
- 156. #velocityconf Monitor your fitness level, setup reports Fitness Tip
- 157. #velocityconf Share your ideas and knowledge CBC’s Web Performance Working Group Fitness Tip
- 158. #velocityconf Set a performance budget Fitness Tip
- 159. #velocityconf Run quick performance tests on mocks and prototypes Fitness Tip
- 160. #velocityconf There is always room for improvement Fitness Tip Keep the momentum
- 161. #velocityconf Questions? /blakecrosby /bbinto Thank you! Office Hours Today 2:45pm Exhibit Hall (Table 3)
- 162. #velocityconf Photo Credits •http://beautygirlsmom.com/wp-content/uploads/2011/01/diet-funny-sign-spelled-out-vegetable.jpg •http://www.cyklblog.com/wp-content/uploads/2011/06/so-many-push-ups.jpg •http://photobucket.com/images/yo+yo+puppy+dog+yoyo+animated+gif+funny/ •http://www.wallpaper-welt.de/gros/film/monster-ag/Monster%20AG.jpg •http://www.passiveaggressivenotes.com/2007/07/29/this-is-why-your-server-is-cranky/ •http://4.bp.blogspot.com/-NnFPM5Fgbao/TaIkVwyusEI/AAAAAAAAMPw/fdDbbvgJRb8/s1600/054.jpg •http://thefulltimedomesticgoddess.com/wp-content/uploads/2011/09/girls-holding-hands-bw.jpg •http://cartoonswalls.com/walls/monsters_university_desktop_wallpaper-wide.jpg •http://41inmylife.files.wordpress.com/2011/06/weight_scale.jpg •http://blogs.scientificamerican.com/the-curious-wavefunction/files/2012/08/boeing_777_cockpit.jpg •http://www.liquorlockerla.com/wp-content/uploads/Captain-Morgan-Spiced-Rum-1.75.jpghttp://4.bp.blogspot.com/-Ylnf651-NMg/UW_-ak4lvwI/AAAAAAAAAZs/7UeqyWrrUys/s1600/Boomerang.png •http://2.bp.blogspot.com/-ZrxT4-q5Hrw/UH1kIPawjqI/AAAAAAAAJeg/7f8TCiH2Wao/s1600/you-can-do-it.jpg •http://upload.wikimedia.org/wikipedia/commons/7/77/Celine_Dion_Concert_Singing_'Taking_Chances'_2008.jpg •http://static.wix.com/media/130ef9_bab26cc8c87a64719072275bba963573.jpg Sources •http://www.slideshare.net/stoyan/psychology-of-performance •http://www.stevesouders.com/blog/2012/11/14/comparing-rum-synthetic-page-load-times/ •http://bradfrostweb.com/blog/post/performance-as-design/ •“Who killed my battery: Analyzing Mobile Browser Consumption” http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf •http://www.slideshare.net/guypod/performance-implications-of-mobile-design •http://www.cbc.ca/m/touch/sports/story/2013/03/05/sp-paralympics-oscar-pistorius.html •Desktop: http://www.webpagetest.org/result/130315_TQ_WT1/ •Mobile:http://www.webpagetest.org/result/130315_1X_X18/ •http://coding.smashingmagazine.com/2012/11/13/the-vanilla-web-diet/ •http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf