Successfully reported this slideshow.

Mobile Web Performance - Getting and Staying Fast

6

Share

Loading in …3
×
1 of 64
1 of 64

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Mobile Web Performance - Getting and Staying Fast

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

×