Talk at FITC Spotlight Web Performance and Optimization, March 16, 2013, Toronto.
Synopsis:
The CBC serves optimized content to millions of Canadians. We’ll share our experience & knowledge of optimizing content delivery for a high-scale & unpredictable audience. We will explain our performance stack from server-side optimization tricks to automated performance tools during deployment. We will discuss our challenges, findings and learnings of continually improving site delivery.
http://fitc.ca/presentation/the-canadian-public-broadcaster-on-a-diet-slimming-down-for-a-whole-nation/
The CBC on a diet - Slimming down for a whole nation
1. The CBC on a Diet
Slimming down for a whole nation
#SpotlightWPO
2. Barbara // bbinto Blake // blakecrosby
Senior Architect, Mobile Web Team Lead, Media Production Support
Digital Operations, CBC MO&T, CBC
#SpotlightWPO
3. 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
10. 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
11. 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
13. 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
16. 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
17. 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
18. 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
19. RUM
• Based on navigation timing
!"#$%&'()&*+,$-(.(,)$
• Free Tools
• Boomerang
• Google Analytics
• Vendors
• Keynote
• New Relic
• and more...
/0123344454"5+6)3-73,&'()&*+,8*.(,)3$#SpotlightWPO
20. 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
21. 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, and
vii. reflect the multicultural and multiracial nature of Canada.”
#SpotlightWPO
25. 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
42. 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
44. 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
46. 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
47. What would a life without ads feel like....????
#SpotlightWPO
49. 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
58. 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
59. 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
63. 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
64. 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 minified, concatenated, compressed
#SpotlightWPO
68. 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
69. 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
71. 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
72. Responsive Web Design and Web Performance
“72% of the sites using responsive design don't optimize for mobile” (Guy Podjarny)
(86% in 2012)
#SpotlightWPO
73. How about RESS?
• Responsive Web Design with Server Side
Components
• Heavy resource lifting should be done on the
server
#SpotlightWPO
74. 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
86. 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
88. 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
89. How did we improve?
• Why optimizing manually if you can just
automate it
• Included performance optimization into your
deploy and release process
#SpotlightWPO
90. Automated & Built-in Performance Tips
• Maven, Ant Tools and Plugins
• Closure Compiler (Google)
• Minify-maven-plugin
• HTMLCompressor
• Confess
• cssembed.jar for data:uri
#SpotlightWPO
91. 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
94. 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
95. If you don’t monitor your weight, you can also
make it worse...
...and you’ll get unexpected visitors again ..yo-yo effect
#SpotlightWPO
98. 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
110. 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
111. 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