Step by Step Mobile Optimization

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

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

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

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

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

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

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) • 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

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

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 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

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 - 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 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

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

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

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

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

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

https://twitter.com	68
http://tech.m6web.fr	59
http://kred.com	6
http://websitesimulator.com	3
http://bottlenose.com	2
http://pinterest.com	2
https://si0.twimg.com	2
http://instacurate.com	1

Step by Step Mobile Optimization

by guypod on Oct 03, 2012

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 143

Statistics

Step by Step Mobile Optimization Presentation Transcript