It's all about Performance
Measured and Perceived Performance
on Desktop and Mobile Devices
San Mateo Meetup, July 2013
©2013 AKAMAI | FASTER FORWARDTM
Agenda
Introduction
• Who We Are
• Why Performance Matters
Measured vs. Perceived Performance
• Measured Performance
• Perceived Performance
Mobile Websites
• Specific Challenges
• Design Alternatives
©2013 AKAMAI | FASTER FORWARDTM
Introduction
Introduction
©2013 AKAMAI | FASTER FORWARDTM
Who we are
Eugene Zhang,
Sr. Enterprise Architect
ezhang@akamai.com
Manuel Alvarez
Enterprise Architect
maalvare@akamai.com
Pierre Lermant
Enterprise Architect
plermant@akamai.com
©2013 AKAMAI | FASTER FORWARDTM
Why Website Performance Matters
Gomez *
•
For e-commerce, conversion rate increases 74% when page load time decreases from 8
to 2 seconds
Computer and Equation Research *
•
71% of mobile web users expect website performance on their mobile phones to be
equal to, or better than, what they experience on their desktops -- up from 58% in 2009.
Google **
•
Is incorporating page performance data in its ranking
* Source http://newsletter.sli-systems.com/2012/04
** Source http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
©2013 AKAMAI | FASTER FORWARDTM
Yet Website Content Always Increasing
Source: Ilya Grigorik
©2013 AKAMAI | FASTER FORWARDTM
Measured vs. Perceived Performance
Measured vs. Perceived
Performance
©2013 AKAMAI | FASTER FORWARDTM
Measured Performance: Definition
Performance is typically measured by the elapsed time between the 'navigationStart'
request until the browser "onload" event is triggered on the new page, after all the resources
(html, images, css, js) have been downloaded.
Source: W3C
©2013 AKAMAI | FASTER FORWARDTM
Measured Performance: Standard Optimizations
• Gzip and minimize text files (CSS, HTML, JS) - Sprite small images
• Make JS asynchronous, avoid document.write
• Only request resources the page is using
• Minimize header payloads (e.g. cookieless domain for images)
• Resource inlining, domain sharding
• Maintain Persistent Connection (keep-alive)
• Leverage a Content Delivery Network (caching close to users, route
optimization, resource prefetching, ...)
©2013 AKAMAI | FASTER FORWARDTM
Perceived Performance: What is it?
•
•
•
•
•
No browser-independent, agreed upon metric as of yet.
Loosely defined as either when all elements in viewing area have been
painted or when user sees enough information to interact with the site.
Webpagetest.org uses the % of viewport paint completion as a metric
There is usually a good correlation between measured and perceived
performances
If care is not given to perceived performance, user experience can be
negatively impacted, even if real performance metrics are positive. See
examples on next page
©2013 AKAMAI | FASTER FORWARDTM
Perceived Performance: Possible Optimizations
How to achieve better perceived performance?
•
•
•
•
Optimize measured performance first, since the 2 are often closely related
Prioritize rendering of core items users need to start interaction (e.g. search box)
Prioritize loading and rendering of content above the fold
Avoid animation until user starts interaction (click, mouseover) as animation can
be mistaken for an unfinished (still loading) page
Practical Tools Tips
•
•
•
•
User server 'flush' when possible (e.g. http headers, top navigation bar)
Stylesheets at the top and scripts at the bottom
For third party viewports, consider static low-res images first and then highres/animation thru JS
Run visual tests and capture key frames to understand how real and
perceived performances correlate. E.g. webpagetest 'filmstripview'
©2013 AKAMAI | FASTER FORWARDTM
Mobile Websites
Mobile Challenges and
Design Alternatives
©2013 AKAMAI | FASTER FORWARDTM
Mobile: Specific Challenges
Network Conditions
• Wireless Connection Network Latency *
2G 500 - 1000 ms
3G (HSPA) 150 - 450 ms
4G (HSPA+) 50 - 200 ms
4G (LTE) 40 - 100 ms
• Slow DNS lookups (>200 ms)
• High packet loss
Device Characteristics
• Screen size
• Proximity to cell tower
• Control-plane wake-up time, adds another 100(4G)-2000(3G) ms to link
negotiation
* Source: http://www.igvita.com/slides/2012/webperf-crash-course.pdf
©2013 AKAMAI | FASTER FORWARDTM
Mobile: Dedicated Site Design
Advantages:
• Improved user experience thru tailored design
• Only load the assets needed for mobile users
• Use lightweight requests
Disadvantages
• Dedicated set of resources and code, separate from desktop site
• Difficult to support devices with different characteristics
• Multiple URLs for each page, requires expensive redirects
©2013 AKAMAI | FASTER FORWARDTM
Mobile: Adaptive Site Design
Advantages
•
Shared resources, single code base
•
A single URL for all devices, no redirect
Disadvantages
•
Hard to write and maintain, complex front-end code development
•
Need to support wide range of browsers/clients
•
In general, slower performance than dedicated sites due to JS
©2013 AKAMAI | FASTER FORWARDTM
Mobile: Design Takeaways
•
There is no one-size-fits-all approach. Consider your business priorities
• Balance design richness with performance goals
o
Fancy or sloppy designs can kill performance
• Aggressively minimize the number of requests, avoid redirects
• Reduce the use of javascript
• Consider advanced Front End Optimizations: responsive image sizing,
click-on-touch, page pre-fetching, asynchronous JS
• Benchmark for mobile performance, e.g. http://mobitest.akamai.com/m/index.cgi
©2013 AKAMAI | FASTER FORWARDTM
Q&A
©2013 AKAMAI | FASTER FORWARDTM