We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!
Presentation is loading. Please wait.
Published byLiberty Hanlin
Modified over 2 years ago
©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 Q&A
Web Performance Meetup 1 Web Performance 101 Jeremy
Enhance Your Page Load Speed And Improve Traffic.
CHAPTER 15 WEBPAGE OPTIMIZATION. LEARNING OBJECTIVES How to test your web-page performance How browser and server interactions impact performance What.
LESSON 15 – UNIT 0 ADAPTING YOUR WEB SITE FOR MOBILE DEVICES.
A really fairly simple guide to: mobile browser-based application development (part 1) Chris Greenhalgh G54UBI / Chris Greenhalgh
PERFORMANCE ENHANCEMENT IN ASP.NET By Hassan Tariq Session #1.
Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation
Stevesouders.com/docs/velocity-wpo pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
Web 2.0 Programming 1 © Tongji University, Computer Science and Technology. Web Web Programming Technology 2012.
Building Fast 3rd-Party Webapps O'Reilly Velocity Web Performance and Operations Conference 24 June Lessons.
Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen.
What year was the World Wide Web invented? 1989, by Tim Berners-Lee What year was the Internet developed? Can be traced back to 1958 — the year that.
Network. Add speed of light and speed in fiber Inspired by High Performance Browser Networking (Ilya Grigorik) Even Faster Web Sites (Steve Souders)
IF STARBUCKS USED INSTART LOGIC, THEY WOULD HAVE A FASTER RESPONSIVE WEBSITE BY PETER BLUM.
Web Performance Meetup 1 Web Performance Toolbelt Jeremy
Putting Performance Best Practices Together to Create the Perfect SPA Chris Love2Dev.com.
CS193H: High Performance Web Sites Lecture 5: Make Fewer HTTP Requests Steve Souders Google
Copyright © cs-tutorial.com. Introduction to Web Development In 1990 and 1991,Tim Berners-Lee created the World Wide Web at the European Laboratory for.
Zhichun Li The Robust and Secure Systems group at NEC Research Labs Northwestern University Tsinghua University 2.
Web Performance and key business metrics Part II: More Findings from the Front Line of Web Acceleration.
Improving Web Site Performance and Scalability While Saving Money Robert Boedigheimer ∙ Web Application
Performance Comparison of Congested HTTP/2 Links Brian Card, CS /7/
1 UNIT 13 The World Wide Web. Introduction 2 Agenda The World Wide Web Search Engines Video Streaming 3.
Intermediate 2 Computing Computer Networking. Introduction There are four sections: 1.Network Applications 2.Network Security 3.Data Transmission 4.Network.
Whole Page Performance Leeann Bent and Geoffrey M. Voelker University of California, San Diego.
Challenges in Web Document Summarization: Some Myths and Reality A. Rahman H. Alam Document Analysis and Recognition Team (DART) BCL Computers Inc. Santa.
Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.
WEB SCIENCE. What is the difference between the Internet and the World Wide Web? Internet is the entire network of connected computers and routers used.
RESPONSIVE AND MOBILE DESIGN BY: CHRIS PASQUARETTE APRIL, 2013.
IT 210 The Internet & World Wide Web introduction.
Anderson Quach (Microsoft) Tony Gentilcore (Google)
An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.
Analysis and Performance Information Systems 337 Prof. Harry Plantinga.
A closer look Dynamic Webpages Jessica Meyerson March 1, 2011.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 6: Links.
Mark Phillip markphillip.com 200s, 304s, Expires Headers, HTTP Compression, And You.
Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.
Optimizing Websites with YSlow Tom Lianza Co-Founder Wishlisting.com Tom Lianza Co-Founder Wishlisting.com.
Internet Applications (Cont’d) Basic Internet Applications – World Wide Web (WWW) Browser Architecture Static Documents Dynamic Documents Active Documents.
Cs332a_chapt10.ppt CS332A Advanced HTML Programming DHTML Dynamic Hypertext Markup Language A term describing a series of technologies Not a stand-a-lone.
What is Seo? SEO stands for “search engine optimization.” It is the process of getting traffic from the “free,” “organic,” “editorial” or “natural” search.
THE FUTURE IS HERE: APPLICATION- AWARE CACHING BY ASHOK ANAND.
Ektron Brown Bag: USF Mobile Website Marlene Tom August 7 &16, 2013.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
1 UNIT 13 The World Wide Web Lecturer: Ghadah Aldehim.
1 UNIT 13 The World Wide Web Lecturer: Kholood Baselm.
Real World Examples – Part II 7/26/2013Miro Remias, Sr. Solution Architect.
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Web Site Performance What makes web sites slow? Back end Front end Tools for measuring performance Firebug / YSlow Visual Studio Test Edition W3.org html.
© 2016 SlidePlayer.com Inc. All rights reserved.