It's all about Performance

1. It's all about Performance Measured and Perceived Performance on Desktop and Mobile Devices San Mateo Meetup, July 2013

2. Agenda Introduction • Who We Are • Why Performance Matters Measured vs. Perceived Performance • Measured Performance • Perceived Performance Mobile Websites • Specific Challenges • Design Alternatives

3. Introduction Introduction

4. 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

5. 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

6. Yet Website Content Always Increasing Source: Ilya Grigorik

7. Measured vs. Perceived Performance Measured vs. Perceived Performance

8. 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

9. 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, ...)

10. 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

11. 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 high-res/animation thru JS • Run visual tests and capture key frames to understand how real and perceived performances correlate. E.g. webpagetest 'filmstripview'

12. Mobile Websites Mobile Challenges and Design Alternatives

13. 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

14. 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

15. 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

16. Mobile: Design Takeaways • There is no one-size-fits-all approach. Consider your business priorities • Balance design richness with performance goals • 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

17. Q&A