the canadian public broadcaster on a diet: slimming down for a whole nation

The Canadian Public Broadcaster on a Diet

Slimming down for a whole nationBarbara Bermes and Blake Crosby

#velocityconf

The Canadian Public Broadcaster on a DietSlimming down for a whole nation

Velocity 2013

#velocityconf

Barbara // bbintoSenior Architect, Mobile Web

Digital Operations, CBC

Blake // blakecrosbyTeam Lead, Media Production SupportMO&T, CBC

#velocityconf

Today’s workout

#velocityconf

Before we get started

#velocityconf

#velocityconf

Canada? Who? What?

#velocityconf

#velocityconf

#velocityconf

Canadian Broadcasting Corporation

#velocityconf


National public radio and television broadcaster

#velocityconf



Kind of like the NPR

#velocityconf



Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding

#velocityconf




Large internal and external digital ecosystem

#velocityconf





3 mobile websites

#velocityconf





3 mobile websites11 iOS, 3 Android, 5 Blackberry, 3 Windows apps

#velocityconf




Desktop site page views ~5Mio/day



#velocityconf





Mobile Touch site page views ~ 500K/day



#velocityconf





Mobile Touch site page views ~ 500K/day

News app page views ~1Mio/day



#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, andvii. reflect the multicultural and multiracial nature of Canada.”

#velocityconf

PerformanceWhy the need for speed?

#velocityconf#velocityconf

#velocityconf

“Ultimately performance is about respect”

Brad Frost

#velocityconf

Mobile & performanceWhy is performance for mobile so crucial?

#velocityconf

It’s a Mobile (Browser) World

0

500

1000

1500

2000

2007 2008 2009 2010 2011 2012 2013 2014 2015

Desktop Internet UsersMobile Internet Users

Source: Morgan Stanley

Num

ber

of g

loba

l use

rs in

milli

ons

#velocityconf

Performance on Mobile

#velocityconf


Battery-driven

#velocityconf


Battery-driven Small CPU/GPU

#velocityconf



Network connectivity and latency

#velocityconf



Network connectivity and latency Data usage

#velocityconf

You’re dealing with impatient users

“74% of mobile web users expect a page

to load in 5 seconds or less”

Gomez

#velocityconf

“Start with Metrics”Creating A Performance Culture

Steve Souders

#velocityconf

Anatomy of a CBC page: Tell a story

#velocityconf

Quick weight assessment for desktop and mobile

#velocityconf

A typical CBC story

#velocityconf

Put them on the scale!

#velocityconf

www.cbc.cab.scorecardresearch.commetrics.cbc.cagscounters.us1.gigya.comcdn.gigya.compagead2.googlesyndication.com

3%3%3%

6%

8%

78%

Domain breakdown: HTTP requests

#velocityconf

www.cbc.cab.scorecardresearch.commetrics.cbc.cagscounters.us1.gigya.comcdn.gigya.compagead2.googlesyndication.com

4%

11%0%1%1%

83%

Domain breakdown: Bytes

#velocityconf

#velocityconf

Fully loaded

247kBHTTP requests

36

#velocityconf

www.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

#velocityconf

www.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

#velocityconf

#velocityconf

Fully loaded

1,539kBHTTP requests

164

#velocityconf

Result of assessment: Too heavy? Unhealthy, compared to what?

#velocityconf

Steve Souders and httparchive.org to the rescueRepository of web performance information and to track web trends

#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

#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

#velocityconf

What are our options for successful weight measuring?

#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 levelGet concrete information about user’s latency,

bandwidth, page load time

Toolsprivate/public WebPagetest (API), PageSpeed (API),

phantomJS, commercial products etc.

Toolsboomerang.js, Google Analytics, commercial

products etc.

#velocityconf

Collecting measurements - Synthetic

#velocityconf

Create your own performance dashboard

#velocityconf

Setup 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 dump)

• Run batches e.g. daily via cronjob

Setup HTTP Archive

#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

#velocityconf

Query the database directly

#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

#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

#velocityconf

Visualize data with local HTTP Archive instance

#velocityconf

Out-of-the box setup

#velocityconf

#velocityconf

Custom pie charts

#velocityconf

Collecting measurements - Real user monitoring (RUM)

#velocityconf

boomerang.js: JavaScript library for RUMMeasures the page load time, latency, bandwidth (and more) experienced by real users

#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

#velocityconf

+

#velocityconf

+

Captain RUM

#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

#velocityconf

Captain RUM results

#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

#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

#velocityconf

Bandwidth distribution for CBC touch news landing page

1%7%

41%

24%

21%

6%<64Kbps64-256Kbps256-512Kbps512Kbps-1.6Mbps1.6-3Mbps3-8Mbps

Data points: 8994

#velocityconf

With RUM data “[...] your real users are experiencing page load times that are twice as long as their corresponding synthetic measurements.”

Steve Souders

#velocityconf

Comparing synthetic test results with RUM

#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) 1002) 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

#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 ms95th percentile

Median

RU

MS

ynth

etic

#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

#velocityconf

Avoid dangerous temptations

#velocityconf

That’s a lot of cookies

Yikes! Oh No!

Temptations

#velocityconf

Tipping the scale

Temptations

#velocityconf

Cookies on a diet

#velocityconf

• Use the path option to limit cookie scope

Cookies on a diet

#velocityconf


• Store your static assets at a different domain (images.cbc.ca)

Cookies on a diet

#velocityconf



• Don’t use cookies for fun

