The Canadian PublicBroadcaster on a DietSlimming down for a whole nationBarbara Bermes and Blake Crosby
#velocityconfThe Canadian Public Broadcaster on a DietSlimming down for a whole nationVelocity 2013
#velocityconfBarbara // bbintoSenior Architect, Mobile WebDigital Operations, CBCBlake // blakecrosbyTeam Lead, Media Prod...
#velocityconfToday’s workout
#velocityconfBefore we get started#velocityconf
#velocityconfCanada?Who? What?#velocityconf
#velocityconf
#velocityconf
#velocityconfCanadian Broadcasting Corporation
#velocityconfCanadian Broadcasting CorporationNational public radio and television broadcaster
#velocityconfCanadian Broadcasting CorporationNational public radio and television broadcasterKind of like the NPR
#velocityconfCanadian Broadcasting CorporationNational public radio and television broadcasterKind of like the NPR but not...
#velocityconfCanadian Broadcasting CorporationNational public radio and television broadcasterKind of like the NPR but not...
#velocityconfCanadian Broadcasting CorporationNational public radio and television broadcasterKind of like the NPR but not...
#velocityconfCanadian Broadcasting CorporationNational public radio and television broadcasterKind of like the NPR but not...
#velocityconfCanadian Broadcasting CorporationNational public radio and television broadcasterKind of like the NPR but not...
#velocityconfCanadian Broadcasting CorporationNational public radio and television broadcasterKind of like the NPR but not...
#velocityconfCanadian Broadcasting CorporationNational public radio and television broadcasterKind of like the NPR but not...
#velocityconfMandate: The 1991 Broadcasting Acts states that......the programming provided by the Corporation should:vi. b...
#velocityconfPerformanceWhy the need for speed?
#velocityconf#velocityconf
#velocityconf“Ultimately performance is about respect”Brad Frost
#velocityconfMobile & performanceWhy is performance for mobile so crucial?
#velocityconfIt’s a Mobile (Browser) World05001000150020002007 2008 2009 2010 2011 2012 2013 2014 2015Desktop Internet Use...
#velocityconfPerformance on Mobile
#velocityconfPerformance on MobileBattery-driven
#velocityconfPerformance on MobileBattery-driven Small CPU/GPU
#velocityconfPerformance on MobileBattery-driven Small CPU/GPUNetwork connectivityand latency
#velocityconfPerformance on MobileBattery-driven Small CPU/GPUNetwork connectivityand latencyData usage
#velocityconfYou’re dealing with impatient users“74% of mobile web users expect a pageto load in 5 seconds or less”Gomez
#velocityconf“Start with Metrics”Creating A Performance CultureSteve Souders
#velocityconfAnatomy of a CBC page: Tell a story
#velocityconfAnatomy of a CBC page: Tell a story
#velocityconfAnatomy of a CBC page: Tell a story
#velocityconfAnatomy of a CBC page: Tell a story
#velocityconfAnatomy of a CBC page: Tell a story
#velocityconfQuick weight assessment for desktop and mobile
#velocityconfA typical CBC story
#velocityconfPut them on the scale!
#velocityconfwww.cbc.cab.scorecardresearch.commetrics.cbc.cagscounters.us1.gigya.comcdn.gigya.compagead2.googlesyndication...
#velocityconfwww.cbc.cab.scorecardresearch.commetrics.cbc.cagscounters.us1.gigya.comcdn.gigya.compagead2.googlesyndication...
#velocityconf
#velocityconfFully loaded247kBHTTP requests36
#velocityconfwww.cbc.capagead2.googlesyndication.comcdn.gigya.comthumbnails.cbc.caplusone.google.comsitelife.cbc.cagooglea...
#velocityconfwww.cbc.capagead2.googlesyndication.comcdn.gigya.comthumbnails.cbc.caplusone.google.comsitelife.cbc.cagooglea...
#velocityconf
#velocityconfFully loaded1,539kBHTTP requests164
#velocityconfResult of assessment: Too heavy? Unhealthy, compared to what?
#velocityconfSteve Souders and httparchive.org to the rescueRepository of web performance information and to track web tre...
#velocityconfContent breakdownPage Size (kB)0 200 400 600 800765247CBC HTTP Archive MobileHTTP Requests0 18 35 53 706036Da...
#velocityconfContent breakdownPage Size (kB)0 800 160014621539CBC HTTP ArchiveHTTP Requests0 45 90 135 18092164Data from J...
#velocityconfWhat are our options for successful weight measuring?
#velocityconfSynthetic Testing Real User MonitoringYou run the test User runs the testMeasures experience of exact one sel...
#velocityconfCollecting measurements - Synthetic
#velocityconfCreate your own performance dashboard
#velocityconfSetup your own HTTP Archive to track and monitor trends
#velocityconf• MySQL and PHP• WebPagetest API key (or private instance)• Check out latest source code and DB schema(even d...
#velocityconf• ~ 44 CBC URLs(cbc.ca/news, cbc.ca/sports, cbc.ca/video, regular story page etc.)• Crawl and compute daily• ...
#velocityconfQuery the database directly
#velocityconf40% of selected URLs use Google hosted jQuery versionselect count(distinct(pageid)) as count,(100* count(dist...
#velocityconf48% of selected URLs use Facebook plugins directly instead of Gigyaselect count(distinct(pageid)) as count,(1...
#velocityconfVisualize data with local HTTP Archive instance
#velocityconfOut-of-the box setup
#velocityconf
#velocityconfCustom pie charts
#velocityconfCollecting measurements - Real user monitoring (RUM)
#velocityconfboomerang.js: JavaScript library for RUMMeasures the page load time, latency, bandwidth (and more) experience...
#velocityconft_done Perceived load time of the pagebw Users measured bandwidth in bytes/slat Users measured HTTP latency i...
#velocityconf+
#velocityconf+Captain RUM
#velocityconf• Add script to touch news landing page sends beacon.gifwith params (e.g. t_done, bw, lat, UA etc.)• Define sa...
#velocityconfCaptain RUM results
#velocityconfLatency in ms for CBC touch news landing page010203040200 300 400 500 600 700 800 900 1000 20001%1%1%1%2%4%7%...
#velocityconfRUM page load time (PLT) in ms for CBC touch news landing page07.51522.530500 700 1000 2000 3000 5000 7000 10...
#velocityconfBandwidth distribution for CBC touch news landing page1%7%41%24%21%6%<64Kbps64-256Kbps256-512Kbps512Kbps-1.6M...
#velocityconfWith RUM data “[...] your real users are experiencing page load timesthat are twice as long as their correspo...
#velocityconfComparing synthetic test results with RUM
#velocityconfToolsTargetNetwork ProfileData pointsCBC news touch landing page CBC news touch landing page1) Public WebPaget...
#velocityconfPage load time for touch news landing page (RUM and synthetic)RUM (t_done)PhantomJS (3G)WebPagetest (3G)0 275...
#velocityconf• Synthetic• Lots of variances possible• Challenges to properly simulate for mobile• RUM• Users benefit from c...
#velocityconfAvoid dangerous temptations
#velocityconfThat’s a lot of cookiesYikes! Oh No!Temptations
#velocityconfTipping the scaleTemptations
#velocityconfCookies on a diet
#velocityconf• Use the path option to limit cookie scopeCookies on a diet
#velocityconf• Use the path option to limit cookie scope• Store your static assets at a different domain(images.cbc.ca)Coo...
#velocityconf• Use the path option to limit cookie scope• Store your static assets at a different domain(images.cbc.ca)• D...
#velocityconf• Use the path option to limit cookie scope• Store your static assets at a different domain(images.cbc.ca)• D...
#velocityconfOther temptations (front-end)
#velocityconf3rd party monsters
#velocityconfMonsters?
#velocityconf• Ads, tracking, social buttons etc.Monsters?
#velocityconf• Ads, tracking, social buttons etc.• They are unpredictable, scary, disruptive, sneaky andMonsters?
#velocityconf• Ads, tracking, social buttons etc.• They are unpredictable, scary, disruptive, sneaky and• Could slow down ...
#velocityconf• Ads, tracking, social buttons etc.• They are unpredictable, scary, disruptive, sneaky and• Could slow down ...
#velocityconf• Ads, tracking, social buttons etc.• They are unpredictable, scary, disruptive, sneaky and• Could slow down ...
#velocityconf• Ads, tracking, social buttons etc.• They are unpredictable, scary, disruptive, sneaky and• Could slow down ...
#velocityconfWhat would a life without ads feel like....????
#velocityconfThe wonderful life without ads
#velocityconfCBC Touch Mobile without ads
#velocityconfUsing no (client-side) ads code reduced our page load time by ~40%40%
#velocityconfUsing server-side ads code over client-side ads code saved us~20% of page load time20%
#velocityconfGet inshape
#velocityconf• Last mile acceleration (use GZip compression)• Take advantage of a CDN, if possible• Only use cookies where...
#velocityconfDedicated mobile sites
#velocityconf• Decide on the server what to serve• Different websites (Text, Rich, Touch) foroptimized experience• Optimiz...
#velocityconfResponsive web design and web performance
#velocityconf“72% of the sites using responsive design dont optimize formobile” (86% in 2012)Guy Podjarny72%
#velocityconfResponsive Web Design with Server Side ComponentsRESSHeavy resource lifting should be done on the server
#velocityconfExercises that worked for CBC
#velocityconf• Very important to support If-Modified-Since requests• Allows caches to properly cachecontent. Don’t cache bu...
#velocityconfThe proof28kb12kb07.51522.53010/29/2011 11/01/2011 11/04/2011 11/07/2011 11/10/2011 11/13/2011 11/16/2011kByt...
#velocityconfBefore and after
#velocityconf• Heavy 404 Page?• Browser will download the 404 page even ifit’s for a broken image or other assetKeep those...
#velocityconfDefinitely not super thin
#velocityconf#velocityconf
#velocityconf#velocityconf
#velocityconfThe difference ....5.2kB 1.1kBBefore After80%
#velocityconfGlobal Shell
#velocityconfGlobal Shell• Shared by all• Visual representation
#velocityconfGlobal Shell• Shared by all• Visual representation
#velocityconfGlobal Shell• Shared by all• Visual representation• Non-visual representation• SSI variables in header to ser...
#velocityconfImprovement is easier than you think
#velocityconf• Re-factored code: Removed old/un-used code• Moved some scripts to the bottom of page• Minified and concatena...
#velocityconfWhy optimizing manually if you can automate it?Included performance optimization into your deployment and rel...
#velocityconf• Maven, Ant Tools and Plugins• Closure Compiler (Google)• Minify-maven-plugin• HTMLCompressor• Confess• csse...
#velocityconf• If you can’t / don’t want to use Maven / Ant• You should use taskrunners and scaffolding:Grunt, Yeoman• Con...
#velocityconfWhat were the results?
#velocityconfGlobal Shell: Before and after
#velocityconfGlobal Shell: Before and after06121824HTTP Requests1824Before After25%6869.470.872.273.675Page Weight (kB)69....
#velocityconfSlimmed down! But the danger with all diets ....
#velocityconfYo-yo effectDon’t gain the weight back
#velocityconfIf you don’t monitor your weight, you can also make it worse...
#velocityconf#velocityconf
#velocityconf3rd Party monsters interrupt02.557.5107/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/1...
#velocityconf3rd Party monsters interrupt02.557.5107/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/1...
#velocityconf3rd Party monsters interrupt02.557.5107/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/1...
#velocityconf3rd Party monsters interrupt02.557.5107/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/1...
#velocityconf3rd Party monsters interrupt02.557.5107/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/1...
#velocityconf3rd Party monsters interrupt02.557.5107/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/1...
#velocityconf3rd Party monsters interrupt02.557.5107/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/1...
#velocityconf3rd Party monsters interrupt02.557.5107/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/1...
#velocityconf3rd Party monsters interrupt02.557.5107/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/1...
#velocityconf3rd Party monsters interrupt02.557.5107/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/1...
#velocityconf3rd Party monsters interrupt02.557.5107/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/1...
#velocityconf3rd Party monsters interrupt02.557.5107/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/1...
#velocityconfA user who has to endure an 8-second downloaddelay spends only 1% of their total viewing time looking atthe f...
#velocityconfCBC’s fitness tips - Take aways
#velocityconfCreate a culture of performanceBring everyone on boardFitness Tip
#velocityconfStart today, collect measurementsFitness TipRun tests frequently, use free or commercial tools to help
#velocityconfVisualize data and complexity to illustrate performance success andbad hits (show before and after)Fitness Ti...
#velocityconfAutomate performance optimizationFitness Tip
#velocityconfWatch those 3rd party monstersEvaluate their impact, ask and push for server-side solutions or use non-blocki...
#velocityconfServe only what the client needsDevice detection, server-side components and responsive web designFitness Tip
#velocityconfUse RUM and synthetic testingFitness TipGet to know your users’ performance and your features’ performance
#velocityconfMonitor your fitness level, setup reportsFitness Tip
#velocityconfShare your ideas and knowledgeCBC’s Web Performance Working GroupFitness Tip
#velocityconfSet a performance budgetFitness Tip
#velocityconfRun quick performance tests on mocks and prototypesFitness Tip
#velocityconfThere is always room for improvementFitness TipKeep the momentum
#velocityconfQuestions?/blakecrosby/bbintoThank you!Office HoursToday 2:45pmExhibit Hall (Table 3)
#velocityconfPhoto Credits•http://beautygirlsmom.com/wp-content/uploads/2011/01/diet-funny-sign-spelled-out-vegetable.jpg•...
Upcoming SlideShare
Loading in …5
×

