©2013 AKAMAI | FASTER FORWARD TM It's all about Performance Measured and Perceived Performance on Desktop and Mobile Devices San Mateo Meetup, July 2013

©2013 AKAMAI | FASTER FORWARD TM 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 FORWARD TM Introduction

©2013 AKAMAI | FASTER FORWARD TM Who we are Eugene Zhang, Sr. Enterprise Architect Manuel Alvarez Enterprise Architect Pierre Lermant Enterprise Architect

©2013 AKAMAI | FASTER FORWARD TM 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 Google ** Is incorporating page performance data in its ranking * Source ** Source

©2013 AKAMAI | FASTER FORWARD TM Yet Website Content Always Increasing Source: Ilya Grigorik

©2013 AKAMAI | FASTER FORWARD TM Measured vs. Perceived Performance

©2013 AKAMAI | FASTER FORWARD TM 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 FORWARD TM 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 FORWARD TM 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 FORWARD TM 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'

©2013 AKAMAI | FASTER FORWARD TM Mobile Websites Mobile Challenges and Design Alternatives

©2013 AKAMAI | FASTER FORWARD TM Mobile: Specific Challenges Network Conditions Wireless Connection Network Latency * 2G ms 3G (HSPA) ms 4G (HSPA+) ms 4G (LTE) 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:

©2013 AKAMAI | FASTER FORWARD TM 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 FORWARD TM 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 FORWARD TM 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.

©2013 AKAMAI | FASTER FORWARD TM Q&A