Making Mobile Sites Faster

50 %
50 %
Information about Making Mobile Sites Faster
Technology

Published on March 5, 2014

Author: AndyDavies

Source: slideshare.net

Description

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

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

Add a comment

Related presentations

Related pages

Making Mobile Sites Faster - NCC Group

Making Mobile Sites Faster @andydavies NCC Group, Mar 2014 http://www.flickr.com/photos/b-tal/156919562. Imagine… later today ...
Read more

Make the Web Faster — Google Developers

Make the Web Faster; list All Products. ... Get your PageSpeed score and use PageSpeed suggestions to make your web site faster through our online tool.
Read more

How To Make Your WordPress Site Load Faster - iBlogzone

There are several ways to make your WordPress site load faster. ... Does Your Site Have Mobile ... about making site load faster lately and the way ...
Read more

10 Ways to Make Your Website Load Faster | Hostway Blog

10 Ways to Make Your Website Load Faster. by: ... website and it takes around 10 sec to open on mobile ... images and it makes my site load 25% faster.
Read more

5 Tips For Faster Loading Web Sites - Rubyrobot

5 Tips for web site speed optimization of your Apache web server. Optimize page load time for faster loading web sites.
Read more

Mobile Sites vs. Apps: The Coming Strategy Shift

Mobile apps currently have better usability than mobile sites, but forthcoming changes will eventually make a mobile site the superior strategy.
Read more

Duda Website Builder - Build Smarter Websites

Create your Mobile Website with DudaMobile, Make a Responsive Website with DudaOne or Find out more about DudaPro our professional partner program.
Read more

3.4 Make your site mobile-friendly - Search Console Help

Take the course 3.4 Make your site mobile-friendly. Next: 3.5 Join the webmaster community. As you’re creating your website on a desktop computer, keep ...
Read more