Más contenido relacionado La actualidad más candente (18) Similar a Step by Step Mobile Optimization (20) Step by Step Mobile Optimization1. Step By Step Mobile Optimization
Guy Podjarny
@guypod
http://www.guypo.com/ Akamai Confidential
2. 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
3. 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
5. Waterfall Chart
Doc Complete,
Waterfall Resource
(a.k.a. onload,
Chart (Request/Response)
Start Render Load Time)
Faster ForwardTM ©2012 Akamai
6. 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
7. “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
8. 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
9. 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
10. 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
11. 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
12. Initial Filmstrip
• 16 seconds to start render
• 18 seconds to
“Visually Complete”
Faster ForwardTM ©2012 Akamai
13. • Slide about redirects, maybe an eschel drawing?
Step 1:
Redirects Faster ForwardTM ©2012 Akamai
14. 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
16. 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
17. JS Redirect => HTTP Redirect
mobileDetect.js Apache
CDN
Fallback:
Inline Script on Desktop page CMS/App Server
Faster ForwardTM ©2012 Akamai
18. 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
20. 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
21. 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
22. 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
24. Lack of HTTP Compression (Gzip)
160 KB (!!!)
No Gzip
Faster ForwardTM ©2012 Akamai
25. Solution: Apply Compression
• Gzip compression built into most elements in the stack
• App Server, Web Server, Load Balancer, CDN…
Faster ForwardTM ©2012 Akamai
26. 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
27. TCP Slow Start (diagrams from John Rauser)
Early TCP Slow Start Delayed ACK
Max Packet Size: 1460 bytes
http://velocityconf.com/velocity2010/public/schedule/detail/11792
Faster Forward
TM
©2012 Akamai
28. 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 connection
http://velocityconf.com/velocity2010/public/schedule/detail/11792
Faster Forward
TM
©2012 Akamai
29. 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
33. Step 3: Consolidate JS/CSS Files - Visual
Fragmented
Consolidated
Consolidation made it worse!
Faster ForwardTM ©2012 Akamai
34. 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
35. Consolidated vs. Fragmented - Result
Consolidated Fragmented
Fragmented
Consolidated
Starts painting ~5
seconds earlier!
Faster ForwardTM ©2012 Akamai
36. 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
37. 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
38. Step 3a: Simulation – remove combined.js
No Visual
Difference!
Faster ForwardTM ©2012 Akamai
39. 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
41. Retina Images
bg_header_retina.png – 56 KB
1 2
3 4
bg_header.png –
14KB
Faster ForwardTM ©2012 Akamai
42. Lossless Image Compression
• “Image Minification”
Retina: • Sheds bytes without
reducing quality
• Sample techniques:
• Remove Geo data
• Remove Histogram data
Regular: • Remove unused colors
• Replace GIF with PNG-8
• …
Faster ForwardTM ©2012 Akamai
43. 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
44. Responsive Images
128px,
240px, 6.8 KB 2.9 KB
320px, 10.6 KB
480px, 21.3 KB
Site:
lonelyplanet.com
Device:
iPhone 4
Before:
867 KB
After:
570 KB Full Res, 50.1 KB
Faster ForwardTM ©2012 Akamai
46. 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
47. Step 4a: Banner Image Compression impact
No Image
Optimization:
Lossy
Compression:
No Retina
Image:
Faster ForwardTM ©2012 Akamai
48. 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
50. 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
51. Interim Summary - Acceleration
Browsing www.slowes.org (including app redirect)
Faster ForwardTM ©2012 Akamai
53. 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
54. Step 5: Android Test
22 files
Strange gap
(vs. 14 (~200 ms)
on
iPhone)
# Connections
Limit
Both Retina &
regular reqs
Faster ForwardTM ©2012 Akamai
55. Duplicate Requests on Android – Tim Kadlec’s Test
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Faster Forward
TM
©2012 Akamai
57. Duplicate Requests - Solution
• One solution works (almost) everywhere…
• As long as you support media queries…
Faster ForwardTM ©2012 Akamai
59. 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
60. Problem: Translate3D
combined.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”
Faster ForwardTM ©2012 Akamai
61. Step 5b: Remove translate3d calls
Chrome 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
62. 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
63. Use Analytics to determine YOUR top devices
Google Analytics
Faster ForwardTM ©2012 Akamai
65. 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
66. Manual FEO
Original Optimized
Original
Original
Original
Original
Original
Original
Original
Faster ForwardTM ©2012 Akamai
67. Automated FEO Pixie Dust
Slow,
Web Generic HTML
Server
• 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
68. 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
69. Thank You!
Questions?
Step By Step Mobile Optimization
Guy Podjarny
@guypod
http://www.guypo.com/ Akamai Confidential
Notas del editor 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/