• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Step by Step Mobile Optimization
 

Step by Step Mobile Optimization

on

  • 7,220 views

(A presentation given at Velocity Conference, London 2012) ...

(A presentation given at Velocity Conference, London 2012)

Mobile Optimization is complicated, and there’s no single silver bullet. Many different bottlenecks take their toll along the way, and while some have a huge impact, others still add up. In this presentation, we’ll take a website and optimize it step by step. In each step we’ll touch on a problem, discuss how to solve it – perhaps in multiple ways – and show the effect of the solution. In the process, we’ll also touch on topics such as measuring mobile performance, differences between browsers, and which pitfalls are common

Statistics

Views

Total Views
7,220
Views on SlideShare
7,022
Embed Views
198

Actions

Likes
25
Downloads
186
Comments
0

11 Embeds 198

http://tech.m6web.fr 96
https://twitter.com 78
http://kred.com 6
http://localhost 5
http://websitesimulator.com 3
http://pinterest.com 2
https://si0.twimg.com 2
http://bottlenose.com 2
http://local.tryghost.org 2
http://instacurate.com 1
http://leed.galsungen.net 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • http://www.webpagetest.org/result/120921_8cd1f274aa7b958fee1b5a661dd51c53/
  • http://www.webpagetest.org/result/120921_8cd1f274aa7b958fee1b5a661dd51c53/
  • http://www.webpagetest.org/result/120923_931cc33e267a396623e8b2a73a7e6899/
  • http://www.webpagetest.org/result/120923_931cc33e267a396623e8b2a73a7e6899/
  • http://www.webpagetest.org/result/120923_931cc33e267a396623e8b2a73a7e6899/
  • Mobile: http://www.webpagetest.org/result/120923_07169161eb2055f79de620d6ea0e35cf/Desktop: http://www.webpagetest.org/result/120924_4N_951c2812948674c8d86d55988c2f318b/
  • http://www.webpagetest.org/result/120924_4774b4d2c8c04c1bf8da2d1107ab82fb/
  • http://www.webpagetest.org/result/120924_9fc90ade1aaf50641326f591c0a4225b/
  • http://www.webpagetest.org/result/120924_9fc90ade1aaf50641326f591c0a4225b/
  • http://www.webpagetest.org/result/120924_a65cb6638bec7386f6f67214e3b553c5/
  • http://www.webpagetest.org/result/120924_6ad62427f7bb87acc5ce7ef7de922b55/
  • http://www.webpagetest.org/result/120924_714a05fe5454c1999f435370ff0db47c/
  • Before: http://www.webpagetest.org/result/120921_8cd1f274aa7b958fee1b5a661dd51c53/After: http://www.webpagetest.org/result/120924_99ff4b412d5b162ee6c27a4649f8821e/Compare:
  • http://www.webpagetest.org/video/compare.php?tests=120925_41b25ecaa0a1e540b1faf96f2592edce-r%3A4-c%3A0&thumbSize=200&ival=1000&end=doc
  • http://timkadlec.com/2012/04/media-query-asset-downloading-results/http://www.stevesouders.com/blog/2010/02/12/5e-speculative-background-images/
  • http://timkadlec.com/2012/04/media-query-asset-downloading-results/
  • http://www.webpagetest.org/result/120925_56dd6ec22be26f2dc82780b14a905941/
  • Chrome: http://www.webpagetest.org/result/120926_9E_f45fd32b410326f282117d78f706afb4/

