• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Making Mobile Sites Faster
 

Making Mobile Sites Faster

on

  • 5,774 views

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

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

Statistics

Views

Total Views
5,774
Views on SlideShare
5,354
Embed Views
420

Actions

Likes
52
Downloads
65
Comments
0

13 Embeds 420

https://twitter.com 189
http://www.conseilsmarketing.com 115
http://educacionmatematica18.blogspot.com 46
http://sy0404.tistory.com 20
http://localhost 10
http://www.paperblog.fr 10
http://dev.localhost 8
http://local.theportfolium.com 8
http://socialjung.tistory.com 4
http://www.google.com 4
http://jieun0323.tistory.com 3
http://users.adways.com 2
https://home.jolicloud.com 1
More...

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

Making Mobile Sites Faster Making Mobile Sites Faster Presentation Transcript

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