Making Mobile Sites Faster
•
54 likes•13,792 views
Slides from my talk on mobile performance at NCC Group's Web Performance and Optimisation day (5th March 2014)
Recommended
More Related Content
Similar to Making Mobile Sites Faster
Similar to Making Mobile Sites Faster (20)
More from Andy Davies
More from Andy Davies (20)
Recently uploaded
Recently uploaded (20)
Making Mobile Sites Faster
- 1. Making Mobile Sites Faster @andydavies NCC Group, Mar 2014 http://www.flickr.com/photos/b-tal/156919562
- 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
- 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/
- 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
- 46. Network request still in progress User gets feedback
- 47. Magic, the Art of Misdirection http://www.flickr.com/photos/nozzer/3990622685
- 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!