Making Mobile Sites Faster

9,019 views
8,462 views

Published on

Slides from my talk on mobile performance at NCC Group's Web Performance and Optimisation day (5th March 2014)

Published in: Technology
0 Comments
54 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,019
On SlideShare
0
From Embeds
0
Number of Embeds
536
Actions
Shares
0
Downloads
78
Comments
0
Likes
54
Embeds 0
No embeds

No notes for slide

Making Mobile Sites Faster

  1. Making Mobile Sites Faster @andydavies NCC Group, Mar 2014 http://www.flickr.com/photos/b-tal/156919562
  2. Imagine… later today… http://www.flickr.com/photos/andrew_bolin/3909446250
  3. How long would you wait? http://www.flickr.com/photos/oatsy40/6198212129
  4. “85% of mobile users expect sites to load at least as fast or faster than sites on their desktop” Strangeloop Networks
  5. “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
  6. “Historically, mobile baskets have always been lower value than desktop but just before Christmas the difference was only about 6%” Stuart McMillan, Schuh
  7. “We’ve remade the Internet in our image… obese.” Jason Grigsby http://www.flickr.com/photos/mrtopher/1414159786
  8. Mobile Pages are Growing Requests Size (kB) 900 800 700 600 500 400 300 200 100 Fe b Jan ec D N ov ct O p Se g Au Ju l Ju n M ay r Ap M ar ' 13 0 http://mobile.httparchive.org/
  9. We’re relying on ever faster phones and networks http://www.flickr.com/photos/willposh/3825768273/
  10. 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
  11. http://www.flickr.com/photos/endlisnis/174511509
  12. So many devices… so much variation… http://www.flickr.com/photos/adactio/12674230513
  13. Meet the $25 Smartphone http://www.flickr.com/photos/mozillaeu/12748349115
  14. Networks are Improving 2G 2.5G 3G 4G WiFi Faster, Lower Latency??? Special networks… Conference, Hotel, Coffee shop WiFi
  15. Latency is still the big 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/
  16. It’s not just about speed http://www.flickr.com/photos/fastjack/2943793818
  17. 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
  18. Fast mobile sites have short waterfalls
  19. What are mobile sites made of? HTML Fonts Images CSS Javascript Other 900 800 700 600 500 400 300 200 100 Fe b Jan ec D N ov ct O p Se g Au Ju l Ju n M ay r Ap M ar ' 13 0 http://mobile.httparchive.org/
  20. HTML Requests Size (kB) 50 45 40 35 30 25 20 15 10 5 Fe b Jan ec D N ov ct O p Se g Au Ju l Ju n M ay r Ap M ar ' 13 0 http://mobile.httparchive.org/
  21. Images are the Bulk of Download Requests Size (kB) 600 500 400 300 200 100 Fe b Jan ec D N ov ct O p Se g Au Ju l Ju n M ay r Ap M ar ' 13 0 http://mobile.httparchive.org/
  22. Time to bury bitmapped images? http://www.flickr.com/photos/tonyjcase/7183556158
  23. Use vector graphics instead? SVG: 12 KB vs PNG: 86KB
  24. Icon fonts ★ ★ ☆ ☆ ♥ ♥ ☁ ☁ Heydings by Heydon Works “Bog Standard Font”
  25. Use CSS border-radius: 20px; background: linear-gradient(left, #f06, #ff0); Some combinations produce poor paint performance
  26. What if only a bitmap image will do? http://www.flickr.com/photos/orkomedix/5026054826
  27. Size images for the viewport http://www.flickr.com/photos/emzee/139794246
  28. As images get smaller need to focus on subject “Art Direction” - Jason Grigsby http://www.flickr.com/photos/barackobamadotcom/5795228030
  29. Standards for Responsive Images are Coming
  30. ???
  31. What’s needed to render the page? http://www.flickr.com/photos/wiertz/6922984303
  32. Prioritise the Content Guardian divide page into: ! - Content - Enhancements - Leftovers
  33. Fonts, Stylesheets, JavaScript block rendering http://www.flickr.com/photos/timo/3995227
  34. CSS size is creeping up Requests Size (kB) 40 35 30 25 20 15 10 5 Fe b Jan ec D N ov ct O p Se g Au Ju l Ju n M ay r Ap M ar ' 13 0 http://mobile.httparchive.org/
  35. 25% More Javascript Requests Size (kB) 200 175 150 125 100 75 50 25 Fe b Jan ec D N ov ct O p Se g Au Ju l Ju n M ay r Ap M ar ' 13 0 http://mobile.httparchive.org/
  36. Added 160kB to page Increased bounce rate by 12% on mobile https://speakerdeck.com/lara/design-for-performance
  37. We’ve fallen in love with web fonts http://www.flickr.com/photos/splorp/4951916342
  38. But at what cost?
  39. 300% Larger in 12 Months! Requests Size (kB) 30 25 20 15 10 5 Fe b Jan ec D N ov ct O p Se g Au Ju l Ju n M ay r Ap M ar ' 13 0 http://mobile.httparchive.org/
  40. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJK LMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstu vwxyz{|}~ ¡¢£¤¥¦§¨©ª«¬ ®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂà ÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèé êëìíîïðñòóôõö÷øùúûüýþÿĀāĂ㥹ĆćĈĉĊċČčĎďĐđĒ ēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľ ĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦ ŧŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſƒƠơƯưǰǺǻǼǽǾǿȘ ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ̀ ́ ̃ ̉ ̏ ̣΄ ΅ Ά · Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ ΟΠΡΣΤΥΦΧΨΩΪΫάέήίΰαβγδεζηθικλμνξοπρςστυφχ ψωϊϋόύώϑϒϖЀЁЂЃЄЅІЇЈЉЊЋЌЍЎЏАБВГДЕЖЗИЙК ЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмно прстуфхцчшщъыьэюяѐёђѓєѕіїјљњћќѝўџѠѡѢѣѤѥѦ ѧѨѩѪѫѬѭѮѯѰѱѲѳѴѵѶѷѸѹѺѻѼѽѾѿҀҁ҂ ҃҄҅҆҈ ҉ ҊҋҌҍ ҎҏҐґҒғҔҕҖҗҘҙҚқҜҝҞҟҠҡҢңҤҥҦҧҨҩҪҫҬҭҮүҰұҲ ҳҴҵҶҷҸҹҺһҼҽҾҿӀӁӂӃӄӅӆӇӈӉӊӋӌӍӎӏӐӑӒӓӔӕӖ ӗӘәӚӛӜӝӞӟӠӡӢӣӤӥӦӧӨөӪӫӬӭӮӯӰӱӲӳӴӵӶӷӸӹӺӻӼ ӽӾӿԀԁԂԃԄԅԆԇԈԉԊԋԌԍԎԏԐԑԒԓḀḁḾḿẀẁẂẃẄẅẠạ ẢảẤấẦầẨẩẪẫẬậẮắẰằẲẳẴẵẶặẸẹẺẻẼẽẾếỀềỂểỄễỆệỈỉ ỊịỌọỎỏỐốỒồỔổỖỗỘộỚớỜờỞởỠỡỢợỤụỦủỨứỪừỬử ỮữỰựỲỳỴỵỶỷỸỹὍ–—―‗‘’‚‛“”„†‡•…‰′″‹›‼⁄⁰⁴⁵⁶⁷⁸⁹ⁿ₣ ₤ ₧ ₫ € ℅ ℓ № ℠ ™ Ω ℮ ⅛ ⅜ ⅝ ⅞ ∂ ∆ ∏ ∑ − √ ∞ ∫ ≈ ≠ ≤ ≥ ◊ ff fi fl ffi ffl  Do we need all those glyphs? Open Sans — 22.1 kB
  41. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJK LMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstu vwxyz{|}~ ¡¢£¤¥¦§¨©ª«¬ ®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂà ÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèé êëìíîïðñòóôõö÷øùúûüýþÿĀāĂ㥹ĆćĈĉĊċČčĎďĐđĒ ēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľ ĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦ ŧŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſƒƠơƯưǰǺǻǼǽǾǿȘ ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ̀ ́ ̃ ̉ ̏ ̣΄ ΅ Ά · Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ ΟΠΡΣΤΥΦΧΨΩΪΫάέήίΰαβγδεζηθικλμνξοπρςστυφχ ψωϊϋόύώϑϒϖЀЁЂЃЄЅІЇЈЉЊЋЌЍЎЏАБВГДЕЖЗИЙК ЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмно прстуфхцчшщъыьэюяѐёђѓєѕіїјљњћќѝўџѠѡѢѣѤѥѦ ѧѨѩѪѫѬѭѮѯѰѱѲѳѴѵѶѷѸѹѺѻѼѽѾѿҀҁ҂ ҃҄҅҆҈ ҉ ҊҋҌҍ ҎҏҐґҒғҔҕҖҗҘҙҚқҜҝҞҟҠҡҢңҤҥҦҧҨҩҪҫҬҭҮүҰұҲ ҳҴҵҶҷҸҹҺһҼҽҾҿӀӁӂӃӄӅӆӇӈӉӊӋӌӍӎӏӐӑӒӓӔӕӖ ӗӘәӚӛӜӝӞӟӠӡӢӣӤӥӦӧӨөӪӫӬӭӮӯӰӱӲӳӴӵӶӷӸӹӺӻӼ ӽӾӿԀԁԂԃԄԅԆԇԈԉԊԋԌԍԎԏԐԑԒԓḀḁḾḿẀẁẂẃẄẅẠạ ẢảẤấẦầẨẩẪẫẬậẮắẰằẲẳẴẵẶặẸẹẺẻẼẽẾếỀềỂểỄễỆệỈỉ ỊịỌọỎỏỐốỒồỔổỖỗỘộỚớỜờỞởỠỡỢợỤụỦủỨứỪừỬử ỮữỰựỲỳỴỵỶỷỸỹὍ–—―‗‘’‚‛“”„†‡•…‰′″‹›‼⁄⁰⁴⁵⁶⁷⁸⁹ⁿ₣ ₤ ₧ ₫ € ℅ ℓ № ℠ ™ Ω ℮ ⅛ ⅜ ⅝ ⅞ ∂ ∆ ∏ ∑ − √ ∞ ∫ ≈ ≠ ≤ ≥ ◊ ff fi fl ffi ffl  14.9 kB — 33% saving
  42. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJK LMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstu vwxyz{|}~ ¡¢£¤¥¦§¨©ª«¬ ®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂà ÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèé êëìíîïðñòóôõö÷øùúûüýþÿĀāĂ㥹ĆćĈĉĊċČčĎďĐđĒ ēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľ ĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦ ŧŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſƒƠơƯưǰǺǻǼǽǾǿȘ ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ̀ ́ ̃ ̉ ̏ ̣΄ ΅ Ά · Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ ΟΠΡΣΤΥΦΧΨΩΪΫάέήίΰαβγδεζηθικλμνξοπρςστυφχ ψωϊϋόύώϑϒϖЀЁЂЃЄЅІЇЈЉЊЋЌЍЎЏАБВГДЕЖЗИЙК ЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмно прстуфхцчшщъыьэюяѐёђѓєѕіїјљњћќѝўџѠѡѢѣѤѥѦ ѧѨѩѪѫѬѭѮѯѰѱѲѳѴѵѶѷѸѹѺѻѼѽѾѿҀҁ҂ ҃҄҅҆҈ ҉ ҊҋҌҍ ҎҏҐґҒғҔҕҖҗҘҙҚқҜҝҞҟҠҡҢңҤҥҦҧҨҩҪҫҬҭҮүҰұҲ ҳҴҵҶҷҸҹҺһҼҽҾҿӀӁӂӃӄӅӆӇӈӉӊӋӌӍӎӏӐӑӒӓӔӕӖ ӗӘәӚӛӜӝӞӟӠӡӢӣӤӥӦӧӨөӪӫӬӭӮӯӰӱӲӳӴӵӶӷӸӹӺӻӼ ӽӾӿԀԁԂԃԄԅԆԇԈԉԊԋԌԍԎԏԐԑԒԓḀḁḾḿẀẁẂẃẄẅẠạ ẢảẤấẦầẨẩẪẫẬậẮắẰằẲẳẴẵẶặẸẹẺẻẼẽẾếỀềỂểỄễỆệỈỉ ỊịỌọỎỏỐốỒồỔổỖỗỘộỚớỜờỞởỠỡỢợỤụỦủỨứỪừỬử ỮữỰựỲỳỴỵỶỷỸỹὍ–—―‗‘’‚‛“”„†‡•…‰′″‹›‼⁄⁰⁴⁵⁶⁷⁸⁹ⁿ₣ ₤ ₧ ₫ € ℅ ℓ № ℠ ™ Ω ℮ ⅛ ⅜ ⅝ ⅞ ∂ ∆ ∏ ∑ − √ ∞ ∫ ≈ ≠ ≤ ≥ ◊ ff fi fl ffi ffl  8.3 kB — 62% saving
  43. Provide hints before a resource is discovered <link ! ! <link ! ! <link ! ! <link rel="dns-prefetch" href="other.hostname.com"> rel="subresource" href="/some_other_resource.js"> rel="prefetch" href="/some_other_resource.jpeg"> rel="prerender" href="//domain.com/next_page.html">
  44. What can we put off until later? http://www.flickr.com/photos/melodramababs/5962771148
  45. https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design
  46. Network request still in progress User gets feedback
  47. Magic, the Art of Misdirection http://www.flickr.com/photos/nozzer/3990622685
  48. http://mercury.io/blog/the-psychology-of-waiting-loading-animations-and-facebook
  49. Embrace Constraints… Set a budget http://www.flickr.com/photos/communityfriend/2342578485
  50. 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
  51. For a faster mobile site: Move less bytes Prioritise what you move Move them while no-one is looking Distract the visitor!
  52. Thank You! @andydavies ! andy.davies@nccgroup.com ! http://slideshare.net/andydavies http://www.flickr.com/photos/nzbuu/4093456029

×