Your SlideShare is downloading. ×
0
Mobile Web Performance
Getting and Staying Fast!

@aaronpeters, Turbobytes
@andydavies, NCC Group
Mobile – Everybody is Using It
“At the beginning of 2013 mobile (excluding tablet)
accounted for 26% of our traffic, and we...
And Spending More
“Historically, mobile baskets have always been
lower value than desktop but just before
Christmas the di...
User Expectations are High
“85% of mobile users expect sites to load at least
as fast or faster than sites on their deskto...
Mobile Pages are Growing!

http://mobile.httparchive.org/!
“We’ve remade the Internet in our image… obese.”

Jason Grigsby!
!

http://www.flickr.com/photos/mrtopher/1414159786
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 LT...
!

http://www.flickr.com/photos/endlisnis/174511509
So many devices… lots of variation!

!

http://www.flickr.com/photos/adactio/12674230513
Meet the $25 Smartphone!

!

http://www.flickr.com/photos/mozillaeu/12748349115
Differing Network Environments!
GPRS!

EDGE!

3G!

4G!

WiFi!

Faster, Lower Latency???!

Special networks…!
Conference, H...
Latency is a huge issue!
“In 2012, the average worldwide RTT to
Google is still ~100ms, and ~50-60ms within
the US.”!
“we ...
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 timing...
Measuring mobile web performance!

http://www.flickr.com/photos/14516334@N00/286709039/
Navigation Timing API
9+

window.performance.timing;
	
  

http://goo.gl/x483FY !
Resource Timing API
not on iPad

10+
DNS and
Connect
times are
broken

http://goo.gl/afV9OD !

window.performance.getEntri...
First Paint time
window.chrome.loadTimes().firstPaintTime;	
  
	
  

9+

window.performance.msFirstPaint;	
  

Works on IE...
WebPagetest
WebPagetest

I built and
operate WPT.!
I am awesome.!

•  Best tool to analyze web performance!
•  Real browser, many loca...
Appurify’s WebPagetest!
Many devices!
Many carrier
profiles!
All located in San
Francisco!

http://appurify.webpagetest.org...
Chrome DevTools For Mobile

http://goo.gl/jfKyAN" " " "http://goo.gl/WS5N8E!
Finding the problems!

http://www.flickr.com/photos/chasblackman/6795013658/
nbcnews.com

Dulles, VA, Motorola G – Chrome, Shaped 3G (1.6 Mbps/768 Kbps, 300ms RTT)!
nbcnews.com
18.7 sec
Start Render Time!

344 !
Requests!

1523 KB
Total Transfer Size!

115 different domains !"
htc.com
htc.com
9.4 sec

7 .js files = 200 KB =
too much

Start Render Time!
>1 MB files !

77
Requests!

3,256 KB !
Total Transfe...
Solving the problems: make it faster!

http://www.flickr.com/photos/velacreations/5249327029/
> Minimize transfer size

Send less bytes… A LOT LESS!
Send text based files compressed

Savings: 10% – 80% !!!
!
Minimize image dimensions
Crunch images

Served by apple.com

Optimized with ImageOptim

380 KB

179 KB
Don’t send what is not needed
apple.com on Nexus 7!
!

370 KB
above fold
hero image

Same image in
higher res,
now 442 KB....
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 per...
Webfonts? Maybe better not
4.5 seconds … blocking!!
> Minimize number of requests
> Increase initcwnd
initial congestion window is a server parameter!
initcwnd	
  =	
  10	
  means server sends initially 1...
> Increase initcwnd
A higher initcwnd really helps, especially with small
object delivery!

http://goo.gl/ee0xBs !
> Cache aggressively
Fonts, Stylesheets, JavaScript block rendering!
!

http://www.flickr.com/photos/timo/3995227
???!
CSS!

http://mobile.httparchive.org/!
Javascript!

http://mobile.httparchive.org/!
Added 160kB to page
Bounce rate increased 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?!
Use of Web Fonts is Growing!

