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

The CBC on a Diet
Slimming down for a whole nation

#SpotlightWPO

Barbara // bbinto Blake // blakecrosby
Senior Architect, Mobile Web Team Lead, Media Production Support
Digital Operations, CBC MO&T, CBC

#SpotlightWPO

Today’s workout
• Quick dive into web performance
• The CBC - weight problems and temptations
• How to stay in shape
• Real production exercises that worked for CBC
• Our ﬁtness tips summarized
• Performance Quiz (if time permits)

#SpotlightWPO

Performance
Why the need for speed?

#SpotlightWPO

Perception of Speed
• It feels slower when...
• Unpleasant
• Unknown
• Boring

• It feels faster when...
• Task is successful
• Responsive system
• Progress and informed

#SpotlightWPO

“Ultimately performance is about respect”
Brad Frost

#SpotlightWPO

Mobile & Performance
Why is performance for mobile so crucial?

#SpotlightWPO

It’s a mobile (browser) world

#SpotlightWPO

Performance on Mobile

• Battery-driven device, heavy pages will drain
the battery (excellent paper)
• Smaller CPU
• Network connectivity / latency
• Data usage - Don't make the user pay for
bad performance

#SpotlightWPO

You’re dealing with impatient users

74% of mobile web users expect a page to load
in 5 seconds or less
Gomez - What Mobile Users Want

#SpotlightWPO

Measure performance

#SpotlightWPO

Tools, Formats and Browser Plugins

• Browser plugins
• “Waterfall” inside Firebug, Chrome etc
• PageSpeed, YSlow and YSlow Plugin for 3rd party

• HAR (ultrasound of a web page)
• Based on the HTTP Archive speciﬁcation
• Captures web page loading information
in a JSON format
• Visualizing: HAR Viewer

#SpotlightWPO

Collecting measurements

#SpotlightWPO

Synthetic Testing and Real User Monitoring (RUM)
Hand in hand

#SpotlightWPO

Synthetic Testing
• You run the test
• Establish a baseline performance level
(e.g identify poor 3rd party scripts)
• Measuring one exact conﬁguration (of your
choice)
• Pitfalls
• “[...] your real users are experiencing page load times that are
twice as long as their corresponding synthetic
measurements.” (Steve Souders)
#SpotlightWPO

Synthetic Testing - Tools
• PageSpeed
• Insights API

curl "https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=http://sample.com&key=yourAPIKey"

• Webpagetest.org
• Public and private instances with RESTful API
http://www.webpagetest.org/runtest.php?url=example.com&runs=3&k=apikey&f=json

• Headless Scripts and Tools
• phantomJS, confess, or write your own script
#SpotlightWPO

Real User Monitoring (RUM)

• User runs the test
• Measures the experience of the “actual” user
• “It is the ground truth for what users are experiencing” (Steve
Souders)

• Get concrete information about user’s
connectivity, latency, bandwidth etc.

#SpotlightWPO

RUM
• Based on navigation timing
!"#$%&'()&*+,$-(.(,)$
• Free Tools
• Boomerang
• Google Analytics

• Vendors
• Keynote
• New Relic
• and more...
/0123344454"5+6)3-73,&'()&*+,8*.(,)3$#SpotlightWPO

Canadian crown corporation

Desktop site page views ~5Mio/day

Mobile Touch site page views ~ 500K/day

Canadian Broadcasting Corporation
National public radio and television broadcaster

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

#SpotlightWPO

Mandate: The 1991 Broadcasting Acts states
that...
"...the Canadian Broadcasting Corporation, as the national public broadcaster, should
provide radio and television services incorporating a wide range of programming that
informs, enlightens and entertains;

...the programming provided by the Corporation should:
vi. be made available throughout Canada by the most appropriate and
efﬁcient means and as resources become available for the purpose, and
vii. reﬂect the multicultural and multiracial nature of Canada.”

#SpotlightWPO

Organizational Structure - Clients

#SpotlightWPO

CBC’s digital ecosystem

#SpotlightWPO

What constitutes a web product at CBC?

#SpotlightWPO

Anatomy of a CBC page

• 3rd party scripts
• Tracking (SiteCatalyst, ComScore, ClickTale)
• Ads (GPT)
• Social plugins (Gigya)

• Content
• Global header and footer (for branding)
• Actual content to tell a story, e.g. Text, Video, Audio, Images etc.

#SpotlightWPO

Weight Check: Desktop and Mobile

#SpotlightWPO

A typical CBC story page

#SpotlightWPO

Let’s put them on a scale!
Content Breakdown

#SpotlightWPO

Content Breakdown - Mobile

#SpotlightWPO

Content Breakdown - Mobile

Fully loaded
247kB
HTTP requests
36

#SpotlightWPO

Content Breakdown - Desktop

#SpotlightWPO

Content Breakdown - Desktop

Fully loaded
1,539kB
HTTP requests
164

#SpotlightWPO

Too heavy? Compared to what though...?

