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

Canada? Who? What?

#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

2007 2008 2009 2010 2011 2012 2013 2014 2015

Desktop Internet UsersMobile Internet Users

Source: Morgan Stanley

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

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

Domain breakdown: HTTP requests

#velocityconf

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

11%0%1%1%

Domain breakdown: Bytes

#velocityconf

Fully loaded

247kBHTTP 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

1%1%1%1%1%1%1%1%1%1%1%1%1%

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%

28% 4%5%

Domain breakdown: Bytes

#velocityconf

Fully loaded

1,539kBHTTP requests

#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

CBC HTTP Archive Mobile

HTTP Requests

0 18 35 53 70

Data from June 2013

#velocityconf

Content breakdown

Page Size (kB)

0 800 1600

CBC HTTP Archive

HTTP Requests

0 45 90 135 180

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

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

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

200 300 400 500 600 700 800 900 1000 2000

1%1%1%1%2%4%

Data points: 1913

#velocityconf

RUM page load time (PLT) in ms for CBC touch news landing page

500 700 1000 2000 3000 5000 7000 10000 15000 50000

2%2%4%

Data points: 4864

#velocityconf

Bandwidth distribution for CBC touch news landing page

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

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)

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

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

#velocityconf

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

#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

#velocityconf

Responsive Web Design with Server Side Components

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

10/29/2011 11/01/2011 11/04/2011 11/07/2011 11/10/2011 11/13/2011 11/16/2011

#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

#velocityconf

Global Shell

#velocityconf

Global Shell• Shared by all

• Visual representation

#velocityconf

• 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

HTTP Requests

24Before After

Page Weight (kB)

Start to render (s)

Visually complete (s)

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

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

Source: Keynote Daily Reports

#velocityconf

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

#velocityconf

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

Global Shell

#velocityconf

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

Global Shell

#velocityconf

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

Global Shell ISP Issues

#velocityconf

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

#velocityconf

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

Client-side Ads

#velocityconf

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

Client-side Ads

#velocityconf

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

Client-side Ads

#velocityconf

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

Client-side Ads

Ads turned off

#velocityconf

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

Client-side Ads

Ads turned off

#velocityconf

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

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

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

cbc page

television broadcasterkind

commercial advertising

federal fundinglarge

kdaynews app page views

mobile webdigital operations

mobile web users

broadcasting acts states

Technology

miraculous slimming soup diet 15 pounds in one week

august broadcaster

implementation of broadcaster preface 1.infrastructure of...

broadcaster summer2015

slimming world

broadcaster v15

slimming world recipes

broadcaster 220

slimming carbon diet - del mar...

slimming menu

broadcaster brinkmanship

© heb diets and slimming foods. © heb sensible slimming...

slimming agent

freelancewriteruk.comfreelancewriteruk.com/pdfs/slimmingworlddps.pdf ·...

lead broadcaster

botanical slimming

best skinny waist slimming detox and...

slimming junction

bex broadcaster

the canadian public broadcaster on a diet: slimming down for...