The Canadian Public Broadcaster on a Diet: Slimming down for a whole nation

5,138 views

Published on

Talk at Velocity 2013, Santa Clara. More info here http://velocityconf.com/velocity2013/public/schedule/detail/27973

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,138
On SlideShare
0
From Embeds
0
Number of Embeds
470
Actions
Shares
0
Downloads
57
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

The Canadian Public Broadcaster on a Diet: Slimming down for a whole nation

  1. 1. The Canadian PublicBroadcaster on a DietSlimming down for a whole nationBarbara Bermes and Blake Crosby
  2. 2. #velocityconfThe Canadian Public Broadcaster on a DietSlimming down for a whole nationVelocity 2013
  3. 3. #velocityconfBarbara // bbintoSenior Architect, Mobile WebDigital Operations, CBCBlake // blakecrosbyTeam Lead, Media Production SupportMO&T, CBC
  4. 4. #velocityconfToday’s workout
  5. 5. #velocityconfBefore we get started#velocityconf
  6. 6. #velocityconfCanada?Who? What?#velocityconf
  7. 7. #velocityconf
  8. 8. #velocityconf
  9. 9. #velocityconfCanadian Broadcasting Corporation
  10. 10. #velocityconfCanadian Broadcasting CorporationNational public radio and television broadcaster
  11. 11. #velocityconfCanadian Broadcasting CorporationNational public radio and television broadcasterKind of like the NPR
  12. 12. #velocityconfCanadian Broadcasting CorporationNational public radio and television broadcasterKind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding
  13. 13. #velocityconfCanadian Broadcasting CorporationNational public radio and television broadcasterKind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal fundingLarge internal and external digital ecosystem
  14. 14. #velocityconfCanadian Broadcasting CorporationNational public radio and television broadcasterKind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal fundingLarge internal and external digital ecosystem3 mobile websites
  15. 15. #velocityconfCanadian Broadcasting CorporationNational public radio and television broadcasterKind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal fundingLarge internal and external digital ecosystem3 mobile websites11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
  16. 16. #velocityconfCanadian Broadcasting CorporationNational public radio and television broadcasterKind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal fundingDesktop site page views ~5Mio/dayLarge internal and external digital ecosystem3 mobile websites11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
  17. 17. #velocityconfCanadian Broadcasting CorporationNational public radio and television broadcasterKind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal fundingDesktop site page views ~5Mio/dayMobile Touch site page views ~ 500K/dayLarge internal and external digital ecosystem3 mobile websites11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
  18. 18. #velocityconfCanadian Broadcasting CorporationNational public radio and television broadcasterKind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal fundingDesktop site page views ~5Mio/dayMobile Touch site page views ~ 500K/dayNews app page views ~1Mio/dayLarge internal and external digital ecosystem3 mobile websites11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
  19. 19. #velocityconfMandate: 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 resourcesbecome available for the purpose, andvii. reflect the multicultural and multiracial nature of Canada.”
  20. 20. #velocityconfPerformanceWhy the need for speed?
  21. 21. #velocityconf#velocityconf
  22. 22. #velocityconf“Ultimately performance is about respect”Brad Frost
  23. 23. #velocityconfMobile & performanceWhy is performance for mobile so crucial?
  24. 24. #velocityconfIt’s a Mobile (Browser) World05001000150020002007 2008 2009 2010 2011 2012 2013 2014 2015Desktop Internet UsersMobile Internet UsersSource: Morgan StanleyNumberofglobalusersinmillions
  25. 25. #velocityconfPerformance on Mobile
  26. 26. #velocityconfPerformance on MobileBattery-driven
  27. 27. #velocityconfPerformance on MobileBattery-driven Small CPU/GPU
  28. 28. #velocityconfPerformance on MobileBattery-driven Small CPU/GPUNetwork connectivityand latency
  29. 29. #velocityconfPerformance on MobileBattery-driven Small CPU/GPUNetwork connectivityand latencyData usage
  30. 30. #velocityconfYou’re dealing with impatient users“74% of mobile web users expect a pageto load in 5 seconds or less”Gomez
  31. 31. #velocityconf“Start with Metrics”Creating A Performance CultureSteve Souders
  32. 32. #velocityconfAnatomy of a CBC page: Tell a story
  33. 33. #velocityconfAnatomy of a CBC page: Tell a story
  34. 34. #velocityconfAnatomy of a CBC page: Tell a story
  35. 35. #velocityconfAnatomy of a CBC page: Tell a story
  36. 36. #velocityconfAnatomy of a CBC page: Tell a story
  37. 37. #velocityconfQuick weight assessment for desktop and mobile
  38. 38. #velocityconfA typical CBC story
  39. 39. #velocityconfPut them on the scale!
  40. 40. #velocityconfwww.cbc.cab.scorecardresearch.commetrics.cbc.cagscounters.us1.gigya.comcdn.gigya.compagead2.googlesyndication.com3%3%3%6%8%78%Domain breakdown: HTTP requests
  41. 41. #velocityconfwww.cbc.cab.scorecardresearch.commetrics.cbc.cagscounters.us1.gigya.comcdn.gigya.compagead2.googlesyndication.com4%11%0%1%1%83%Domain breakdown: Bytes
  42. 42. #velocityconf
  43. 43. #velocityconfFully loaded247kBHTTP requests36
  44. 44. #velocityconfwww.cbc.capagead2.googlesyndication.comcdn.gigya.comthumbnails.cbc.caplusone.google.comsitelife.cbc.cagoogleads.g.doubleclick.netgscounters.us1.gigya.comb.scorecardresearch.comib.adnxs.comcdn.clicktale.netad.doubleclick.netcm.g.doubleclick.netmetrics.cbc.cacm.eyedemand.comapis.google.comfeed.theplatform.comvoken.eyereturn.comd.adgear.comcdn.adgear.comfast.fonts.comssl.gstatic.comwww.gstatic.comwww.google.coma.visualrevenue.comt.visualrevenue.comgraph.facebook.comresources.eyereturn.comeyereact.eyereturn.comadxhm.d.chango.comcdn.api.twitter.coms.clicktale.net 1%1%1%1%1%1%1%1%1%1%1%1%1%1%1%1%1%1%1%2%2%2%2%2%2%2%4%4%4%5%5%48%Domain breakdown: HTTP requests
  45. 45. #velocityconfwww.cbc.capagead2.googlesyndication.comcdn.gigya.comthumbnails.cbc.caplusone.google.comsitelife.cbc.cagoogleads.g.doubleclick.netgscounters.us1.gigya.comb.scorecardresearch.comib.adnxs.comcdn.clicktale.netad.doubleclick.netcm.g.doubleclick.netmetrics.cbc.cacm.eyedemand.comapis.google.comfeed.theplatform.comvoken.eyereturn.comd.adgear.comcdn.adgear.comfast.fonts.comssl.gstatic.comwww.gstatic.comwww.google.coma.visualrevenue.comt.visualrevenue.comgraph.facebook.comresources.eyereturn.comeyereact.eyereturn.comadxhm.d.chango.comcdn.api.twitter.coms.clicktale.net 0%0%0%0%1%0%0%0%0%0%1%0%4%1%1%0%2%0%0%0%0%1%0%0%0%1%2%9%28% 4%5%36%Domain breakdown: Bytes
  46. 46. #velocityconf
  47. 47. #velocityconfFully loaded1,539kBHTTP requests164
  48. 48. #velocityconfResult of assessment: Too heavy? Unhealthy, compared to what?
  49. 49. #velocityconfSteve Souders and httparchive.org to the rescueRepository of web performance information and to track web trends
  50. 50. #velocityconfContent breakdownPage Size (kB)0 200 400 600 800765247CBC HTTP Archive MobileHTTP Requests0 18 35 53 706036Data from June 2013
  51. 51. #velocityconfContent breakdownPage Size (kB)0 800 160014621539CBC HTTP ArchiveHTTP Requests0 45 90 135 18092164Data from June 2013
  52. 52. #velocityconfWhat are our options for successful weight measuring?
  53. 53. #velocityconfSynthetic Testing Real User MonitoringYou run the test User runs the testMeasures experience of exact one selectedconfigurationMeasures experience of “actual user”(peace of mind). You get to know your user betterEstablish baseline performance levelGet concrete information about user’s latency,bandwidth, page load timeToolsprivate/public WebPagetest (API), PageSpeed (API),phantomJS, commercial products etc.Toolsboomerang.js, Google Analytics, commercialproducts etc.
  54. 54. #velocityconfCollecting measurements - Synthetic
  55. 55. #velocityconfCreate your own performance dashboard
  56. 56. #velocityconfSetup your own HTTP Archive to track and monitor trends
  57. 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 cronjobSetup HTTP Archive
  58. 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 graphsStart collecting
  59. 59. #velocityconfQuery the database directly
  60. 60. #velocityconf40% of selected URLs use Google hosted jQuery versionselect count(distinct(pageid)) as count,(100* count(distinct(pageid))/[NumberOfUniqueRequests]) as percentfrom requests whereurl like "%ajax.googleapis.com/ajax/libs/jquery/%"and mimeType like "%script%"Hosted frameworks
  61. 61. #velocityconf48% of selected URLs use Facebook plugins directly instead of Gigyaselect count(distinct(pageid)) as count,(100* count(distinct(pageid))/[NumberOfUniqueRequests]) as percentfrom requests where(url like "%://connect.facebook.net%"or url like "%://static.ak.fbcdn.net%")and mimeType like "%script%"3rd party scripts
  62. 62. #velocityconfVisualize data with local HTTP Archive instance
  63. 63. #velocityconfOut-of-the box setup
  64. 64. #velocityconf
  65. 65. #velocityconfCustom pie charts
  66. 66. #velocityconfCollecting measurements - Real user monitoring (RUM)
  67. 67. #velocityconfboomerang.js: JavaScript library for RUMMeasures the page load time, latency, bandwidth (and more) experienced by real users
  68. 68. #velocityconft_done Perceived load time of the pagebw Users measured bandwidth in bytes/slat Users measured HTTP latency in msCollecting RUM
  69. 69. #velocityconf+
  70. 70. #velocityconf+Captain RUM
  71. 71. #velocityconf• Add script to touch news landing page sends beacon.gifwith params (e.g. t_done, bw, lat, UA etc.)• Define sampling rate• Parse Apache log files for beacon.gif, extract paramsand import into database• Very noisy data, need to be normalized+Captain RUM
  72. 72. #velocityconfCaptain RUM results
  73. 73. #velocityconfLatency in ms for CBC touch news landing page010203040200 300 400 500 600 700 800 900 1000 20001%1%1%1%2%4%7%18%37%27%Data points: 1913
  74. 74. #velocityconfRUM page load time (PLT) in ms for CBC touch news landing page07.51522.530500 700 1000 2000 3000 5000 7000 10000 15000 500002%2%4%5%13%21%26%13%10%3%Data points: 4864
  75. 75. #velocityconfBandwidth distribution for CBC touch news landing page1%7%41%24%21%6%<64Kbps64-256Kbps256-512Kbps512Kbps-1.6Mbps1.6-3Mbps3-8MbpsData points: 8994
  76. 76. #velocityconfWith RUM data “[...] your real users are experiencing page load timesthat are twice as long as their corresponding syntheticmeasurements.”Steve Souders
  77. 77. #velocityconfComparing synthetic test results with RUM
  78. 78. #velocityconfToolsTargetNetwork ProfileData pointsCBC news touch landing page CBC news touch landing page1) Public WebPagetestNo Mobitest (DSL/Wifi)2) PhantomJS with Slowy for shaping connectionCaptain Rum(boomerang.js, parsed beaon.gif params into DB)1) 1002) 100After de-noising data: 48641) 3G simulation (“apples with apples”)2) Slowy app with 3G simulationReal user, baby!Median and 95th percentileof page load time (PLT)Median and 95th percentileof page load time (PLT)Synthetic Testing Real User MonitoringMeasurements
  79. 79. #velocityconfPage load time for touch news landing page (RUM and synthetic)RUM (t_done)PhantomJS (3G)WebPagetest (3G)0 2750 5500 8250 110005005 ms3726.5 ms1926.5 ms6094 ms5246 ms10088 ms95th percentileMedianRUMSynthetic
  80. 80. #velocityconf• Synthetic• Lots of variances possible• Challenges to properly simulate for mobile• RUM• Users benefit from cache• Android wrapper app faster than Android browserSome observations
  81. 81. #velocityconfAvoid dangerous temptations
  82. 82. #velocityconfThat’s a lot of cookiesYikes! Oh No!Temptations
  83. 83. #velocityconfTipping the scaleTemptations
  84. 84. #velocityconfCookies on a diet
  85. 85. #velocityconf• Use the path option to limit cookie scopeCookies on a diet
  86. 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. 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 funCookies on a diet
  88. 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
  89. 89. #velocityconfOther temptations (front-end)
  90. 90. #velocityconf3rd party monsters
  91. 91. #velocityconfMonsters?
  92. 92. #velocityconf• Ads, tracking, social buttons etc.Monsters?
  93. 93. #velocityconf• Ads, tracking, social buttons etc.• They are unpredictable, scary, disruptive, sneaky andMonsters?
  94. 94. #velocityconf• Ads, tracking, social buttons etc.• They are unpredictable, scary, disruptive, sneaky and• Could slow down your siteMonsters?
  95. 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. 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 doMonsters?
  97. 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 pageMonsters?
  98. 98. #velocityconfWhat would a life without ads feel like....????
  99. 99. #velocityconfThe wonderful life without ads
  100. 100. #velocityconfCBC Touch Mobile without ads
  101. 101. #velocityconfUsing no (client-side) ads code reduced our page load time by ~40%40%
  102. 102. #velocityconfUsing server-side ads code over client-side ads code saved us~20% of page load time20%
  103. 103. #velocityconfGet inshape
  104. 104. #velocityconf• Last mile acceleration (use GZip compression)• Take advantage of a CDN, if possible• Only use cookies where necessary• Caches are your friendServer and back-end
  105. 105. #velocityconfDedicated mobile sites
  106. 106. #velocityconf• Decide on the server what to serve• Different websites (Text, Rich, Touch) foroptimized experience• Optimized and different images for all of our 3mobile sites• Edge side include technology (ESI) for devicedetection and/or conditional loadingServer-side optimization& device detection
  107. 107. #velocityconfResponsive web design and web performance
  108. 108. #velocityconf“72% of the sites using responsive design dont optimize formobile” (86% in 2012)Guy Podjarny72%
  109. 109. #velocityconfResponsive Web Design with Server Side ComponentsRESSHeavy resource lifting should be done on the server
  110. 110. #velocityconfExercises that worked for CBC
  111. 111. #velocityconf• Very important to support If-Modified-Since requests• Allows caches to properly cachecontent. Don’t cache bust!The power of If-Modified-Since
  112. 112. #velocityconfThe proof28kb12kb07.51522.53010/29/2011 11/01/2011 11/04/2011 11/07/2011 11/10/2011 11/13/2011 11/16/2011kBytesperHit
  113. 113. #velocityconfBefore and after
  114. 114. #velocityconf• Heavy 404 Page?• Browser will download the 404 page even ifit’s for a broken image or other assetKeep those 404s in check
  115. 115. #velocityconfDefinitely not super thin
  116. 116. #velocityconf#velocityconf
  117. 117. #velocityconf#velocityconf
  118. 118. #velocityconfThe difference ....5.2kB 1.1kBBefore After80%
  119. 119. #velocityconfGlobal Shell
  120. 120. #velocityconfGlobal Shell• Shared by all• Visual representation
  121. 121. #velocityconfGlobal Shell• Shared by all• Visual representation
  122. 122. #velocityconfGlobal 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. 123. #velocityconfImprovement is easier than you think
  124. 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 toreduce file size and HTTP requestsHow did we improve
  125. 125. #velocityconfWhy optimizing manually if you can automate it?Included performance optimization into your deployment and release process
  126. 126. #velocityconf• Maven, Ant Tools and Plugins• Closure Compiler (Google)• Minify-maven-plugin• HTMLCompressor• Confess• cssembed.jar or compass for data:uriAutomated & built-in tools
  127. 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. 128. #velocityconfWhat were the results?
  129. 129. #velocityconfGlobal Shell: Before and after
  130. 130. #velocityconfGlobal Shell: Before and after06121824HTTP Requests1824Before After25%6869.470.872.273.675Page Weight (kB)69.871.93%00.250.50.751Start to render (s)0.6910.94226%00.3250.650.9751.3Visually complete (s)0.91.330%Improvements
  131. 131. #velocityconfSlimmed down! But the danger with all diets ....
  132. 132. #velocityconfYo-yo effectDon’t gain the weight back
  133. 133. #velocityconfIf you don’t monitor your weight, you can also make it worse...
  134. 134. #velocityconf#velocityconf
  135. 135. #velocityconf3rd Party monsters interrupt02.557.5107/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/12ArithmeticMeaninsSource: Keynote Daily Reports
  136. 136. #velocityconf3rd Party monsters interrupt02.557.5107/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/12ArithmeticMeaninsSource: Keynote Daily Reports
  137. 137. #velocityconf3rd Party monsters interrupt02.557.5107/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/12ArithmeticMeaninsGlobal ShellSource: Keynote Daily Reports
  138. 138. #velocityconf3rd Party monsters interrupt02.557.5107/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/12ArithmeticMeaninsGlobal ShellSource: Keynote Daily Reports
  139. 139. #velocityconf3rd Party monsters interrupt02.557.5107/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/12ArithmeticMeaninsGlobal Shell ISP IssuesSource: Keynote Daily Reports
  140. 140. #velocityconf3rd Party monsters interrupt02.557.5107/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/12ArithmeticMeaninsGlobal Shell ISP IssuesSource: Keynote Daily Reports
  141. 141. #velocityconf3rd Party monsters interrupt02.557.5107/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/12ArithmeticMeaninsGlobal Shell ISP IssuesClient-side AdsSource: Keynote Daily Reports
  142. 142. #velocityconf3rd Party monsters interrupt02.557.5107/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/12ArithmeticMeaninsGlobal Shell ISP IssuesClient-side AdsSource: Keynote Daily Reports
  143. 143. #velocityconf3rd Party monsters interrupt02.557.5107/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/12ArithmeticMeaninsGlobal Shell ISP IssuesClient-side AdsSource: Keynote Daily Reports
  144. 144. #velocityconf3rd Party monsters interrupt02.557.5107/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/12ArithmeticMeaninsGlobal Shell ISP IssuesClient-side AdsAds turned offSource: Keynote Daily Reports
  145. 145. #velocityconf3rd Party monsters interrupt02.557.5107/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/12ArithmeticMeaninsGlobal Shell ISP IssuesClient-side AdsAds turned offSource: Keynote Daily Reports
  146. 146. #velocityconf3rd Party monsters interrupt02.557.5107/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/12ArithmeticMeaninsGlobal Shell ISP IssuesClient-side AdsAds turned offServer-side AdsSource: Keynote Daily Reports
  147. 147. #velocityconfA user who has to endure an 8-second downloaddelay spends only 1% of their total viewing time looking atthe featured promotional space on a landing page.In contrast, a user who receives instantaneous pagerendering spends 20% of viewing time within thepromotional area (source: Nielsen)
  148. 148. #velocityconfCBC’s fitness tips - Take aways
  149. 149. #velocityconfCreate a culture of performanceBring everyone on boardFitness Tip
  150. 150. #velocityconfStart today, collect measurementsFitness TipRun tests frequently, use free or commercial tools to help
  151. 151. #velocityconfVisualize data and complexity to illustrate performance success andbad hits (show before and after)Fitness TipA picture is worth a thousand words
  152. 152. #velocityconfAutomate performance optimizationFitness Tip
  153. 153. #velocityconfWatch those 3rd party monstersEvaluate their impact, ask and push for server-side solutions or use non-blocking, asynchronous solutionsFitness Tip
  154. 154. #velocityconfServe only what the client needsDevice detection, server-side components and responsive web designFitness Tip
  155. 155. #velocityconfUse RUM and synthetic testingFitness TipGet to know your users’ performance and your features’ performance
  156. 156. #velocityconfMonitor your fitness level, setup reportsFitness Tip
  157. 157. #velocityconfShare your ideas and knowledgeCBC’s Web Performance Working GroupFitness Tip
  158. 158. #velocityconfSet a performance budgetFitness Tip
  159. 159. #velocityconfRun quick performance tests on mocks and prototypesFitness Tip
  160. 160. #velocityconfThere is always room for improvementFitness TipKeep the momentum
  161. 161. #velocityconfQuestions?/blakecrosby/bbintoThank you!Office HoursToday 2:45pmExhibit Hall (Table 3)
  162. 162. #velocityconfPhoto 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.jpgSources•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

×