Mobile Web Performance -  Getting and Staying Fast
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Mobile Web Performance - Getting and Staying Fast

on

  • 778 views

Slides from mine and Aaaron Peter's talk at QCon London (Mar 2014) on how to measure mobile web performance, things that affect in and how to improve it

Slides from mine and Aaaron Peter's talk at QCon London (Mar 2014) on how to measure mobile web performance, things that affect in and how to improve it

Statistics

Views

Total Views
778
Views on SlideShare
777
Embed Views
1

Actions

Likes
5
Downloads
7
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

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

Mobile Web Performance - Getting and Staying Fast Presentation Transcript

  • 1. Mobile Web Performance Getting and Staying Fast! @aaronpeters, Turbobytes @andydavies, NCC Group
  • 2. Mobile – Everybody is Using It “At the beginning of 2013 mobile (excluding tablet) accounted for 26% of our traffic, and we ended the year with it contributing 33%.”! Stuart McMillan, Schuh!
  • 3. And Spending More “Historically, mobile baskets have always been lower value than desktop but just before Christmas the difference was only about 6%”! Stuart McMillan, Schuh!
  • 4. User Expectations are High “85% of mobile users expect sites to load at least as fast or faster than sites on their desktop”! Strangeloop Networks!
  • 5. Mobile Pages are Growing! http://mobile.httparchive.org/!
  • 6. “We’ve remade the Internet in our image… obese.” Jason Grigsby! ! http://www.flickr.com/photos/mrtopher/1414159786
  • 7. We’re relying on ever faster phones and networks! ! http://www.flickr.com/photos/willposh/3825768273/
  • 8. 4G isn’t going to bail us out! 77.3M! mobile connections! 2-3M 4G! connections! Estimated 20% of connections will be LTE by end of 2017! GSMA Intelligence + operators!
  • 9. ! http://www.flickr.com/photos/endlisnis/174511509
  • 10. So many devices… lots of variation! ! http://www.flickr.com/photos/adactio/12674230513
  • 11. Meet the $25 Smartphone! ! http://www.flickr.com/photos/mozillaeu/12748349115
  • 12. Differing Network Environments! GPRS! EDGE! 3G! 4G! WiFi! Faster, Lower Latency???! Special networks…! Conference, Hotel, Coffee shop WiFi!
  • 13. Latency is a huge issue! “In 2012, the average worldwide RTT to Google is still ~100ms, and ~50-60ms within the US.”! “we are looking at 100-1000ms RTT range on mobile”! Ilya Grigorik! http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/!
  • 14. It’s not just about speed! ! http://www.flickr.com/photos/fastjack/2943793818
  • 15. 3G Radio Resource Control! Idle for 12s! IDLE! 1-2s delay!! 1s delay! CELL_DCH! CELL_FACH! Idle for 5s! Exact timings vary and depend on carrier NOT device! http://web.eecs.umich.edu/~fengqian/paper/3g_imc10.pdf!
  • 16. Measuring mobile web performance! http://www.flickr.com/photos/14516334@N00/286709039/
  • 17. Navigation Timing API 9+ window.performance.timing;   http://goo.gl/x483FY !
  • 18. Resource Timing API not on iPad 10+ DNS and Connect times are broken http://goo.gl/afV9OD ! window.performance.getEntries();  
  • 19. First Paint time window.chrome.loadTimes().firstPaintTime;     9+ window.performance.msFirstPaint;   Works on IE Mobile? Don’t know …   firstPaintTime = ‘first time MozAfterPaint event fires’ window.performance.timing.navigationStart  
  • 20. WebPagetest
  • 21. WebPagetest I built and operate WPT.! I am awesome.! •  Best tool to analyze web performance! •  Real browser, many locations around the globe! •  IE6-11, Firefox, Chrome, Android, iPhone, iPad…! •  Specify connection speeds, packet loss! •  Extensive API (eg. multi-page testing)! •  Run your own private instance!!
  • 22. Appurify’s WebPagetest! Many devices! Many carrier profiles! All located in San Francisco! http://appurify.webpagetest.org ! ! https://androidwpt.appurify.com ! !
  • 23. Chrome DevTools For Mobile http://goo.gl/jfKyAN" " " "http://goo.gl/WS5N8E!
  • 24. Finding the problems! http://www.flickr.com/photos/chasblackman/6795013658/
  • 25. nbcnews.com Dulles, VA, Motorola G – Chrome, Shaped 3G (1.6 Mbps/768 Kbps, 300ms RTT)!
  • 26. nbcnews.com 18.7 sec Start Render Time! 344 ! Requests! 1523 KB Total Transfer Size! 115 different domains !"
  • 27. htc.com
  • 28. htc.com 9.4 sec 7 .js files = 200 KB = too much Start Render Time! >1 MB files ! 77 Requests! 3,256 KB ! Total Transfer Size!
  • 29. Solving the problems: make it faster! http://www.flickr.com/photos/velacreations/5249327029/
  • 30. > Minimize transfer size Send less bytes… A LOT LESS!
  • 31. Send text based files compressed Savings: 10% – 80% !!! !
  • 32. Minimize image dimensions
  • 33. Crunch images Served by apple.com Optimized with ImageOptim 380 KB 179 KB
  • 34. Don’t send what is not needed apple.com on Nexus 7! ! 370 KB above fold hero image Same image in higher res, now 442 KB. So why send that first one??
  • 35. Use vector graphics instead?! SVG: 12 KB vs PNG: 86KB!
  • 36. Icon fonts! ★ ★! ☆ ☆! ♥ ♥! ☁ ☁! Heydings by Heydon Works! “Bog Standard Font”!
  • 37. Use CSS! border-radius: 20px; ! background: linear-gradient(left, #f06, #ff0);! Some combinations produce poor paint performance!
  • 38. Webfonts? Maybe better not 4.5 seconds … blocking!!
  • 39. > Minimize number of requests
  • 40. > Increase initcwnd initial congestion window is a server parameter! initcwnd  =  10  means server sends initially 10 packets (~14KB) over a TCP connection! Default value is 10 in Linux 2.6.39+! ! Most CDNs use 10, but some as high as 26!
  • 41. > Increase initcwnd A higher initcwnd really helps, especially with small object delivery! http://goo.gl/ee0xBs !
  • 42. > Cache aggressively
  • 43. Fonts, Stylesheets, JavaScript block rendering! ! http://www.flickr.com/photos/timo/3995227
  • 44. ???!
  • 45. CSS! http://mobile.httparchive.org/!
  • 46. Javascript! http://mobile.httparchive.org/!
  • 47. Added 160kB to page Bounce rate increased by 12% on mobile ! https://speakerdeck.com/lara/design-for-performance!
  • 48. We’ve fallen in love with web fonts! ! http://www.flickr.com/photos/splorp/4951916342
  • 49. But at what cost?!
  • 50. Use of Web Fonts is Growing! http://mobile.httparchive.org/!
  • 51. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJK LMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstu vwxyz{|}~ ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁ ÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçè éêëìíîïðñòóôõö÷øùúûüýþÿĀāĂ㥹ĆćĈĉĊċČčĎďĐđ ĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľ ĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧ ŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſƒƠơƯưǰǺǻǼǽǾǿȘș Țțȷʼˆˇˉ˘˙˚˛˜˝˳̣̀́̃̉̏΄΅Ά·ΈΉΊΌΎΏΐΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠ ΡΣΤΥΦΧΨΩΪΫάέήίΰαβγδεζηθικλμνξοπρςστυφχψωϊϋό ύώϑϒϖЀЁЂЃЄЅІЇЈЉЊЋЌЍЎЏАБВГДЕЖЗИЙКЛМНО ПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуф хцчшщъыьэюяѐёђѓєѕіїјљњћќѝўџѠѡѢѣѤѥѦѧѨѩѪѫ ѬѭѮѯѰѱѲѳѴѵѶѷѸѹѺѻѼѽѾѿҀҁ҂҃҄҅҆҈҉ҊҋҌҍҎҏҐґҒғҔҕ ҖҗҘҙҚқҜҝҞҟҠҡҢңҤҥҦҧҨҩҪҫҬҭҮүҰұҲҳҴҵҶҷҸҹҺһҼ ҽҾҿӀӁӂӃӄӅӆӇӈӉӊӋӌӍӎӏӐӑӒӓӔӕӖӗӘәӚӛӜӝӞӟӠӡӢ ӣӤӥӦӧӨөӪӫӬӭӮӯӰӱӲӳӴӵӶӷӸӹӺӻӼӽӾӿԀԁԂԃԄԅԆԇԈ ԉԊԋԌԍԎԏԐԑԒԓḀḁḾḿẀẁẂẃẄẅẠạẢảẤấẦầẨẩẪẫẬậẮ ắẰằẲẳẴẵẶặẸẹẺẻẼẽẾếỀềỂểỄễỆệỈỉỊịỌọỎỏỐốỒồỔổỖ ! ỗỘộỚớỜờỞởỠỡỢợỤụỦủỨứỪừỬửỮữỰựỲỳỴỵỶỷỸỹὍ –—―‗‘’‚‛“”„†‡•…‰′″‹›‼⁄⁰⁴⁵⁶⁷⁸⁹ⁿ₣₤₧₫€℅ℓ№℠™Ω℮⅛⅜ ⅝ ⅞ ∂ ∆ ∏ ∑ − √ ∞ ∫ ≈ ≠ ≤ ≥ ◊ ff fi fl ffi ffl  ! Do we need all those font glyphs? Open Sans — 22.1 kB
  • 52. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJK LMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstu vwxyz{|}~ ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁ ÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçè éêëìíîïðñòóôõö÷øùúûüýþÿĀāĂ㥹ĆćĈĉĊċČčĎďĐđ ĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľ ĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧ ŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſƒƠơƯưǰǺǻǼǽǾǿȘș Țțȷʼˆˇˉ˘˙˚˛˜˝˳̣̀́̃̉̏΄΅Ά·ΈΉΊΌΎΏΐΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠ ΡΣΤΥΦΧΨΩΪΫάέήίΰαβγδεζηθικλμνξοπρςστυφχψωϊϋό ύώϑϒϖЀЁЂЃЄЅІЇЈЉЊЋЌЍЎЏАБВГДЕЖЗИЙКЛМНО ПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуф хцчшщъыьэюяѐёђѓєѕіїјљњћќѝўџѠѡѢѣѤѥѦѧѨѩѪѫ ѬѭѮѯѰѱѲѳѴѵѶѷѸѹѺѻѼѽѾѿҀҁ҂҃҄҅҆҈҉ҊҋҌҍҎҏҐґҒғҔҕ ҖҗҘҙҚқҜҝҞҟҠҡҢңҤҥҦҧҨҩҪҫҬҭҮүҰұҲҳҴҵҶҷҸҹҺһҼ ҽҾҿӀӁӂӃӄӅӆӇӈӉӊӋӌӍӎӏӐӑӒӓӔӕӖӗӘәӚӛӜӝӞӟӠӡӢ ӣӤӥӦӧӨөӪӫӬӭӮӯӰӱӲӳӴӵӶӷӸӹӺӻӼӽӾӿԀԁԂԃԄԅԆԇԈ ԉԊԋԌԍԎԏԐԑԒԓḀḁḾḿẀẁẂẃẄẅẠạẢảẤấẦầẨẩẪẫẬậẮ ! ắẰằẲẳẴẵẶặẸẹẺẻẼẽẾếỀềỂểỄễỆệỈỉỊịỌọỎỏỐốỒồỔổỖ ỗỘộỚớỜờỞởỠỡỢợỤụỦủỨứỪừỬửỮữỰựỲỳỴỵỶỷỸỹὍ –—―‗‘’‚‛“”„†‡•…‰′″‹›‼⁄⁰⁴⁵⁶⁷⁸⁹ⁿ₣₤₧₫€℅ℓ№℠™Ω℮⅛⅜ ⅝ ⅞ ∂ ∆ ∏ ∑ − √ ∞ ∫ ≈ ≠ ≤ ≥ ◊ ff fi fl ffi ffl  ! 14.9 kB — 33% saving
  • 53. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJK LMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstu vwxyz{|}~ ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁ ÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçè éêëìíîïðñòóôõö÷øùúûüýþÿĀāĂ㥹ĆćĈĉĊċČčĎďĐđ ĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľ ĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧ ŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſƒƠơƯưǰǺǻǼǽǾǿȘș Țțȷʼˆˇˉ˘˙˚˛˜˝˳̣̀́̃̉̏΄΅Ά·ΈΉΊΌΎΏΐΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠ ΡΣΤΥΦΧΨΩΪΫάέήίΰαβγδεζηθικλμνξοπρςστυφχψωϊϋό ύώϑϒϖЀЁЂЃЄЅІЇЈЉЊЋЌЍЎЏАБВГДЕЖЗИЙКЛМНО ПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуф хцчшщъыьэюяѐёђѓєѕіїјљњћќѝўџѠѡѢѣѤѥѦѧѨѩѪѫ ѬѭѮѯѰѱѲѳѴѵѶѷѸѹѺѻѼѽѾѿҀҁ҂҃҄҅҆҈҉ҊҋҌҍҎҏҐґҒғҔҕ ҖҗҘҙҚқҜҝҞҟҠҡҢңҤҥҦҧҨҩҪҫҬҭҮүҰұҲҳҴҵҶҷҸҹҺһҼ ҽҾҿӀӁӂӃӄӅӆӇӈӉӊӋӌӍӎӏӐӑӒӓӔӕӖӗӘәӚӛӜӝӞӟӠӡӢ ӣӤӥӦӧӨөӪӫӬӭӮӯӰӱӲӳӴӵӶӷӸӹӺӻӼӽӾӿԀԁԂԃԄԅԆԇԈ ԉԊԋԌԍԎԏԐԑԒԓḀḁḾḿẀẁẂẃẄẅẠạẢảẤấẦầẨẩẪẫẬậẮ ! ắẰằẲẳẴẵẶặẸẹẺẻẼẽẾếỀềỂểỄễỆệỈỉỊịỌọỎỏỐốỒồỔổỖ ỗỘộỚớỜờỞởỠỡỢợỤụỦủỨứỪừỬửỮữỰựỲỳỴỵỶỷỸỹὍ –—―‗‘’‚‛“”„†‡•…‰′″‹›‼⁄⁰⁴⁵⁶⁷⁸⁹ⁿ₣₤₧₫€℅ℓ№℠™Ω℮⅛⅜ ⅝ ⅞ ∂ ∆ ∏ ∑ − √ ∞ ∫ ≈ ≠ ≤ ≥ ◊ ff fi fl ffi ffl  ! 8.3 kB — 62% saving
  • 54. Provide hints before a resource is discovered! <link rel="dns-prefetch" href="other.hostname.com"> <link rel="subresource" href="/some_other_resource.js"> <link rel="prefetch" href="/some_other_resource.jpeg"> <link rel="prerender" href="//domain.com/next_page.html">
  • 55. Prioritise the Content! Guardian divide page into: - Content - Enhancements - Leftovers
  • 56. What can we put off until later?! ! http://www.flickr.com/photos/melodramababs/5962771148
  • 57. https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design!
  • 58. Network request! still in progress! User gets ! feedback!
  • 59. Magic, the Art of Misdirection! ! http://www.flickr.com/photos/nozzer/3990622685
  • 60. http://mercury.io/blog/the-psychology-of-waiting-loading-animations-and-facebook!
  • 61. Embrace Constraints… Set a budget! ! http://www.flickr.com/photos/communityfriend/2342578485
  • 62. Embrace Constraints… Set a budget! “Usable within 10 seconds on GPRS connection” - BBC News! “SpeedIndex under 1000” - Paul Irish, Google! Requests, page size etc. are easier to measure but may not represent real world experience! ! http://www.flickr.com/photos/communityfriend/2342578485
  • 63. For a faster mobile site:! "  "  "  "  "  Measure Move less bytes Prioritise what you move Move them while no-one is looking Distract the visitor!!
  • 64. Thank You! ! @aaronpeters aaron@turbobytes.com @andydavies andy.davies@nccgroup.com http://slideshare.net/andydavies! ! http://www.flickr.com/photos/nzbuu/4093456029