Download as PDF, PPTX
Uploaded byAvenga Germany GmbH
Mobile web performance dwx13
The document discusses improving mobile web performance. It notes that mobile is different than desktop due to limitations in power, memory, battery and connections on mobile devices. Sites are growing larger in size which slows performance, and users strongly prefer faster loading sites. A variety of tools can measure performance, and waterfalls charts show where time is spent loading pages between the server and client. Optimizations discussed include enabling caching, compression, image resizing, lazy loading images, inlining images and scripts where possible, minifying assets, and delivering scripts and styles in a single HTTP request through techniques like application caching.
More Related Content
Similar to Mobile web performance dwx13
Mobile web performance dwx13
- 1. mobile web performance @rolandguelle | Sevenval GmbH
- 2. about:sevenval •Web Expert since1999 Adaptive One Web Infrastructure Technology Future Friendly web design expertise Highly experienced: over 800 accomplished projects •Offices in Cologne, Berlin, London and Vienna •Our Clients: Fortune 500 and DAX companies •Our Partner: PayPal, Interone, GSI Commerce, CoreMedia, Wincor Nixdorf, T-Systems, etc.
- 3.
- 4. Who likes slowloading web sites better than fast ones? Why?
- 5. Why? Who likes slowloading web sites better than fast ones? ...you should leave now ;)
- 6. The problem with TheWeb on Mobile. Sevenval Device Lab / Android & iOS with Adobe Edge Inspect
- 7. The Web onMobile. •Mobile is mainstream •Mobile will overtake is overtaking desktop •But mobile is different!
- 8. Mobile is Di!erent •Powerfulbrowsers •CPU & GPU •Memory •Battery •Connections •Parallel downloads •Cellular vs. wifi •High latency
- 9. The Developers‘ View http://www.flickr.com/photos/nathij/3126806723 •Browser & OS & Version fragmentation • -webkit- fragmentation • HTML5 fragmentation • Thousands of devices • Transcoding browsers (Opera Mini, Amazon Silk, Nokia Express, ...) • Carrier transcoding • Upcoming Platforms (Firefox OS, Ubuntu, Tizen, BB10...) • Legacy Platforms (Symbian, Bada, BlackBerry, ...) • ...make it work!
- 10. What is Performance? http://www.flickr.com/photos/laserstars/908946494 •Latency fora single user •Capacity of the whole system •We are talking about latency here
- 11.
- 12. We ♥ FastWebsites!
- 13. What Users WantFrom Mobile? ...62% agreed that speed was the most important feature for them while browsing the mobile web, followed by ease of use (42%), more functionality (30%) and saving money and data (29%). http://business.opera.com/press/releases/mobile/brazil-feels-the-need-for-speed
- 14.
- 15. May 29, 2008 „Whenthe company (Google) trimmed the 120KB page size down by about 30 percent, the company started getting about 30 percent more map requests.“ http://news.cnet.com/8301-10784_3-9954972-7.html
- 16. •Shopzilla speed upaverage page load time from 6 seconds to 1.2 seconds. •Result: 12% increase in revenue. http://velocityconf.com/velocity2009/public/schedule/detail/7709 Your Boss ♥ Fast Websites
- 17.
- 18. „The extent ofconsumer annoyance is hardly surprising when we consider the average Briton estimates that they waste 9 minutes every day, or 2 days a year, waiting for slow websites to load.“ http://press.1and1.co.uk/xml/article?article_id=1123 http://www.flickr.com/photos/donkeyhotey/5679642883/
- 19. We waste 9 minutesa day, 2 days a year, 0.56% our lives for waiting on slow websites?!
- 20. How fast isyour site? •5 seconds •less than 5 seconds? •more than 5 seconds?
- 21. Germany Retail –Mobile – O2/iPhone July 01, 2012 - August 01, 2012 / 0:00 - midnight 18.9 sec?! Average http://www.gomez.com/germany-retail-mobile
- 22. 27.7 sec???? Average http://www.compuware.com/en_us/application-performance-management/resources/benchmarks/germanyretail-mobile-o2-iphoneDERETIRMBHPiPhone010.html Germany Retail– Mobile – O2/iPhone May 01, 2013 - June 01, 2012 / 0:00 - midnight
- 23.
- 24.
- 25. 39kB HTML 150kB JavaScript 526kBImages 27kB CSS http://mobile.httparchive.org/trends.php?s=All&minlabel=Jan+1+2013&maxlabel=Jun+15+2013#bytesHtml&reqHtml
- 26. JavaScript Frameworks Apple WWDC2012 http://vaporjs.com Don‘t use jQuery for everything...
- 27.
- 28. „...I used http://mediaqueri.es/ as arepository (471 websites) ... resized to one of 4 different screen resolutions each time ... less than 7% of websites were at least 2x smaller when loaded on the smallest screen compared to the biggest screen. Another 22% weighed between 50-90% of the large-screen page size when loaded on the smallest one, and the majority (72%) were roughly the same size on the smallest and biggest screens. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
- 29.
- 30. You can’t fixwhat you can’t measure. http://www.flickr.com/photos/tiffanyday/2929861461
- 31. Client Measuring •Client •Real Device •Simulator •User-AgentString •Test Instanz •Connection •Carrier Network •Rewriting Proxies •WiFi •Bandwith
- 32. Tools •www.webpagetest.org •Google PageSpeed Insights •https://developers.google.com/speed/ pagespeed/insights •Yahoo!YSlow •.. and thousands more out in the web – find ‘em, use ‘em! http://slideshare.net/klick_ass/mobile-web-testing-debugging-best-practices
- 33. WebPageTest.org •all waterfall chartsare made with WPT •we use an private instance •Test types: 1st view vs repeat view •Script user navigation with flow views
- 34. Understanding Waterfall Charts •Server vsClient time •Time to first byte •# Connections •# HTTP-Requests •Dependencies (Critical Path) •# Domains/Origins •Document Complete
- 35. Server vs. Client Whereto optimize?
- 36. Server vs. Client Server 17% Client 83%•Server10-30% •Client 70-90%
- 37.
- 38.
- 39.
- 40. Mobile Networks Delay Limited connections Operator Network Limitedbandwith Operator Transcoding? Internet http://www.stevesouders.com/blog/2011/09/21/making-a-mobile-connection/ http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient
- 41.
- 42.
- 43. •Consider load &render dependencies •CSS loading/parsing blocks image loading •inline JS/CSS blocks new external requests •Image/ressource loading blocks document complete Critical Path
- 44. Time to FirstByte •DNS Lookup + TCP Connection + SSL Handshake + HTTP Request + Server Processing + transfer of first TCP packet •Always critical path
- 45. Connections •DNS lookup forevery domain (and CNAMEs) •TCP handshake takes time DNS TCP handshake
- 46. HTTP Requests •The biggestproblem! •More requests, more connections •Total of 2-6 connections per domain •Each Request: Upload on slow connections •Size does matter: More content, longer downloads •Mobile specific: Download on sloooow connections
- 47. CSS loading/parsing blocksimage loading Critical Path CSS Rendering
- 48. Critical Path Image/ressource loading blocks documentcomplete font blocks document complete
- 49. Document Complete •document completeblocks onload-events •onload-events (may) block user interaction •usually trigger for unobtrusive JavaScript
- 50. Bottlenecks •The mobile Webis slooooow •Connections has delays, are slow and limited •Sites are too big •Too many requests / connections needed •Critical Path consider load & render dependencies •css blocks images •image blocks document complete •blocking JS •rendering / painting •DOM manipulation = rerendering
- 51.
- 52.
- 53.
- 54. •Enable •keep-alive •compression (gzip) /excluding images Must-Have
- 55. E!ectw/o gzip w/gzip 36% w/o keep-alive
- 56. •Image resizing •Image quality •Dependon network quality •Server Side Content Filter (Server Side Media Queries) •HTML, JavaScript & CSS Reduce Transfer Size
- 57. Browser Dependencies •<script asyncHTML5 attribute/> •Non blocking JS loader (RequireJS, LabJS, head.js, ) •Order of inline & extern scripts http://www.netmagazine.com/features/essential-javascript-top-five-script-loaders
- 58. Reduce Content •JS minifyingfor inline & external code •CSS minifying for inline & external code •switch bitmap image formats (GIF -> JPG) •JPEGs performs better than GIFs and PNGs
- 59. Reduce HTTP Requests •Inline images • Inline scripts • Inline styles • „JS pipe“
- 60. Inline Images Disabled 25of 38 requests
- 61. Inline Images Enabled 3of 16 requests
- 62. •must be <2k •mustappear only once •works in src‘ed CSS, too! (Think sprites) •for all other images: •developer enables inlining Autoinline Images
- 63. Delayed Images •unblocks documentonload •events trigger MUCH earlier •with fold-logic •„important“ images first •invisible slider images last •header first, footer last..
- 64. Low Quality Previews •Largeimages get l/q previews •preview may be inlined •Big image is loaded after onload •Looks like progressive images •Gives a complete look right from the start
- 65. •external scripts canbe cached and combined (good) •least size of script for each page (good) •many HTTP requests on first view (BAD) External Scripts
- 66.
- 67. JS „Pipe“ & ApplicationCache •All scripts are delivered in a single request per page •Minimize HTTP roundtrips •Core Scripts are stored in Application Cache •Not affected by „reload“ •Scripts still public cacheable (CDN)
- 68. only 1 request JS„Pipe“ & Application Cache
- 69. Caching •Assets are requstedon every page request •Make sure they are cacheable! First View
- 70. Caching •cache assets forever(+ cache buster) •/path/;lm=1332923272/layout.css •no sub-requests on repeat/flow views Repeat View
- 71.
- 72.
- 73. Caching? http://mobile.httparchive.org/trends.php#maxageNull http://www.stevesouders.com/blog/2012/03/22/cache-them-if-you-can/ •55% of resourcesdon’t specify a max-age value •46% of the resources without any max-age remained unchanged over a 2 week period
- 74.
- 75.
- 76. SPDY •SPDY for SSLenabled by default •SPDY = „HTTP Super Pipelining“ •We don‘t advertise SPDY for HTTP (its slower) •Reduces TCP connections, roundtrips, slow starts http://research.microsoft.com/pubs/170059/A%20comparison%20of%20SPDY%20and%20HTTP%20performance.pdf
- 77. Even More? •Fast clickson touch devices •Avoid 302 redirects •document.write
- 78.
- 79. RWD* without FEO DocumentComplete: 11.838s Bytes In: 1,634 KB Requests: 122 Fully Loaded: 12.357s Bytes In: 1,634 KB Requests: 126 *added to an existing desktop site
- 80. Scaled Images &Filtered Content Document Complete: 2.732s Bytes In: 285 KB Requests: 51 Fully Loaded: 4.193s Bytes In: 288 KB Requests: 53
- 81. Document Complete: 1.088s BytesIn: 69 KB Requests: 7 Fully Loaded: 3.552s Bytes In: 269 KB Requests: 14 ADVERTISING: This is the standard result by Sevenval FIT Version 12.0.2. Scaled Images, Filtered Content & FEO
- 82. Overview Document Complete 11.838s 2.732s 1.088s BytesIn 1,634KB 285KB 69KB Requests 122 51 7 Fully Loaded 12.357s 4.193s 3.552s Bytes In 1,634KB 288KB 269KB Requests 126 53 14 loadEvent 11.806s 2.696s 0.862s RWD RESS RESS + FEOpoor
- 83.
- 84. Performance Killer •unscaled images •largeinline scripts/styles •large CSS background images •Session = Cache-control: private •3rd Party JavaScript (twitter, fb, Ads, tracking, ...) •SLOW SERVERS!
- 85.
- 86. Mindset •Performance is likediets: •Avoid Yo-yo effects! •Live performance every day! •Performance is mindset – not a feature •Consider performance from day 0 •Performance is hard to apply „at the end“
- 87. Performance Triangle Security Performance Eye-Candy 2012 Sevenval,Credits to @ffilex
- 88. Performance Triangle Security Performance Eye-Candy 2012 Sevenval,Credits to @ffilex
- 89. Performance Triangle Security Performance Eye-Candy = $= $$$ 2012 Sevenval, Credits to @ffilex
- 90.