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
©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: Open Source Agent (Google Code Project)Google Code Project For more details:
©2012 Akamai Faster Forward TM Who Am I #3: Mobile Performance Researcher
©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
©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
©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
©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 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! 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 2 redirects + JS Redirect, 3 seconds lost
©2012 Akamai Faster Forward TM Could get nasty 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 (Mobile Web Designer): “Expand window until it looks like crap. Time to insert a 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 Testing Methodology: Use 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 320x x120 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 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 320x x1200 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
©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 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:
©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: Install local open-source version (details)details Google’s Pcapperf Convert network capture to waterfall charts Stoyan Stefanov’s “icy” HTTP insight into iOS HTTP requests iWebInspector Remote debugger for iOS simulator 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): setviewportsize 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
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
The Render Chain And You Joseph Morrissey – Matt Ringel –
Microsoft ® Office Training Get up to speed with the 2007 system Cecil County Government IT Department presents:
©2013 AKAMAI | FASTER FORWARD TM It's all about Performance Measured and Perceived Performance on Desktop and Mobile Devices San Mateo Meetup, July 2013.
Presented by: Mrs. Roopa Mathur, Ph.D. Professor, School of Business Sciences, Computer Information Management (CIM) Irvine.
Best Practices for Speeding Up Your Web Site 1.
Microsoft ® Office Excel ® 2007 Training Get up to speed [Your company name] presents:
Lori Neff Senior Consultant, Inetium 6/14/2008. Topics Considerations for Architecture Navigation Reusable Content Master pages Styling Login Pages Page.
© 2009 Wellesley Information Services. All rights reserved. A comprehensive guide to SAP NetWeaver Visual Composer Dr. Bjarne Berg.
Section Goals Understand Tables Know how to create, edit, and use Tables Investigate ‘nesting’ Tables Be able to format Tables.
What is an Operating System? A program that acts as an intermediary between a user of a computer and the computer hardware. Operating system goals: Execute.
Business Objects Web Intelligence Business Objects Web Intelligence.
Web site design incubation Thomas Krichel LIU & НГУ
“Official” binary from Google Supported by Google Google branding Automatic updates Browser used in Google Chrome OS Code released under BSD license as.
LIS650lecture 2 XHTML 1.0 strict Thomas Krichel
LIS650 lecture 1 Thomas Krichel Administrative stuff Get your grade at des/secret.html where.
Version 4.1 CCNA Discovery 2– Chapter 7. Contents 7.1: ISP Services : TCP / IP Protocols 7.2: 7.3: DNS 7.3: 7.4: Application Layer Protocols 7.4.
Business Objects For Power Users BI_BOBJ_300. Course Content This course focuses on how to run, modify, and create a Business Objects report, including.
General web design Thomas Krichel assessment You return a two-page typed assessment on a library and information science department web site.
Make Drupal Run Fast increase page load speed
1 GREY BOX TESTING Web Apps & Networking Session 3 Boris Grinberg
Brian Browning | Senior Director of Client Services Jason Arden | Director of Partner Engineering.
LIS650 lecture 3 CSS positioning & site architecture Thomas Krichel 2009–02–08.
LIS650 lecture 3 Web site design Thomas Krichel
Coding a Responsive HTML Lydia Roberts Consultant/Web Designer HighRoad Solution.
LIS650 lecture 3 CSS layout & site architecture Thomas Krichel
Social Web Design 1 Darby Chang Social Web Design & Research.
.. Tip 1: Shuffling Through Program Windows Tip 2: Managing Your Windows Tip 3: Project Your Display With Ease Tip 4: Multi-Monitor Window Management.
Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012.
© 2016 SlidePlayer.com Inc. All rights reserved.