#SpotlightWPO

httparchive.org
The HTTP Archive tracks how the web is built

#SpotlightWPO

Desktop - Total Transfer Size

November 2010 - March 2013: + ~50%

1211kB

90 req.

#SpotlightWPO

Mobile - Total Transfer Size

June 2011 - March 2013: + ~50%

720kB

60 req.

#SpotlightWPO

The average page will hit 2MB by 2015
Images and 3rd party scripts are the main culprits

#SpotlightWPO

Avoid Dangerous Temptations

#SpotlightWPO

Temptations
• That’s a lot of cookies

Yikes!

Oh No!

Temptations

Tipping the scale

#SpotlightWPO

Cookies on a Diet

• 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?

#SpotlightWPO

Common temptations of a front-end dev

#SpotlightWPO

Temptations
Let’s use those
Yeah yeah, 2MB retina I want to
I’ll optimize images for use that
later every cool new
platform plugin I just
found

Sure, I’ll add Wait....I just want to
that new make it pretty (and
social media prettier)
plugin

#SpotlightWPO

3rd Party Monsters

#SpotlightWPO

Monsters?
• Kinds of monsters
• Ads, tracking, social buttons

• They are unpredictable, scary, disruptive,
sneaky and
• Could slow down your site
• Could bring down your site (Single Point of Failure)
• Could do things you don’t want them to do
• Add weight and complexity to your page

#SpotlightWPO

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

#SpotlightWPO

The wonderful life without ads....

#SpotlightWPO

CBC without mobile touch ads....

• Using server-side ads code over client-side
code saved us ~20% of load time
• Using no ads in comparison to client-side
ads reduced our load time by ~40%

#SpotlightWPO

And the danger with all diets ....

#SpotlightWPO

Yo-yo effect

• Keep the excitement and
awareness
• Be diligent and stay focused
• Don’t gain the weight
back

#SpotlightWPO

Monitor your ﬁtness level
So you can identify your problem areas

#SpotlightWPO

Monitoring your ﬁtness level

Alerts

#SpotlightWPO

Monitoring your ﬁtness level

Automated Reports

#SpotlightWPO

Monitor and test your speed (Mobile)

• Device testing and speed simulation
• Adobe Edge
• shim (Boston Globe)
• Slowy

• Remote debugging
• Weinre / debug.phonegap.com
• Bookmarklets (Firebug Lite, YSlow)
• Safari Remote Web Inspector
#SpotlightWPO

Monitor and average the Unpredictable

Typical (breaking) news trafﬁc
• Difﬁcult to measure average, visitors

Create your own performance dashboard

#SpotlightWPO

Create your own perf dashboard

• Run WebPageTest on your own server and
export HAR ﬁles
• Automate your test runs
• Use js tools to visualize (Google chart tools,
d3.js)

#SpotlightWPO

Create your own perf dashboard

• JavaScript based tools
• PhantomJS: headless webkit with JavaScript API
• CasperJS: navigation scripting and testing utility for PhantomJS
• boomerang.js (JavaScript library for RUM): measures the page
load time experienced by real users

#SpotlightWPO

Stay in shape

#SpotlightWPO

Front-End

• Google
• https://developers.google.com/speed/docs/best-practices/
rules_intro

• Yahoo
• http://developer.yahoo.com/performance/rules.html

#SpotlightWPO

Front-End

• Conditional loading
• Be careful on the 3rd party scripts (SPOF)
• Avoid re-rendering DOM elements
• Use data:uri
• Encoded in base 64 format
• For example, can be used to replace background images < 2kB

#SpotlightWPO

data:uri

• Task: CBC Gem
• Performance test 30px

• no background image, pure CSS
• png background image inside CSS 30px

• data:uri (encoded png as base 64)
inside CSS

• Conditions
• all miniﬁed, concatenated, compressed
#SpotlightWPO

data:uri - pure CSS

#SpotlightWPO

data:uri - png bg img in CSS

#SpotlightWPO

data:uri in CSS

#SpotlightWPO

Performance comparison

pure CSS PNG in CSS data:uri in CSS

HTTP requests 2 3 2

Bytes in kB 4.1 2.9 3.3

Load Time
0.303s 0.389 0.26
(Median)

#SpotlightWPO

Server and Back-End
• Last mile acceleration (use
GZip compression)
• Take advantage of a CDN,
if possible
• Only use cookies where
necessary
• Caches are your friend

#SpotlightWPO

Dedicated mobile sites

#SpotlightWPO

Server-side Optimization & Device
Detection

• Decide on the server what to serve
• Different websites (Text, Rich, Touch) for optimized experience
• Optimized and different images for all of our 3 mobile sites

• Edge side include technology (ESI) for device
detection and/or conditional loading

#SpotlightWPO

Responsive Web Design and Web Performance
“72% of the sites using responsive design don't optimize for mobile” (Guy Podjarny)
(86% in 2012)

#SpotlightWPO

