#SpotlightWPO

The CBC on a DietSlimming down for a whole nation

#SpotlightWPO

Barbara // bbintoSenior Architect, Mobile Web

Digital Operations, CBC

Blake // blakecrosbyTeam Lead, Media Production SupportMO&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 fitness tips summarized• Performance Quiz (if time permits)

#SpotlightWPO

PerformanceWhy the need for speed?

#SpotlightWPO

#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 & PerformanceWhy 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 lessGomez - 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 specification

• 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 configuration (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

• Webpagetest.org• Public and private instances with RESTful API

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

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

http://www.webpagetest.org/runtest.php?url=example.com&runs=3&k=apikey&f=json

#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

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

/0123344454"5+6)3-73,&'()&*+,8*.(,)3$

RUM

• Based on navigation timing

• Free Tools• Boomerang

• Google Analytics

• Vendors• Keynote

• New Relic

• and more...

#SpotlightWPO

Canadian Broadcasting Corporation

Canadian crown 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

Desktop site page views ~5Mio/day

Mobile Touch site page views ~ 500K/day

#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 efficient means and as resources become available for the purpose, andvii. reflect 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

247kBHTTP requests

36

#SpotlightWPO

Content Breakdown - Desktop

#SpotlightWPO

Content Breakdown - Desktop

#SpotlightWPO

Content Breakdown - Desktop

Fully loaded

1,539kBHTTP requests

164

#SpotlightWPO

Too heavy? Compared to what though...?

#SpotlightWPO

httparchive.orgThe 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 2015Images and 3rd party scripts are the main culprits

#SpotlightWPO

Avoid Dangerous Temptations

Temptations

Yikes!

Oh No!

• That’s a lot of cookies

#SpotlightWPO

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

Sure, I’ll add that new social media plugin

I want to use that cool new plugin I just found

Yeah yeah, I’ll optimize later

Wait....I just want to make it pretty (and prettier)

Let’s use those 2MB retina images for e v e r y platform

#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 fitness levelSo you can identify your problem areas

#SpotlightWPO

Monitoring your fitness level

Alerts

#SpotlightWPO

Monitoring your fitness 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

Monitor and average the Unpredictable

Typical (breaking) news traffic • Difficult to measure average, visitors

#SpotlightWPO

Create your own performance dashboard

#SpotlightWPO

Create your own perf dashboard

• Run WebPageTest on your own server and export HAR files

• 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

#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• no background image, pure CSS

• png background image inside CSS

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

• Conditions• all minified, concatenated, compressed

30px

30px

#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 (Median) 0.303s 0.389 0.26

#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

DesktopTabletTouch Mobilelow-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-Modified-Since requests

• Allows caches to properly cache content. Don’t cache bust!

#SpotlightWPO

The Proof

28kb

12kb

Before.... After

#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

Definitely not super-model thin...

#SpotlightWPO

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 Requests

Page Weight

Page Load*

24 18 25

71.9kB 69.8kB 3

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

#SpotlightWPO

!"

#"

$"

%"

&"

'"

()"

(("

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

!"#$%&

'(3rd Party Monsters interrupt

Global Shell

Client-side scriptsISP issues

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

Fitness Tip

#SpotlightWPO

You can never measure and test enoughRun tests frequently

Fitness Tip

#SpotlightWPO

Show graphs and complexity to illustrate performance success and also bad hits

Fitness Tip

A picture is worth a thousand words

#SpotlightWPO

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

Fitness Tip

#SpotlightWPO

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

Fitness Tip

#SpotlightWPO

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

Fitness Tip

#SpotlightWPO

Share your ideas and knowledgeWeb Performance Working Group

Fitness Tip

#SpotlightWPO

Create a culture of performanceBring everyone on board

Fitness Tip

#SpotlightWPO

Set a Performance Budget

Fitness Tip

#SpotlightWPO

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

Thank you!We’re hiring!

#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