Step by Step Mobile Optimization

Akamai Confidential

Guy Podjarny @guypodhttp://www.guypo.com/

Step By Step Mobile Optimization

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

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

Waterfall ChartWaterfall Chart Start Render

Resource(Request/Response)

Doc Complete,(a.k.a. onload,Load Time)

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

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

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

iOS 6 Network Link Conditioner – On Device!

How to Enable:

http://www.neglectedpotential.com/2012/09/ios6-network-link-conditioner/

Introduction: SLowe’s Commerce

• Demo eCommerce application •with dedicated Mobile site

• Built on Magento•Took the Magento Demo Site•Made some slight modifications

Initial Waterfall Chart

• URL:www.slowes.org

• Device: iPhone 4• OS: iOS 6• Speed: 3G

•Apple’s Definition•Throttled with Network Link

Conditioner

Initial Filmstrip

• 16 seconds to start render• 18 seconds to

“Visually Complete”

• Slide about redirects, maybe an eschel drawing?

Step 1: Redirects

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

Client-Side Detection Often Recommended

Nokia:

Mobify:

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

JS Redirect => HTTP Redirect

mobileDetect.js Apache

Fallback:Inline Script on Desktop page

CMS/App Server

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

Optimization Results - Visual

• ~5 seconds acceleration to start render

Merging Redirect Chains

• Combine all redirects to one redirect

• Requires combining Application and Mobile logic

Mobile Logic

Application Logic

^/(?:magento/)?(.*)

Only one redirect

/magento/

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

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

Step 2: Compression

Lack of HTTP Compression (Gzip)

160 KB (!!!)No Gzip

Solution: Apply Compression

• Gzip compression built into most elements in the stack•App Server, Web Server, Load Balancer, CDN…

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

TCP Slow Start (diagrams from John Rauser)

Slow Start

Max Packet Size: 1460 bytes

http://velocityconf.com/velocity2010/public/schedule/detail/11792

Delayed ACKEarly TCP

TCP Slow Start (diagrams from John Rauser)

http://velocityconf.com/velocity2010/public/schedule/detail/11792

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

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

Step 3: Fragmented JS/CSS Files

2 CSS Files

16 JS Files

Step 3: Consolidate CSS & JS Files

Step 3: Consolidate JS/CSS Files - Visual

Consolidation made it worse!

Fragmented

Consolidated

Consolidated vs. Fragmented - Test

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

• 1 consolidated script• ~1 MB in size

Consolidated vs. Fragmented - ResultFragmentedConsolidated

Fragmented

Consolidated

Starts painting ~5 seconds earlier!

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/

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

Step 3a: Simulation – remove combined.js

No Visual Difference!

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

Step 4: Retina Images

Retina Images

bg_header_retina.png – 56 KB

bg_header.png – 14KB

Lossless Image Compression

Retina:

Regular:

• “Image Minification”• Sheds bytes without

reducing quality• Sample techniques:

•Remove Geo data•Remove Histogram data•Remove unused colors•Replace GIF with PNG-8•…

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 Original

LosslessCompression

“Desktop” Resolution

Reduce to 320px wide

Retina 56KB 48.2KB (14%) 26.6KB (53%) 6.8 KB (88%) 2.2KB (96%)

Regular

14KB 11.5KB (18%) 7KB (50%) 7KB (50%) 2.2KB (85%)

Image Original

LosslessCompression

Retina 56KB 48.2KB (14%)

Regular

14KB 11.5KB (18%)

Image Original

LosslessCompression

Retina 56KB 48.2KB (14%) 26.6KB (53%)

Regular

14KB 11.5KB (18%) 7KB (50%)

Image Original

LosslessCompression

Retina 56KB 48.2KB (14%) 26.6KB (53%) 6.8 KB (88%)

Regular

14KB 11.5KB (18%) 7KB (50%) 7KB (50%)

Responsive Images

128px, 2.9 KB240px, 6.8 KB

320px, 10.6 KB

480px, 21.3 KB

Full Res, 50.1 KB

Site:lonelyplanet.comDevice:iPhone 4Before: 867 KBAfter: 570 KB

Standardizing Responsive Images

@srcset

https://github.com/scottjehl/picturefill

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

Step 4a: Banner Image Compression impact

Lossy Compression:

No Retina Image:

No Image Optimization:

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

iPhone Optimization: Summary

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

Interim Summary - Acceleration

Browsing www.slowes.org (including app redirect)

Step 5: Android

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

Step 5: Android Test

Strange gap(~200 ms)

# Connections Limit

22 files(vs. 14

on iPhone)

Both Retina & regular reqs

Duplicate Requests on Android – Tim Kadlec’s Test

http://timkadlec.com/2012/04/media-query-asset-downloading-results/

Duplicate Requests on Android – Slowe’s

Duplicate Requests - Solution

• One solution works (almost) everywhere…•As long as you support media queries…

Step 5a: Eliminate Duplicate Requests - Results

Mind the Gap…Strange gap(~200 ms)

• Theories•It’s the weak mobile device…

•But it doesn’t happen on iPhone!•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

•https://developers.google.com/chrome/mobile/docs/debugging

•On Nexus 7 Tablet, No gap!

Android

Chrome

Chrome for Android

Problem: Translate3Dcombined.css

“The translate3d() CSS function moves the position of the element in the 3D space. This transformation is characterized by a 3-dimension vector whose coordinates define how much it moves in each direction”

Step 5b: Remove translate3d calls

Chrome

• Results on iPhone, Nexus Tablet remain unchanged•Issue seems to occur only when Hardware Acceleration is not supported

Gap a tiny bit smaller (~170 ms)

Android

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,

Use Analytics to determine YOUR top devices

Google Analytics

• Summary

Summary

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

Original

Manual FEO

Optimized

OriginalOriginal

Automated FEO

Web Server

Slow, Generic HTML

Optimize

d HTMLPixie Dust

• Automates much of the optimization process•Can’t fix everything, but can save a lot of effort

• Doesn’t replace performance awareness•For example, measuring…

* Visual from Patrick Meenan

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

Akamai Confidential

Guy Podjarny @guypodhttp://www.guypo.com/

Step By Step Mobile Optimization

Thank You!Questions?

Step by Step Mobile Optimization

Technology

testing & optimization for mobile devices

Mobile Backhaul Optimization

236 mobile optimization-cdnetworks

Step By Step Mobile Banking and Mobile Deposit Capture Final...MOBILE BANKING WITH MOBILE DEPOSIT STEP-BY-STEP 1 MOBILE BANKING WITH MOBILE DEPOSIT STEP-BY-STEP GETTING STARTED The

Mobile Web & HTML5 Performance Optimization

Optimization Problems in Mobile Comm

Mobile Optimization that Actually Works

Mobile Optimization Best Practices

Mobile Search Optimization 2016

Mobile Website Optimization

for Mobile Traffic Optimization - SEVEN Networks Open hannel™ for Mobile Traffic Optimization Open Channel is an end-to-end mobile traffic optimization solution that eliminates unnecessary

Website Optimization -SEO - Step By Step

Future Mobile Communications: LTE Optimization and Mobile ... · Future Mobile Communications: LTE Optimization and Mobile Network Virtualization submitted to the Faculty of Physics

[Share+discussion] Step by step SSD Optimization with Win 7 (Picture)

Mobile PPC Optimization

Whitepaper Mobile Site Optimization

Mobile Marketing Campaign Optimization

Mobile optimization techniques

Mike Moran step by step search optimization

Time Life Mobile Optimization V3