Cookies on a diet

#velocityconf



• Don’t use cookies for fun

• Ask: Do you really need them?

Cookies on a diet

#velocityconf

Other temptations (front-end)

#velocityconf

3rd party monsters

#velocityconf

Monsters?

#velocityconf

• Ads, tracking, social buttons etc.

Monsters?

#velocityconf


• They are unpredictable, scary, disruptive, sneaky and

Monsters?

#velocityconf



• Could slow down your site

Monsters?

#velocityconf




• Could bring down your site (SPOF - single point of failure)

Monsters?

#velocityconf





• Could do things you don’t want them to do

Monsters?

#velocityconf





• Could do things you don’t want them to do

• Will add weight and complexity to your page

Monsters?

#velocityconf

What would a life without ads feel like....????

#velocityconf

The wonderful life without ads

#velocityconf

CBC Touch Mobile without ads

#velocityconf

Using no (client-side) ads code reduced our page load time by ~40%

40%

#velocityconf

Using server-side ads code over client-side ads code saved us ~20% of page load time

20%

#velocityconf

Get in shape

#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

#velocityconf

Dedicated mobile sites

#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

#velocityconf

Responsive web design and web performance

#velocityconf

“72% of the sites using responsive design don't optimize for mobile” (86% in 2012)

Guy Podjarny

72%

#velocityconf

Responsive Web Design with Server Side Components

RESS

Heavy resource lifting should be done on the server

#velocityconf

Exercises that worked for CBC

#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

#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

kByt

es p

er H

it

#velocityconf

Before and after

#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

#velocityconf

Definitely not super thin

#velocityconf

The difference ....

5.2kB 1.1kB

Before After

80%

#velocityconf

Global Shell

#velocityconf

Global Shell• Shared by all

• Visual representation

#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

#velocityconf

Improvement is easier than you think

#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

#velocityconf

Why optimizing manually if you can automate it?Included performance optimization into your deployment and release process

#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

#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

#velocityconf

What were the results?

#velocityconf

Global Shell: Before and after

#velocityconf

Global Shell: Before and after

0

6

12

18

24

HTTP Requests

18

24Before 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

#velocityconf

Slimmed down! But the danger with all diets ....

#velocityconf

Yo-yo effectDon’t gain the weight back

#velocityconf

If you don’t monitor your weight, you can also make it worse...

#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

Arit

hmet

ic M

ean

in s

Source: Keynote Daily Reports

#velocityconf


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

Arit

hmet

ic M

ean

in s

Global Shell


#velocityconf


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

Arit

hmet

ic M

ean

in s

Global Shell ISP Issues


#velocityconf


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

Arit

hmet

ic M

ean

in s


Client-side Ads


#velocityconf


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

Arit

hmet

ic M

ean

in s


Client-side Ads

Ads turned off


#velocityconf


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

Arit

hmet

ic M

ean

in s


Client-side Ads

Ads turned off

Server-side Ads


#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)

#velocityconf

CBC’s fitness tips - Take aways

#velocityconf

Create a culture of performanceBring everyone on board

Fitness Tip

#velocityconf

Start today, collect measurements

Fitness Tip

Run tests frequently, use free or commercial tools to help

#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

#velocityconf

Automate performance optimization

Fitness Tip

#velocityconf

Watch those 3rd party monstersEvaluate their impact, ask and push for server-side solutions or use non-blocking, asynchronous solutions

Fitness Tip

#velocityconf

Serve only what the client needsDevice detection, server-side components and responsive web design

Fitness Tip

#velocityconf

Use RUM and synthetic testing

Fitness Tip

Get to know your users’ performance and your features’ performance

#velocityconf

Monitor your fitness level, setup reports

Fitness Tip

#velocityconf

Share your ideas and knowledgeCBC’s Web Performance Working Group

Fitness Tip

#velocityconf

Set a performance budget

Fitness Tip

#velocityconf

Run quick performance tests on mocks and prototypes

Fitness Tip

#velocityconf

There is always room for improvement

Fitness Tip

Keep the momentum

#velocityconf

Questions? /blakecrosby /bbinto

Thank you!

Office HoursToday 2:45pm Exhibit Hall (Table 3)

#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

http://beautygirlsmom.com/wp-content/uploads/2011/01/diet-funny-sign-spelled-out-vegetable.jpg






http://www.wallpaper-welt.de/gros/film/monster-ag/Monster%20AG.jpg

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://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://static.wix.com/media/130ef9_bab26cc8c87a64719072275bba963573.jpg

http://static.wix.com/media/130ef9_bab26cc8c87a64719072275bba963573.jpg

http://www.slideshare.net/stoyan/psychology-of-performance

http://www.slideshare.net/stoyan/psychology-of-performance

http://bradfrostweb.com/blog/post/performance-as-design/






http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf

http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf

http://www.slideshare.net/guypod/performance-implications-of-mobile-design

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

http://www.cbc.ca/m/touch/sports/story/2013/03/05/sp-paralympics-oscar-pistorius.html

http://www.webpagetest.org/result/130305_C4_HGT/

http://www.webpagetest.org/result/130305_C4_HGT/

http://coding.smashingmagazine.com/2012/11/13/the-vanilla-web-diet/




the canadian public broadcaster on a diet: slimming down for a whole nation

Technology

cbc page

television broadcasterkind

commercial advertising

federal fundinglarge

kdaynews app page views

mobile webdigital operations

mobile web users

broadcasting acts states