http://mobile.httparchive.org/!
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJK
LMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstu
vwxyz{|}~ ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJK
LMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstu
vwxyz{|}~ ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJK
LMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstu
vwxyz{|}~ ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º...
Provide hints before a resource is discovered!
<link rel="dns-prefetch" href="other.hostname.com">
<link rel="subresource"...
Prioritise the Content!
Guardian divide page into:	

	

- Content	

- Enhancements	

- Leftovers
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” - Pa...
For a faster mobile site:!
" 
" 
" 
" 
" 

Measure	

Move less bytes	

Prioritise what you move	

Move them while no-one i...
Thank You!
!

@aaronpeters
	

	


aaron@turbobytes.com	


@andydavies
	

	


andy.davies@nccgroup.com	


	

http://slidesh...
Upcoming SlideShare
Loading in...5
×

Mobile Web Performance - Getting and Staying Fast

873

Published on

Slides from mine and Aaaron Peter's talk at QCon London (Mar 2014) on how to measure mobile web performance, things that affect in and how to improve it

Published in: Technology

Transcript of "Mobile Web Performance - Getting and Staying Fast"

  1. 1. Mobile Web Performance Getting and Staying Fast! @aaronpeters, Turbobytes @andydavies, NCC Group
  2. 2. Mobile – Everybody is Using It “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!
  3. 3. And Spending More “Historically, mobile baskets have always been lower value than desktop but just before Christmas the difference was only about 6%”! Stuart McMillan, Schuh!
  4. 4. User Expectations are High “85% of mobile users expect sites to load at least as fast or faster than sites on their desktop”! Strangeloop Networks!
  5. 5. Mobile Pages are Growing! http://mobile.httparchive.org/!
  6. 6. “We’ve remade the Internet in our image… obese.” Jason Grigsby! ! http://www.flickr.com/photos/mrtopher/1414159786
  7. 7. We’re relying on ever faster phones and networks! ! http://www.flickr.com/photos/willposh/3825768273/
  8. 8. 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!
  9. 9. ! http://www.flickr.com/photos/endlisnis/174511509
  10. 10. So many devices… lots of variation! ! http://www.flickr.com/photos/adactio/12674230513
  11. 11. Meet the $25 Smartphone! ! http://www.flickr.com/photos/mozillaeu/12748349115
  12. 12. Differing Network Environments! GPRS! EDGE! 3G! 4G! WiFi! Faster, Lower Latency???! Special networks…! Conference, Hotel, Coffee shop WiFi!
  13. 13. Latency is a huge 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/!
  14. 14. It’s not just about speed! ! http://www.flickr.com/photos/fastjack/2943793818
  15. 15. 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!
  16. 16. Measuring mobile web performance! http://www.flickr.com/photos/14516334@N00/286709039/
  17. 17. Navigation Timing API 9+ window.performance.timing;   http://goo.gl/x483FY !
  18. 18. Resource Timing API not on iPad 10+ DNS and Connect times are broken http://goo.gl/afV9OD ! window.performance.getEntries();  
  19. 19. First Paint time window.chrome.loadTimes().firstPaintTime;     9+ window.performance.msFirstPaint;   Works on IE Mobile? Don’t know …   firstPaintTime = ‘first time MozAfterPaint event fires’ window.performance.timing.navigationStart  
  20. 20. WebPagetest
  21. 21. WebPagetest I built and operate WPT.! I am awesome.! •  Best tool to analyze web performance! •  Real browser, many locations around the globe! •  IE6-11, Firefox, Chrome, Android, iPhone, iPad…! •  Specify connection speeds, packet loss! •  Extensive API (eg. multi-page testing)! •  Run your own private instance!!
  22. 22. Appurify’s WebPagetest! Many devices! Many carrier profiles! All located in San Francisco! http://appurify.webpagetest.org ! ! https://androidwpt.appurify.com ! !
  23. 23. Chrome DevTools For Mobile http://goo.gl/jfKyAN" " " "http://goo.gl/WS5N8E!
  24. 24. Finding the problems! http://www.flickr.com/photos/chasblackman/6795013658/
  25. 25. nbcnews.com Dulles, VA, Motorola G – Chrome, Shaped 3G (1.6 Mbps/768 Kbps, 300ms RTT)!
  26. 26. nbcnews.com 18.7 sec Start Render Time! 344 ! Requests! 1523 KB Total Transfer Size! 115 different domains !"
  27. 27. htc.com
  28. 28. htc.com 9.4 sec 7 .js files = 200 KB = too much Start Render Time! >1 MB files ! 77 Requests! 3,256 KB ! Total Transfer Size!
  29. 29. Solving the problems: make it faster! http://www.flickr.com/photos/velacreations/5249327029/
  30. 30. > Minimize transfer size Send less bytes… A LOT LESS!
  31. 31. Send text based files compressed Savings: 10% – 80% !!! !
  32. 32. Minimize image dimensions
  33. 33. Crunch images Served by apple.com Optimized with ImageOptim 380 KB 179 KB
  34. 34. Don’t send what is not needed apple.com on Nexus 7! ! 370 KB above fold hero image Same image in higher res, now 442 KB. So why send that first one??
  35. 35. Use vector graphics instead?! SVG: 12 KB vs PNG: 86KB!
  36. 36. Icon fonts! ★ ★! ☆ ☆! ♥ ♥! ☁ ☁! Heydings by Heydon Works! “Bog Standard Font”!
  37. 37. Use CSS! border-radius: 20px; ! background: linear-gradient(left, #f06, #ff0);! Some combinations produce poor paint performance!
  38. 38. Webfonts? Maybe better not 4.5 seconds … blocking!!
  39. 39. > Minimize number of requests
  40. 40. > Increase initcwnd initial congestion window is a server parameter! initcwnd  =  10  means server sends initially 10 packets (~14KB) over a TCP connection! Default value is 10 in Linux 2.6.39+! ! Most CDNs use 10, but some as high as 26!
  41. 41. > Increase initcwnd A higher initcwnd really helps, especially with small object delivery! http://goo.gl/ee0xBs !
  42. 42. > Cache aggressively
  43. 43. Fonts, Stylesheets, JavaScript block rendering! ! http://www.flickr.com/photos/timo/3995227
  44. 44. ???!
  45. 45. CSS! http://mobile.httparchive.org/!
  46. 46. Javascript! http://mobile.httparchive.org/!
  47. 47. Added 160kB to page Bounce rate increased by 12% on mobile ! https://speakerdeck.com/lara/design-for-performance!
  48. 48. We’ve fallen in love with web fonts! ! http://www.flickr.com/photos/splorp/4951916342
  49. 49. But at what cost?!
  50. 50. Use of Web Fonts is Growing! http://mobile.httparchive.org/!
  51. 51. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJK LMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstu vwxyz{|}~ ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁ ÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçè éêëìíîïðñòóôõö÷øùúûüýþÿĀāĂ㥹ĆćĈĉĊċČčĎďĐđ ĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľ ĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧ ŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſƒƠơƯưǰǺǻǼǽǾǿȘș Țțȷʼˆˇˉ˘˙˚˛˜˝˳̣̀́̃̉̏΄΅Ά·ΈΉΊΌΎΏΐΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠ ΡΣΤΥΦΧΨΩΪΫάέήίΰαβγδεζηθικλμνξοπρςστυφχψωϊϋό ύώϑϒϖЀЁЂЃЄЅІЇЈЉЊЋЌЍЎЏАБВГДЕЖЗИЙКЛМНО ПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуф хцчшщъыьэюяѐёђѓєѕіїјљњћќѝўџѠѡѢѣѤѥѦѧѨѩѪѫ ѬѭѮѯѰѱѲѳѴѵѶѷѸѹѺѻѼѽѾѿҀҁ҂҃҄҅҆҈҉ҊҋҌҍҎҏҐґҒғҔҕ ҖҗҘҙҚқҜҝҞҟҠҡҢңҤҥҦҧҨҩҪҫҬҭҮүҰұҲҳҴҵҶҷҸҹҺһҼ ҽҾҿӀӁӂӃӄӅӆӇӈӉӊӋӌӍӎӏӐӑӒӓӔӕӖӗӘәӚӛӜӝӞӟӠӡӢ ӣӤӥӦӧӨөӪӫӬӭӮӯӰӱӲӳӴӵӶӷӸӹӺӻӼӽӾӿԀԁԂԃԄԅԆԇԈ ԉԊԋԌԍԎԏԐԑԒԓḀḁḾḿẀẁẂẃẄẅẠạẢảẤấẦầẨẩẪẫẬậẮ ắẰằẲẳẴẵẶặẸẹẺẻẼẽẾếỀềỂểỄễỆệỈỉỊịỌọỎỏỐốỒồỔổỖ ! ỗỘộỚớỜờỞởỠỡỢợỤụỦủỨứỪừỬửỮữỰựỲỳỴỵỶỷỸỹὍ –—―‗‘’‚‛“”„†‡•…‰′″‹›‼⁄⁰⁴⁵⁶⁷⁸⁹ⁿ₣₤₧₫€℅ℓ№℠™Ω℮⅛⅜ ⅝ ⅞ ∂ ∆ ∏ ∑ − √ ∞ ∫ ≈ ≠ ≤ ≥ ◊ ff fi fl ffi ffl  ! Do we need all those font glyphs? Open Sans — 22.1 kB
  52. 52. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJK LMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstu vwxyz{|}~ ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁ ÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçè éêëìíîïðñòóôõö÷øùúûüýþÿĀāĂ㥹ĆćĈĉĊċČčĎďĐđ ĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľ ĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧ ŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſƒƠơƯưǰǺǻǼǽǾǿȘș Țțȷʼˆˇˉ˘˙˚˛˜˝˳̣̀́̃̉̏΄΅Ά·ΈΉΊΌΎΏΐΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠ ΡΣΤΥΦΧΨΩΪΫάέήίΰαβγδεζηθικλμνξοπρςστυφχψωϊϋό ύώϑϒϖЀЁЂЃЄЅІЇЈЉЊЋЌЍЎЏАБВГДЕЖЗИЙКЛМНО ПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуф хцчшщъыьэюяѐёђѓєѕіїјљњћќѝўџѠѡѢѣѤѥѦѧѨѩѪѫ ѬѭѮѯѰѱѲѳѴѵѶѷѸѹѺѻѼѽѾѿҀҁ҂҃҄҅҆҈҉ҊҋҌҍҎҏҐґҒғҔҕ ҖҗҘҙҚқҜҝҞҟҠҡҢңҤҥҦҧҨҩҪҫҬҭҮүҰұҲҳҴҵҶҷҸҹҺһҼ ҽҾҿӀӁӂӃӄӅӆӇӈӉӊӋӌӍӎӏӐӑӒӓӔӕӖӗӘәӚӛӜӝӞӟӠӡӢ ӣӤӥӦӧӨөӪӫӬӭӮӯӰӱӲӳӴӵӶӷӸӹӺӻӼӽӾӿԀԁԂԃԄԅԆԇԈ ԉԊԋԌԍԎԏԐԑԒԓḀḁḾḿẀẁẂẃẄẅẠạẢảẤấẦầẨẩẪẫẬậẮ ! ắẰằẲẳẴẵẶặẸẹẺẻẼẽẾếỀềỂểỄễỆệỈỉỊịỌọỎỏỐốỒồỔổỖ ỗỘộỚớỜờỞởỠỡỢợỤụỦủỨứỪừỬửỮữỰựỲỳỴỵỶỷỸỹὍ –—―‗‘’‚‛“”„†‡•…‰′″‹›‼⁄⁰⁴⁵⁶⁷⁸⁹ⁿ₣₤₧₫€℅ℓ№℠™Ω℮⅛⅜ ⅝ ⅞ ∂ ∆ ∏ ∑ − √ ∞ ∫ ≈ ≠ ≤ ≥ ◊ ff fi fl ffi ffl  ! 14.9 kB — 33% saving
  53. 53. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJK LMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstu vwxyz{|}~ ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁ ÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçè éêëìíîïðñòóôõö÷øùúûüýþÿĀāĂ㥹ĆćĈĉĊċČčĎďĐđ ĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľ ĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧ ŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſƒƠơƯưǰǺǻǼǽǾǿȘș Țțȷʼˆˇˉ˘˙˚˛˜˝˳̣̀́̃̉̏΄΅Ά·ΈΉΊΌΎΏΐΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠ ΡΣΤΥΦΧΨΩΪΫάέήίΰαβγδεζηθικλμνξοπρςστυφχψωϊϋό ύώϑϒϖЀЁЂЃЄЅІЇЈЉЊЋЌЍЎЏАБВГДЕЖЗИЙКЛМНО ПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуф хцчшщъыьэюяѐёђѓєѕіїјљњћќѝўџѠѡѢѣѤѥѦѧѨѩѪѫ ѬѭѮѯѰѱѲѳѴѵѶѷѸѹѺѻѼѽѾѿҀҁ҂҃҄҅҆҈҉ҊҋҌҍҎҏҐґҒғҔҕ ҖҗҘҙҚқҜҝҞҟҠҡҢңҤҥҦҧҨҩҪҫҬҭҮүҰұҲҳҴҵҶҷҸҹҺһҼ ҽҾҿӀӁӂӃӄӅӆӇӈӉӊӋӌӍӎӏӐӑӒӓӔӕӖӗӘәӚӛӜӝӞӟӠӡӢ ӣӤӥӦӧӨөӪӫӬӭӮӯӰӱӲӳӴӵӶӷӸӹӺӻӼӽӾӿԀԁԂԃԄԅԆԇԈ ԉԊԋԌԍԎԏԐԑԒԓḀḁḾḿẀẁẂẃẄẅẠạẢảẤấẦầẨẩẪẫẬậẮ ! ắẰằẲẳẴẵẶặẸẹẺẻẼẽẾếỀềỂểỄễỆệỈỉỊịỌọỎỏỐốỒồỔổỖ ỗỘộỚớỜờỞởỠỡỢợỤụỦủỨứỪừỬửỮữỰựỲỳỴỵỶỷỸỹὍ –—―‗‘’‚‛“”„†‡•…‰′″‹›‼⁄⁰⁴⁵⁶⁷⁸⁹ⁿ₣₤₧₫€℅ℓ№℠™Ω℮⅛⅜ ⅝ ⅞ ∂ ∆ ∏ ∑ − √ ∞ ∫ ≈ ≠ ≤ ≥ ◊ ff fi fl ffi ffl  ! 8.3 kB — 62% saving
  54. 54. Provide hints before a resource is discovered! <link rel="dns-prefetch" href="other.hostname.com"> <link rel="subresource" href="/some_other_resource.js"> <link rel="prefetch" href="/some_other_resource.jpeg"> <link rel="prerender" href="//domain.com/next_page.html">
  55. 55. Prioritise the Content! Guardian divide page into: - Content - Enhancements - Leftovers
  56. 56. What can we put off until later?! ! http://www.flickr.com/photos/melodramababs/5962771148
  57. 57. https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design!
  58. 58. Network request! still in progress! User gets ! feedback!
  59. 59. Magic, the Art of Misdirection! ! http://www.flickr.com/photos/nozzer/3990622685
  60. 60. http://mercury.io/blog/the-psychology-of-waiting-loading-animations-and-facebook!
  61. 61. Embrace Constraints… Set a budget! ! http://www.flickr.com/photos/communityfriend/2342578485
  62. 62. 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
  63. 63. For a faster mobile site:! "  "  "  "  "  Measure Move less bytes Prioritise what you move Move them while no-one is looking Distract the visitor!!
  64. 64. Thank You! ! @aaronpeters aaron@turbobytes.com @andydavies andy.davies@nccgroup.com http://slideshare.net/andydavies! ! http://www.flickr.com/photos/nzbuu/4093456029
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×