How about RESS?

• Responsive Web Design with Server Side
Components
• Heavy resource lifting should be done on the
server

#SpotlightWPO

Second Screen Example - RESS

Touch Mobile Tablet Desktop
low-res images and mobile ads retina high-res images and mobile ads high-res images and fullsite ads

#SpotlightWPO

RESS - Server Side Component

#SpotlightWPO

RESS - RWD component

#SpotlightWPO

Exercises that worked for CBC

#SpotlightWPO

The Power of 304

• Very important to support If-Modiﬁed-Since
requests
• Allows caches to properly cache content.
Don’t cache bust!

#SpotlightWPO

The Proof
28kb

12kb

#SpotlightWPO

Keep those 404s in check

• Heavy 404 Page?
• Browser will download
the 404 page even if it’s
for a broken image or
other asset

#SpotlightWPO

Deﬁnitely not super-model thin...

The Difference...

• 5.2kB versus 1.4kB
• Savings of ~75%

#SpotlightWPO

Global Shell

• Shared by all
• Visual representation
• Non-visual representation
• SSI variables in header to serve ads and tracking

• Global scripts and stylesheets

• SiteCatalyst and ComScore

#SpotlightWPO

Improvement is easier than you think

#SpotlightWPO

How did we improve? Simple!

• Re-factored code: Removed old/un-used
code
• Moved some scripts to the bottom of page
• Minified and concatenated scripts and CSS
files to reduce file size and HTTP requests

#SpotlightWPO

How did we improve?

• Why optimizing manually if you can just
automate it
• Included performance optimization into your
deploy and release process

#SpotlightWPO

Automated & Built-in Performance Tips

• Maven, Ant Tools and Plugins
• Closure Compiler (Google)
• Minify-maven-plugin
• HTMLCompressor
• Confess
• cssembed.jar for data:uri

#SpotlightWPO

Automated & Built-in Performance Tips

• If you can’t / don’t want to use Maven / Ant
• Taskrunners and Scaffolding: Grunt, Yeoman

• Continuous integration
• Jenkins and Hudson

#SpotlightWPO

What were the results?

#SpotlightWPO

Global Shell

#SpotlightWPO

Global Shell

Area Before After Improvement (in %)

HTTP
24 18 25
Requests

Page Weight 71.9kB 69.8kB 3

Page Load* 3.16s 1.91s 40

*Page load depends on connection and latency #SpotlightWPO

If you don’t monitor your weight, you can also
make it worse...
...and you’ll get unexpected visitors again ..yo-yo effect

#SpotlightWPO

3rd Party Monsters interrupt
(("

()"
ISP issues Client-side scripts

'"

&"
!"#$%&'(

%"

$"

#"
Global Shell

!"
$*+(*(+" $*+&*(+" %*#*(+" %*(+*(+" %*('*(+" %*+$*(+" &*+*(+" &*'*(+" &*($*(+" &*+,*(+" &*,)*(+" '*$*(+" '*(,*(+" '*+)*(+" '*+%*(+" ()*!*(+" ()*((*(+" ()*(&*(+"

Data from Keynote
#SpotlightWPO

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)

#SpotlightWPO

CBC’s ﬁtness tips - Take aways

#SpotlightWPO

Share your results

Fitness Tip #SpotlightWPO

“It’s not about what you can add, it’s about what
you can’t take away”
(Christian Heilmann, The Vanilla Web Diet)


You can never measure and test enough
Run tests frequently


Show graphs and complexity to illustrate
performance success and also bad hits
A picture is worth a thousand words


Make it fun and painless, make it part of your daily
routine
Automated Performance within your organization


Watch those 3rd party monsters
Evaluate their impact, ask and push for server-side solutions


Serve only what the client needs
Device Detection, Server-side components and Responsive Web Design


Share your ideas and knowledge
Web Performance Working Group


Create a culture of performance
Bring everyone on board


Set a Performance Budget


Performance Budget

• Be diligent and cautious about new features
• Set a baseline / weight (e.g. BBC 10 seconds on 3G/GPS)
• Evaluate a good conversion rate, cost vs. revenue
• Visit HTTP Archive for comparison
• Always evaluate what you can take away (content breakdown)

#SpotlightWPO

Samples of Performance Budget

• Set a budget for 3rd party scripts
• “Should not weigh more than ...”

• Evaluate the need for frameworks
• Run quick performance tests on mocks

#SpotlightWPO

Questions?
#SpotlightWPO
/blakecrosby
/bbinto

We’re hiring!

Thank you! #SpotlightWPO

Photo Credits
•http://beautygirlsmom.com/wp-content/uploads/2011/01/diet-funny-sign-spelled-out-vegetable.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

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

#SpotlightWPO

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

Recomendados

Recomendados

Más contenido relacionado

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

Similar a The CBC on a diet - Slimming down for a whole nation (20)

Más de Barbara Bermes

Más de Barbara Bermes (10)

Último

Último (20)

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