Making Mobile Sites Faster
•
54 j'aime•13,792 vues
Slides from my talk on mobile performance at NCC Group's Web Performance and Optimisation day (5th March 2014)
Recommandé
Contenu connexe
Similaire à Making Mobile Sites Faster
Similaire à Making Mobile Sites Faster (20)
Plus de Andy Davies
Plus de Andy Davies (20)
Dernier
Dernier (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!