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 byOctavio Dorcas
Modified about 1 year ago
Akamai Confidential Performance Implications of Mobile Design Guy Podjarny @guypod firstname.lastname@example.org http://guypo.com/
©2012 Akamai Faster Forward TM Agenda Quick Intro to top Mobile Design Paradigms Review each Paradigm Explain Key Implementation Points Dig into top performance problem Show what went wrong Discuss how you can fix it Share tools that can help And how to use them Summary
©2012 Akamai Faster Forward TM Who Am I #1: Ex-CTO of Blaze.io (now Akamai)
©2012 Akamai Faster Forward TM Who Am I #2: Akamai Mobitest Mobile Web Performance Measurement Free Online Service: http://mobitest.akamai.com/http://mobitest.akamai.com/ Open Source Agent (Google Code Project)Google Code Project For more details: http://bit.ly/open-source-mobitesthttp://bit.ly/open-source-mobitest
©2012 Akamai Faster Forward TM Who Am I #3: Mobile Performance Researcher http://guypo.com/
©2012 Akamai Faster Forward TM Waterfall Charts Waterfall Chart Start Render Resource (Request/Response) Doc Complete, (a.k.a. onload, Load Time)
Akamai Confidential Quick Intro to Mobile Design
©2012 Akamai Faster Forward TM
©2012 Akamai Faster Forward TM Dedicated Sites (mdot) m.walmart.com URL/Website Per Device Profile www.walmart.com
©2012 Akamai Faster Forward TM Why Dedicated Websites? Historical Reasons More established and better understood Hard to change existing desktop websites Different owners inside/outside the company Better Reasons Less sensitive to specific browsers Helps align to native apps Easier to get perfect site for that context (Maybe)
©2012 Akamai Faster Forward TM Responsive Web Design One URL, Adapt to screen size www.bostonglobe.com
©2012 Akamai Faster Forward TM Mobile First & Desktop First: RWD Variations Mobile First (Progressive Enhancement) Desktop First (Graceful Degradation)
©2012 Akamai Faster Forward TM Why Responsive Websites? Broader Device Support Support the endless screen size permutations No Need for User-Agent Mapping Easier to maintain Maintain one website instead of multiples Future Friendly Anticipates future devices Better suited for handling new types of devices http://futurefriend.ly/
©2012 Akamai Faster Forward TM Responsive Shades of Grey Responsiveness is a property of a website A dedicated mobile website can be responsive A website can respond “only a little bit” Display Size is not the only variable Can respond to hardware properties (e.g. camera) Can respond to data availability (e.g. location) Server-side code can help too (a.k.a. RESS) Though responsiveness is primarily client-side
Akamai Confidential Dedicated Sites (mdot)
©2012 Akamai Faster Forward TM Dedicated Sites don’t create new performance problems Still have old problems, but that’s not related to mobile design Mdot
©2012 Akamai Faster Forward TM Small Mobile Site, Small Waterfall Chart m.cnn.comm.cnn.com, iPhone 4, iOS 5.0
©2012 Akamai Faster Forward TM Big Desktop/Tablet Site, Big Waterfall Chart www.cnn.com iPad 2 iOS 5
©2012 Akamai Faster Forward TM Redirects Dedicated Sites Top Performance Problem m. www.
©2012 Akamai Faster Forward TM Redirects are expensive! www.espn.com www.espn.com 2 redirects, 1.3 seconds lost
©2012 Akamai Faster Forward TM User-Agent Detection FAIL Nexus S XOOM iPad 2
©2012 Akamai Faster Forward TM Solution: Client-Side Detection
©2012 Akamai Faster Forward TM Late Redirect using scripts are even slower www.disney.com www.disney.com 2 redirects + JS Redirect, 3 seconds lost
©2012 Akamai Faster Forward TM Could get nasty www.garmin.com 3 redirects + JS Redirect, 3.6 seconds lost
©2012 Akamai Faster Forward TM Redirects – What To Do? Replace redirects with client-specific HTML Your CDN/load-balancer can help! Make sure your paths are the same Minimize Redirects Merge redirect chains Use HTTP Redirects, not JS redirects Keep the client-side detection as backup Detect most devices server-side Cache HTTP Redirects on the CDN Makes the extra round trip shorter
Akamai Confidential Responsive Web Design
©2012 Akamai Faster Forward TM RWD Implementation 101 Fluid Design Turn absolute sizes into relative sizes Breakpoints Stephen Hay @stephenhay (Mobile Web Designer): “Expand window until it looks like crap. Time to insert a breakpoint!”@stephenhay CSS Media Queries Change CSS more significantly at breakpoints Examples: Hide Columns, Collapse Menus, Remove bg imgs Using min/max width controls default view Determines what non-conforming browsers will display
©2012 Akamai Faster Forward TM Live Demo
©2012 Akamai Faster Forward TM Media Queries Example 2 Breakpoints: 320px, 640px 3 “versions”: Basic, Mobile, Desktop Mobile-First: Uses min-width
©2012 Akamai Faster Forward TM RWD Implementation 201 Extend support with scripted DOM manipulations Not all browsers support media queries (e.g. IE 6-8) Due to JS Support concerns, used mainly for enhancement Often required for responding to features Beware: Widths are not accurate or consistent Leave some buffer… Use EMs instead of PXs for absolute sizes Better handling for zoom or font size differences
©2012 Akamai Faster Forward TM Responsive Web Design Top Performance Problem: Over-Downloading Responsive Web Design
©2012 Akamai Faster Forward TM Test – Compare Sites on Different Resolutions Data: 347 Sites from http://mediaqueri.es/http://mediaqueri.es/ Testing Methodology: Use http://webpagetest.org/http://webpagetest.org/ Use Chrome browser Resize window before each measurement Resolutions: 320x480, 480x960, 1024x768, 1600x1200 Saw similar results with iPhone vs. iPad tests Collect Results Excel & Pivot Tables (Automated version of Jason Grigsby’s test last year)Jason Grigsby’s test last year ©
©2012 Akamai Faster Forward TM Responsive Sites Load Times & Size, by Resolution * Over Cable Speed (5 Mbps down, 1 Mbps up, 28ms RTT)
©2012 Akamai Faster Forward TM Small Screen = Less Visible Content != Less Bytes 320x48 0 1600x120 0
©2012 Akamai Faster Forward TM Some depressing stats… Page size Smallest Screen (320x480) vs. Biggest Screen (1600x1200) Page size Smallest Screen (320x480) vs. Biggest Screen (1600x1200)
©2012 Akamai Faster Forward TM Big Site, Big Waterfall 1600x120 0
©2012 Akamai Faster Forward TM Small Site, Big Waterfall 320x480
©2012 Akamai Faster Forward TM Download and Hide Rich Side-bar, holds ads and more Display set to none
©2012 Akamai Faster Forward TM Hidden content is still downloaded Display set to none, resources are still downloaded! Hidden background Images are not!
©2012 Akamai Faster Forward TM Download and Shrink Smaller Screen, Same Size Image
©2012 Akamai Faster Forward TM Media queries don’t prevent CSS downloads Separate CSS per media 320x480 “Wrong” CSS loaded -Possibly deferred to just before onload -WebKit Bug 3945539455 -Conditions may change (e.g. rotate device) -Scripts may use it basic.css mobile.css desktop.css “Right” CSS loaded
©2012 Akamai Faster Forward TM Excess DOM 320x4801600x1200 Simplicity not reflected in DOM 1402 elements 3485 nodes 1398 elements 3491 nodes
©2012 Akamai Faster Forward TM Download and Hide Download and Shrink Extra CSS Download Excess DOM RWD Woes
Akamai Confidential What Can We Do About It?!
©2012 Akamai Faster Forward TM Images accounts for most mobile pages size Stats from http://mobile.httparchive.com/http://mobile.httparchive.com/
©2012 Akamai Faster Forward TM Responsive Images 128px, 2.9 KB 240px, 6.8 KB 320px, 10.6 KB 480px, 21.3 KB Full Res, 50.1 KB Site: lonelyplanet.com Device: iPhone 4 Before: 867 KB After: 570 KB
©2012 Akamai Faster Forward TM Responding Up (or badly?) ipad_hero.jpg 113 KB Served to Desktop ipad_hero_2x.jpg 360 KB Served to New iPad
©2012 Akamai Faster Forward TM Standardizing Responsive Images @srcset VS. https://github.com/scottjehl/picturefill
©2012 Akamai Faster Forward TM Responsive Images Responsive Images = Serve lower res images to smaller screens Optionally load full res image in the background Lots of great resources on how to do it Cloud Four blog - EducationCloud Four blog Sencha.io Src – Free Server-Side Image ResizingSencha.io Src https://github.com/scottjehl/picturefill - Client-Side Selectorhttps://github.com/scottjehl/picturefill Responsive images apply to CSS too! Especially to background images
©2012 Akamai Faster Forward TM Load Images via CSS Full Details: http://timkadlec.com/2012/04/media-query-asset-downloading-results/ http://timkadlec.com/2012/04/media-query-asset-downloading-results/
©2012 Akamai Faster Forward TM Don’t forget the “regular” concerns Reduce HTTP requests Consolidate Files Inline tiny files Reduce bytes Minify CSS/JS Use Lossless Compression for Images Load visible content first Defer everything else Or Load it on demand Avoid CSS Imports …
©2012 Akamai Faster Forward TM Now you can be Responsive AND Fast!
©2012 Akamai Faster Forward TM Measure! Mobitest Online service: http://mobitest.akamai.com/ http://mobitest.akamai.com/ Install local open-source version (details)details Google’s Pcapperf Convert network capture to waterfall charts http://pcapperf.appspot.com/ Stoyan Stefanov’s “icy” HTTP insight into iOS HTTP requests https://github.com/stoyan/icy @firt’s iWebInspector Remote debugger for iOS simulator http://www.iwebinspector.com/ 55
©2012 Akamai Faster Forward TM Testing different screen dimensions Run webpagetest script with resizing Use Chrome as agent (not supported on other browsers) Sample script (tab delimited): setviewportsize320480 navigatehttp://bdconf.org/ Many other scripting options:https://sites.google.com/a/webpagetest.org/docs/using- webpagetest/scriptinghttps://sites.google.com/a/webpagetest.org/docs/using- webpagetest/scripting Figure out the viewport dimensions you want to simulate http://www.websitedimensions.com/
Akamai Confidential Summary
©2012 Akamai Faster Forward TM Summary Choosing your mobile design is HARD There are many factors to consider Design Decision have Performance Implications Mdot Primary Concern: Redirects RWD Primary Concern: Over-Downloading Either design paradigm can be made fast Performance should be built in – not bolted on Measure! Make perf testing a part the core functionality test
Akamai Confidential Performance Implications of Mobile Design Questions? Guy Podjarny @guypod email@example.com http://guypo.com/
PERFORMANCE ENHANCEMENT IN ASP.NET By Hassan Tariq Session #1.
Responsive Web Designing Using CSS3 & HTML5 -Sandip Jadhav “We are building a web, for all device ”
Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® Copyright 2012 Adobe.
1 Company Confidential Need a Mobile DotNetNuke Site? Get One the Quick and Easy Way Using CSS Media Queries Amelia Marschall Partner & Creative Director.
Responsive Web Design Design websites so that they can adapt to different devices seamlessly. Image by Muhammed RafizeldiMuhammed Rafizeldi.
IF STARBUCKS USED INSTART LOGIC, THEY WOULD HAVE A FASTER RESPONSIVE WEBSITE BY PETER BLUM.
WDV 331 Dreamweaver Applications Designing Websites for Mobile Devices Dreamweaver CS6 Chapter 11.
Layouts with CSS Web Design – Section 4-12 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 12: Building Responsive Webpages.
LESSON 15 – UNIT 0 ADAPTING YOUR WEB SITE FOR MOBILE DEVICES.
DEVELOPING FOR MOBILE Jackie Calapristi. AGENDA Why you should go mobile Mobile Design Options Responsive Design Tips & Tools to Help You Build.
Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen.
© 2012 DigitalDay | Mobile Development March 29,
CIT 256 Mobile Web Development Dr. Beryl Hoffman.
RESPONSIVE AND MOBILE DESIGN BY: CHRIS PASQUARETTE APRIL, 2013.
WHAT'S THE DIFFERENCE BETWEEN A WEB APPLICATION STREAMING NETWORK AND A CDN? INSTART LOGIC.
Coding a Responsive HTML Lydia Roberts Consultant/Web Designer HighRoad Solution.
Mr. Justin “JET” Turner CSCI 3000 – Fall 2015 CRN Section A – TR 9:30-10:45 CRN – Section B – TR 5:30-6:45.
GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development.
Designing for the Unknown. Challenges of Web Design As frustrating as it may be – there is no guarantee that people will see/experience your web pages.
RESPONSIVE DESIGN Sources: Kadlec, T. (2012). Implementing responsive design. Berkeley, California: New Riders Publishing. MarcotteMarcotte, E. (2010).
Chapter 8 More on Links, Layout, and Mobile Copyright © 2013 Terry Ann Morris, Ed.D revised by Bill Pegram, 9/24/
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Textbook to be published by Pearson Ed in early Bootstrap.
Putting Performance Best Practices Together to Create the Perfect SPA Chris Love2Dev.com.
Responsive Wed Design : An Emerging Technology Archana Jain.
Chapter 6 Positioning Objects with CSS and Tables.
Lloyd-Jamie Bennett – P Stylianos Michael – P
BY BOHYUN KIM PRESENTED BY: RITHYA LATH Responsive Web Design, Discoverability, and Mobile Challenge.
1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights
Basic Responsive Design Techniques. Let’s take a look at this basic layout. It has a header and two columns of text, in a box that is centered on the.
Responsive Design What it is and why you need it.
Responsive Web Design Sheri German, Instructor Montgomery College.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
Mobile Web Development Strategies Best Practices Performance Tips.
RESPONSIVE WEB DESIGN NYU Webmaster Meetup, October 3 rd, 2014.
Being Responsibly Responsive Jason
©2013 AKAMAI | FASTER FORWARD TM It's all about Performance Measured and Perceived Performance on Desktop and Mobile Devices San Mateo Meetup, July 2013.
Session 1 SESSION 1 Working with Dreamweaver 8.0.
Internet Explorer 10 IE9 hardware-accelerated platform CSS 2D Transforms CSS Backgrounds & Borders CSS Color CSS Fonts CSS Media Queries CSS Namespaces.
Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.
Week 8 – Part 3 More on Links, Layout, and Mobile Key Concepts 1.
Putting the Network to Work Manish Vachharajani Senior Architect, F5 Networks.
Responsive Web Design (RWD) MIS 3502, Spring 2016 Jeremy Shafer Department of MIS Fox School of Business Temple University 2/11/2016.
Mobile at USC Common Solutions Group University of Minnesota, June 2011.
Building Fast 3rd-Party Webapps O'Reilly Velocity Web Performance and Operations Conference 24 June Lessons.
Restricted © Siemens AG All rights reserved A Developer’s Insights Into Performance Optimizations for Mobile Web Apps CT DC AA EM LP2 | June 2015.
Style Sheets for Print and Mobile Media Types Supplemental Material.
A “new-ish” web design methodology Addresses growing number of Internet devices Tailored experience to any device Limits resizing, panning.
Enhance Your Page Load Speed And Improve Traffic.
© 2017 SlidePlayer.com Inc. All rights reserved.