Step by Step Mobile Optimization Step by Step Mobile Optimization Presentation Transcript

  • Step By Step Mobile OptimizationGuy Podjarny@guypodhttp://www.guypo.com/ Akamai Confidential
  • Agenda• Review Primary Tools• Introduce Demo Mobile Site• Optimize Site in 5 steps • Describe a problem • Show its impact • Discuss the cause • Try out one or more solutions• Summary• Q&A Faster ForwardTM ©2012 Akamai
  • Disclaimers• Performance Numbers are never perfect • Numbers vary widely for any given website • In this deck, the numbers are helpers, not absolutes• This presentation focuses on Mobile • Focus is on problems more common in Mobile websites • I’m intentionally not tackling common Front-End Optimization• This presentation focuses on dedicated Mobile websites • I won’t be discussing Responsive Web Design (RWD) here • If you want to learn about RWD performance, come back tomorrow Faster ForwardTM ©2012 Akamai
  • Faster ForwardTM The Tools ©2012 Akamai
  • Waterfall Chart Doc Complete,Waterfall Resource (a.k.a. onload,Chart (Request/Response) Start Render Load Time) Faster ForwardTM ©2012 Akamai
  • WebPageTest • Free Perf Measurement Tool • www.webpagetest.org • Open Source • Can be privately installed • Desktop Browsers • IE 6-9, Chrome, Firefox • Uses Traffic Shaping • Over faster networks Faster ForwardTM ©2012 Akamai
  • “Mobile”-izing WebPageTest with Scripts• Use Chrome or Firefox as agent • Chrome more similar to real mobile browsers• Resize window to smartphone size • setviewportsize 320 480 • No way to fake a Retina display• Fake a smartphone user-agent • setUserAgent <Some-Smartphone-UA> • Doesn’t update navigator.userAgent• Navigate to the relevant site… • navigate http://www.your-site.com/ Faster ForwardTM ©2012 Akamai
  • Akamai Mobitest• Free Mobile Web Perf Measurement Tool • http://mobitest.akamai.com/• Open-Source • http://bit.ly/open-source-mobitest• Mobile Browsers • iOS, Android• No Traffic Shaping• Builds on WebPageTest • Can share a single server Faster ForwardTM ©2012 Akamai
  • iOS 6 Network Link Conditioner – On Device! How to Enable: http://www.neglecte dpotential.com/201 2/09/ios6-network- link-conditioner/ Faster ForwardTM ©2012 Akamai
  • Introduction: SLowe’s Commerce• Demo eCommerce application • with dedicated Mobile site• Built on Magento • Took the Magento Demo Site • Made some slight modifications Faster ForwardTM ©2012 Akamai
  • Initial Waterfall Chart• URL: www.slowes.org• Device: iPhone 4• OS: iOS 6• Speed: 3G • Apple’s Definition • Throttled with Network Link Conditioner Faster ForwardTM ©2012 Akamai
  • Initial Filmstrip• 16 seconds to start render• 18 seconds to “Visually Complete” Faster ForwardTM ©2012 Akamai
  • • Slide about redirects, maybe an eschel drawing?Step 1:Redirects Faster ForwardTM ©2012 Akamai
  • JavaScript Redirect - The Good mobileDetect.js:• Client-side browser detection• Easy to deploy • Compared to server changes• “Future Friendly” • Can test screen width alongside UAs Faster ForwardTM ©2012 Akamai
  • Client-Side Detection Often RecommendedNokia:Mobify: Faster ForwardTM ©2012 Akamai
  • JavaScript Redirect – The Bad• Slow! • Redirect only happens after JS is downloaded and executed• Unnecessary download of other resources • Some above the JS in the HTML • Some downloaded early by speculative parser Faster ForwardTM ©2012 Akamai
  • JS Redirect => HTTP RedirectmobileDetect.js Apache CDN Fallback: Inline Script on Desktop page CMS/App Server Faster ForwardTM ©2012 Akamai
  • Optimization Results - Waterfall• Real page starts loading after ~1.5 secs vs 5.5 secs • ~4 Seconds saved• No downloading of excess CSS and JS• All Good: Less requests, less bytes, less delay Faster ForwardTM ©2012 Akamai
  • Optimization Results - Visual• ~5 seconds acceleration to start render Faster ForwardTM ©2012 Akamai
  • Merging Redirect Chains Only one redirect• Combine all redirects to one redirect• Requires combining Application and Mobile logic Mobile Logic ^/(?:magento/)?(.*) /magento/ Application Logic Faster ForwardTM ©2012 Akamai
  • Avoiding Redirects: Serving Client-Specific HTML• Instead of redirecting, return client-aware HTML • Same URL returns HTML by client • Caution: Caching appliances & CDNs must be tuned • Requires consistent paths across all variations No Redirect Faster ForwardTM ©2012 Akamai
  • Step 1: Conclusions• Redirects have a real cost • Especially in high latency mobile networks• HTTP Redirects are much faster than JS Redirects • Use HTTP Redirects • Use JS Redirects as backup only• 1 Redirect is faster than… more than 1 redirect • Merge redirect chains whenever possible• No redirects are faster than even 1 redirect! • Consider serving different HTML to different clients on one site Faster ForwardTM ©2012 Akamai
  • Step 2:Faster ForwardTM Compression ©2012 Akamai
  • Lack of HTTP Compression (Gzip) 160 KB (!!!)No Gzip Faster ForwardTM ©2012 Akamai
  • Solution: Apply Compression• Gzip compression built into most elements in the stack • App Server, Web Server, Load Balancer, CDN… Faster ForwardTM ©2012 Akamai
  • Compression matters more on Mobile!• Mobile websites have less images • JS & CSS account for more of the bytes • Therefore, more of the bytes is compressible • Therefore, compression matters more on Mobile.• (Practically) all mobile browsers support compression • Kinda true on desktop these days• Download bandwidth on mobile is smaller than broadband• Latency on mobile is higher on broadband Faster ForwardTM ©2012 Akamai
  • TCP Slow Start (diagrams from John Rauser) Early TCP Slow Start Delayed ACK Max Packet Size: 1460 byteshttp://velocityconf.com/velocity2010/public/schedule/detail/11792 Faster Forward TM ©2012 Akamai
  • TCP Slow Start (diagrams from John Rauser) • Time to deliver ~72KB: • Fiber (4ms RTT): ~24ms • DSL (50ms RTT): ~300ms • 3G (200ms RTT): 1.2 seconds (!!!) • Time to deliver ~300KB: • Fiber (4ms RTT): ~40ms • DSL (50ms RTT): ~500ms • 3G (200ms RTT): 2 seconds (!!!) • Slow-Start is per connectionhttp://velocityconf.com/velocity2010/public/schedule/detail/11792 Faster Forward TM ©2012 Akamai
  • Step 2: Conclusions• Compression is a critical optimization• Easy to implement, especially in Mobile • All mobile browsers (that you care about) support it• Especially important on Mobile • Compressible content (JS,CSS…) accounts for a bigger part of the page • High latency makes large download slow • High packet loss makes large downloads unbearable Faster ForwardTM ©2012 Akamai
  • Step 3: Consolidation Faster ForwardTM ©2012 Akamai
  • Step 3: Fragmented JS/CSS Files 2 CSS Files 16 JS Files Faster ForwardTM ©2012 Akamai
  • Step 3: Consolidate CSS & JS Files Faster ForwardTM ©2012 Akamai
  • Step 3: Consolidate JS/CSS Files - VisualFragmentedConsolidated Consolidation made it worse! Faster ForwardTM ©2012 Akamai
  • Consolidated vs. Fragmented - Test • 1 consolidated script • ~1 MB in size• 10 scripts, with IDs from 1 - 10• Each script weights ~100 KB• Each script ends with: • document.write(Processed file ID @, time is + new Date()); Faster ForwardTM ©2012 Akamai
  • Consolidated vs. Fragmented - Result Consolidated FragmentedFragmentedConsolidated Starts painting ~5 seconds earlier! Faster ForwardTM ©2012 Akamai
  • Consolidation & Progressive Processing• Browsers only process JavaScript & CSS when fully loaded • Unlike HTML, which is processed (roughly) as soon as it arrives• Consolidation delays the first script execution, CSS evaluation • Especially with many scripts of varying sizes • Possibly not always true for CSS• This means Consolidation often delays dynamic requests • Generated by scripts, thus not seen until execution • Often results in a slower page• Making consolidating “streaming” is doable, but hard • http://www.guypo.com/uncategorized/consolidation-not-simple-addition/ Faster ForwardTM ©2012 Akamai
  • Step 3a: Async Scripts• Defer external script execution to onload • Often useful to defer download as well!• Replace dependent inline scripts with event handlers • Invoked in “onload” of appropriate external script • No need to touch inline scripts with no dependencies• Complications: • Scripts required for basic page functionality • Scripts that use document.write() • 3rd party scripts (you don’t know what they use…)• Complications not as common in simpler mobile websites Faster ForwardTM ©2012 Akamai
  • Step 3a: Simulation – remove combined.js No Visual Difference! Faster ForwardTM ©2012 Akamai
  • Step 3: Conclusions• Consolidation is good and bad • Good: Reduces roundtrips • Bad: Hurts caching, progressive processing• Consolidate with Care • Merge small files together, especially if functionally related • If you can, use Adaptive and Streaming Consolidation • http://www.guypo.com/uncategorized/consolidation-not-simple-addition/• Procrastinate - Defer as much as you can • Often easier to do on Mobile websites• Measure!!! Faster ForwardTM ©2012 Akamai
  • Step 4:Faster ForwardTM Retina Images ©2012 Akamai
  • Retina Images bg_header_retina.png – 56 KB 1 2 3 4 bg_header.png – 14KB Faster ForwardTM ©2012 Akamai
  • Lossless Image Compression • “Image Minification”Retina: • Sheds bytes without reducing quality • Sample techniques: • Remove Geo data • Remove Histogram dataRegular: • Remove unused colors • Replace GIF with PNG-8 • … Faster ForwardTM ©2012 Akamai
  • Lossy Image Compression• Reduce quality without hurting User Experience• For Desktop, reduce to high-end screen resolution• For Mobile, reduce to display size & resolution • Known as “Responsive Images” Image Origina Lossless “Desktop” Reduce to Reduce to l Compression Resolution 320px wide 128px wide Retina 56KB 48.2KB (14%) 26.6KB (53%) 6.8 KB (88%) 2.2KB (96%) Regula 14KB 11.5KB (18%) 7KB (50%) 7KB (50%) 2.2KB (85%) r Faster ForwardTM ©2012 Akamai
  • Responsive Images 128px, 240px, 6.8 KB 2.9 KB 320px, 10.6 KB 480px, 21.3 KBSite:lonelyplanet.comDevice:iPhone 4Before:867 KBAfter:570 KB Full Res, 50.1 KB Faster ForwardTM ©2012 Akamai
  • Standardizing Responsive Images @srcset <picture> https://github.com/scottjehl/picturefill Faster Forward TM ©2012 Akamai
  • Responsive Images - Summary• Smaller screens don’t benefit from high quality images• Solution: Respond to screen size by reducing image quality• Screen size detection usually done on client side • But same technique can be used on server-side • Examples: Sencha.io Src (Free), Akamai EIM (Commercial)• Don’t forget CSS background images! • Implementation is easier – with a few catches we’ll discuss later…• Optional: Lazy-load higher quality images • May defer them to onload • May load them on demand Faster ForwardTM ©2012 Akamai
  • Step 4a: Banner Image Compression impactNo ImageOptimization:LossyCompression:No RetinaImage: Faster ForwardTM ©2012 Akamai
  • Step 4: Conclusions• Mobile screen size & resolution are an opportunity & a threat • Opportunity: Reduce bytes on smaller screens • Threat: Using Retina images broadly• Lossless Image Compression should be a given • No trade-offs, just do it.• Lossy Comp/Responsive Images avoid excessive quality • Avoid images too big for a user to appreciate (on this device) • Optionally load low quality images first, high quality images at onload• Measure!!! • Show your designers the UX impact of every image quality change Faster ForwardTM ©2012 Akamai
  • iPhone Optimization: Summary Faster ForwardTM ©2012 Akamai
  • Interim Summary - Actions• Step 1: Improved Redirects • Replaced JS Redirect with HTTP Redirect • Merged redirect chains• Step 2: Applied HTTP Compression• Step 3: Consolidated JavaScript and CSS files • Async’d JavaScript files too• Step 4: Compressed Images • Lossless Compression • Lossy Compression • No Retina Images Faster ForwardTM ©2012 Akamai
  • Interim Summary - Acceleration Browsing www.slowes.org (including app redirect) Faster ForwardTM ©2012 Akamai
  • Step 5:Android Faster ForwardTM ©2012 Akamai
  • Testing on Android• No network Throttling on-device • iOS had the same problem until a few weeks ago (with iOS 6)• Alternative: Tether to laptop, throttle there • Instructions on how to tether: http://pcapperf.appspot.com/ • Unfortunately, newer Androids can’t connect through laptop• Realistic alternative: Test w/out throttling • No 3G load times, but can find interesting data in Waterfall chart • Use Real User Measurement to monitor real world numbers • Use Mobitest for Android Browser, Remote Debugging for Chrome Faster ForwardTM ©2012 Akamai
  • Step 5: Android Test 22 files Strange gap (vs. 14 (~200 ms) oniPhone) # Connections Limit Both Retina & regular reqs Faster ForwardTM ©2012 Akamai
  • Duplicate Requests on Android – Tim Kadlec’s Testhttp://timkadlec.com/2012/04/media-query-asset-downloading-results/ Faster Forward TM ©2012 Akamai
  • Duplicate Requests on Android – Slowe’s … … Faster ForwardTM ©2012 Akamai
  • Duplicate Requests - Solution• One solution works (almost) everywhere… • As long as you support media queries… Faster ForwardTM ©2012 Akamai
  • Step 5a: Eliminate Duplicate Requests - Results Faster ForwardTM ©2012 Akamai
  • Android Mind the Gap…• Theories Strange gap • It’s the weak mobile device… (~200 ms) • But it doesn’t happen on iPhone! Chrome • It’s the old Android browser… • Harder to test Chrome for Android • Let’s test with desktop Chrome • Ok, let’s test on Chrome for Android… • Using Remote Debugging Chrome for Android • https://developers.google.com/chrome /mobile/docs/debugging • On Nexus 7 Tablet, No gap! Faster ForwardTM ©2012 Akamai
  • Problem: Translate3D combined.css“The translate3d() CSS functionmoves the position of theelement in the 3D space. Thistransformation is characterizedby a 3-dimension vector whosecoordinates define how much itmoves in each direction” Faster ForwardTM ©2012 Akamai
  • Step 5b: Remove translate3d callsChrome Android Gap a tiny bit smaller (~170 ms) • Results on iPhone, Nexus Tablet remain unchanged • Issue seems to occur only when Hardware Acceleration is not supported Faster ForwardTM ©2012 Akamai
  • Step 5: Conclusions• Not all (mobile) browsers/devices are the same • Even if they’re WebKit based• Don’t optimize things you’re not doing • Especially if you’re using hacks to do the optimization• Say it with me: MEASURE!!! • In Mobile, you have to test on multiple devices • Android devices vary by OS Version, OEM, device… • Use analytics to find your top clients, Faster ForwardTM ©2012 Akamai
  • Use Analytics to determine YOUR top devices Google Analytics Faster ForwardTM ©2012 Akamai
  • Summary• Summary Faster ForwardTM ©2012 Akamai
  • What have we done?• We optimized one home page in 5 steps: • Step 1: Redirect Optimization • Step 2: HTTP Optimization • Step 3: JS/CSS Optimization • Step 4: Image Optimization • Step 5: Cross-Device Optimization• We MEASURED during each step • Assuming less-than-stellar network conditions• We made the page ~5x faster Faster ForwardTM ©2012 Akamai
  • Manual FEO Original Optimized Original Original Original Original Original OriginalOriginal Faster ForwardTM ©2012 Akamai
  • Automated FEO Pixie Dust Slow, Web Generic HTMLServer• Automates much of the optimization process • Can’t fix everything, but can save a lot of effort• Doesn’t replace performance awareness * Visual from • For example, measuring… Patrick Meenan Faster ForwardTM ©2012 Akamai
  • Final Words• A mobile page with few images != A fast page• Mobile Site Common Pitfalls: • Slow and repeated redirects • Excess JavaScript & CSS• Mobile Site Opportunities: • Reduce image size: Smaller Screen • Defer JS: Simpler content can be visually complete without it• Measuring Is Critical • Test on different devices and browsers • Should be built into QA & Build System regression tests Faster ForwardTM ©2012 Akamai
  • Thank You! Questions? Step By Step Mobile OptimizationGuy Podjarny@guypodhttp://www.guypo.com/ Akamai Confidential