©2013 akamai | faster forward tm it's all about performance measured and perceived performance...

©2013 AKAMAI | FASTER FORWARDTM

It's all about Performance

Measured and Perceived Performance on Desktop and Mobile Devices

San Mateo Meetup, July 2013


Agenda

Introduction•Who We Are•Why Performance Matters

Measured vs. Perceived Performance•Measured Performance•Perceived Performance

Mobile Websites•Specific Challenges•Design Alternatives


Introduction

Introduction


Who we are

Eugene Zhang,Sr. Enterprise [email protected]

Manuel AlvarezEnterprise [email protected]

Pierre LermantEnterprise [email protected]


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


Yet Website Content Always Increasing

Source: Ilya Grigorik


Measured vs. Perceived Performance

Measured vs. Perceived Performance


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


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


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


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'


Mobile Websites

Mobile Challenges and Design Alternatives


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


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


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


Mobile: Design Takeaways

• There is no one-size-fits-all approach. Consider your business priorities

• Balance design richness with performance goalso 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


Q&A

©2013 akamai | faster forward tm it's all about performance measured and perceived performance...

Documents

perceived performance

page slide

slower performance

definition performance

js slide

page performance data

w3c slide

real performance metrics