The Canadian Public Broadcaster on a Diet: Slimming down for a whole nation
-
Upload
barbara-bermes -
Category
Technology
-
view
4.191 -
download
0
description
Transcript of 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
#velocityconf
Canada? Who? What?
#velocityconf
#velocityconf
#velocityconf
#velocityconf
Canadian Broadcasting Corporation
#velocityconf
Canadian Broadcasting Corporation
National public radio and television broadcaster
#velocityconf
Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR
#velocityconf
Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding
#velocityconf
Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding
Large internal and external digital ecosystem
#velocityconf
Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding
Large internal and external digital ecosystem
3 mobile websites
#velocityconf
Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding
Large internal and external digital ecosystem
3 mobile websites11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
#velocityconf
Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding
Desktop site page views ~5Mio/day
Large internal and external digital ecosystem
3 mobile websites11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
#velocityconf
Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR 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
Large internal and external digital ecosystem
3 mobile websites11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
#velocityconf
Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR 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
News app page views ~1Mio/day
Large internal and external digital ecosystem
3 mobile websites11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
#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
0
500
1000
1500
2000
2007 2008 2009 2010 2011 2012 2013 2014 2015
Desktop Internet UsersMobile Internet Users
Source: Morgan Stanley
Num
ber
of g
loba
l use
rs in
milli
ons
#velocityconf
Performance on Mobile
#velocityconf
Performance on Mobile
Battery-driven
#velocityconf
Performance on Mobile
Battery-driven Small CPU/GPU
#velocityconf
Performance on Mobile
Battery-driven Small CPU/GPU
Network connectivity and latency
#velocityconf
Performance on Mobile
Battery-driven Small CPU/GPU
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”
Gomez
#velocityconf
“Start with Metrics”Creating A Performance Culture
Steve Souders
#velocityconf
Anatomy of a CBC page: Tell a story
#velocityconf
Anatomy of a CBC page: Tell a story
#velocityconf
Anatomy of a CBC page: Tell a story
#velocityconf
Anatomy of a CBC page: Tell a story
#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%
6%
8%
78%
Domain breakdown: HTTP requests
#velocityconf
www.cbc.cab.scorecardresearch.commetrics.cbc.cagscounters.us1.gigya.comcdn.gigya.compagead2.googlesyndication.com
4%
11%0%1%1%
83%
Domain breakdown: Bytes
#velocityconf
#velocityconf
Fully loaded
247kBHTTP requests
36
#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%
1%1%
1%1%
1%1%
2%
2%
2%
2%
2%
2%
2%
4%
4%
4%
5%5%
48%
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%
2%
9%
28% 4%5%
36%
Domain breakdown: Bytes
#velocityconf
#velocityconf
Fully loaded
1,539kBHTTP requests
164
#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
765
247
CBC HTTP Archive Mobile
HTTP Requests
0 18 35 53 70
60
36
Data from June 2013
#velocityconf
Content breakdown
Page Size (kB)
0 800 1600
1462
1539
CBC HTTP Archive
HTTP Requests
0 45 90 135 180
92
164
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
#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
+
#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
0
10
20
30
40
200 300 400 500 600 700 800 900 1000 2000
1%1%1%1%2%4%
7%
18%
37%
27%
Data points: 1913
#velocityconf
RUM page load time (PLT) in ms for CBC touch news landing page
0
7.5
15
22.5
30
500 700 1000 2000 3000 5000 7000 10000 15000 50000
2%2%4%
5%
13%
21%
26%
13%
10%
3%
Data points: 4864
#velocityconf
Bandwidth distribution for CBC touch news landing page
1%7%
41%
24%
21%
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
Tools
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)
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
RU
MS
ynth
etic
#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
• Use the path option to limit cookie scope
• Store your static assets at a different domain (images.cbc.ca)
Cookies on a diet
#velocityconf
• 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
Cookies on a diet
#velocityconf
• 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?
Cookies on a diet
#velocityconf
Other temptations (front-end)
#velocityconf
3rd party monsters
#velocityconf
Monsters?
#velocityconf
• Ads, tracking, social buttons etc.
Monsters?
#velocityconf
• Ads, tracking, social buttons etc.
• They are unpredictable, scary, disruptive, sneaky and
Monsters?
#velocityconf
• Ads, tracking, social buttons etc.
• They are unpredictable, scary, disruptive, sneaky and
• Could slow down your site
Monsters?
#velocityconf
• Ads, tracking, social buttons etc.
• They are unpredictable, scary, disruptive, sneaky and
• Could slow down your site
• Could bring down your site (SPOF - single point of failure)
Monsters?
#velocityconf
• Ads, tracking, social buttons etc.
• They are unpredictable, scary, disruptive, sneaky and
• Could slow down your site
• Could bring down your site (SPOF - single point of failure)
• Could do things you don’t want them to do
Monsters?
#velocityconf
• Ads, tracking, social buttons etc.
• They are unpredictable, scary, disruptive, sneaky and
• Could slow down your site
• Could bring down your site (SPOF - single point of failure)
• 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%
40%
#velocityconf
Using server-side ads code over client-side ads code saved us ~20% of page load time
20%
#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
72%
#velocityconf
Responsive Web Design with Server Side Components
RESS
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
28kb
12kb
0
7.5
15
22.5
30
10/29/2011 11/01/2011 11/04/2011 11/07/2011 11/10/2011 11/13/2011 11/16/2011
kByt
es p
er H
it
#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#velocityconf
#velocityconf#velocityconf
#velocityconf
The difference ....
5.2kB 1.1kB
Before After
80%
#velocityconf
Global Shell
#velocityconf
Global Shell• Shared by all
• Visual representation
#velocityconf
Global Shell• Shared by all
• Visual representation
#velocityconf
Global Shell• Shared by all
• Visual representation
• 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
0
6
12
18
24
HTTP Requests
18
24Before After
25%
68
69.4
70.8
72.2
73.6
75
Page Weight (kB)
69.8
71.9
3%
0
0.25
0.5
0.75
1
Start to render (s)
0.691
0.942
26%
0
0.325
0.65
0.975
1.3
Visually complete (s)
0.9
1.3
30%
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#velocityconf
#velocityconf
3rd Party monsters interrupt
0
2.5
5
7.5
10
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
Arit
hmet
ic M
ean
in s
Source: Keynote Daily Reports
#velocityconf
3rd Party monsters interrupt
0
2.5
5
7.5
10
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
Arit
hmet
ic M
ean
in s
Source: Keynote Daily Reports
#velocityconf
3rd Party monsters interrupt
0
2.5
5
7.5
10
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
Arit
hmet
ic M
ean
in s
Global Shell
Source: Keynote Daily Reports
#velocityconf
3rd Party monsters interrupt
0
2.5
5
7.5
10
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
Arit
hmet
ic M
ean
in s
Global Shell
Source: Keynote Daily Reports
#velocityconf
3rd Party monsters interrupt
0
2.5
5
7.5
10
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
Arit
hmet
ic M
ean
in s
Global Shell ISP Issues
Source: Keynote Daily Reports
#velocityconf
3rd Party monsters interrupt
0
2.5
5
7.5
10
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
Arit
hmet
ic M
ean
in s
Global Shell ISP Issues
Source: Keynote Daily Reports
#velocityconf
3rd Party monsters interrupt
0
2.5
5
7.5
10
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
Arit
hmet
ic M
ean
in s
Global Shell ISP Issues
Client-side Ads
Source: Keynote Daily Reports
#velocityconf
3rd Party monsters interrupt
0
2.5
5
7.5
10
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
Arit
hmet
ic M
ean
in s
Global Shell ISP Issues
Client-side Ads
Source: Keynote Daily Reports
#velocityconf
3rd Party monsters interrupt
0
2.5
5
7.5
10
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
Arit
hmet
ic M
ean
in s
Global Shell ISP Issues
Client-side Ads
Source: Keynote Daily Reports
#velocityconf
3rd Party monsters interrupt
0
2.5
5
7.5
10
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
Arit
hmet
ic M
ean
in s
Global Shell ISP Issues
Client-side Ads
Ads turned off
Source: Keynote Daily Reports
#velocityconf
3rd Party monsters interrupt
0
2.5
5
7.5
10
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
Arit
hmet
ic M
ean
in s
Global Shell ISP Issues
Client-side Ads
Ads turned off
Source: Keynote Daily Reports
#velocityconf
3rd Party monsters interrupt
0
2.5
5
7.5
10
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
Arit
hmet
ic M
ean
in s
Global Shell ISP Issues
Client-side Ads
Ads turned off
Server-side Ads
Source: Keynote Daily Reports
#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