Date post: | 06-May-2015 |
Category: |
Technology |
Upload: | barbara-bermes |
View: | 3,870 times |
Download: | 3 times |
#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