Making Mobile Sites Faster@andydavies#Port80, May 2013http://www.flickr.com/photos/b-tal/156919562
Imagine… later today…http://www.flickr.com/photos/andrew_bolin/3909446250
How long would you wait here?http://www.flickr.com/photos/oatsy40/6198212129
Some of this advice will expirehttp://www.flickr.com/photos/21560098@N06/7127570205
http://www.flickr.com/photos/szene/8220511232So many devices… lots of variation
Differing Network EnvironmentsGPRS EDGE 3G 4G WiFiFaster, Lower Latency???Special networks…Conference, Hotel & Coffee shop...
Latency is a huge issue“In 2012, the average worldwide RTT toGoogle is still ~100ms, and ~50-60ms withinthe US.”http://www...
3G Radio Resource Controlhttp://web.eecs.umich.edu/~fengqian/paper/3g_imc10.pdfIDLE CELL_FACHCELL_DCH Idle for 5sIdle for ...
http://www.flickr.com/photos/fastjack/2943793818It’s not just about speed
Some things blockhttp://www.flickr.com/photos/timo/3995227
http://www.flickr.com/photos/wiertz/6922984303What’s needed to render the page?
Fast mobile sites have short waterfalls
Do you deploy your CSS like this?<link href="screen.core.css" /><link media="(min-width: 320px)" href="s320.css" /><link m...
Do you really need that font?http://www.flickr.com/photos/symphoney/76513801
And what about those scripts?http://www.flickr.com/photos/alikins/4439062727
Remember GZIP and Cachinghttp://www.flickr.com/photos/_flood_/6732863457
Re-Use TCP Connections - HTTP Keep-Alive(HTML5 Boilerplate has example settings for Apache)Orange segments arenew TCP conn...
Beware of Redirects367ms and still no HTML!Set a cache lifetime and make them private
#OneLessJPGMisquoted a lot recently, original quoterefers to relative sizes of JS libraries
ImagesScriptsStylesheetsOtherHTMLImages are 70% of an ‘average’ mobile sitehttp://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
Heydings by Heydon WorksIcon fonts★ ★♥ ♥☁ ☁“Bog Standard Font”☆ ☆
Use CSSborder-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 viewporthttp://www.flickr.com/photos/emzee/139794246
Proposed srcset attributehttp://www.w3.org/html/wg/drafts/srcset/w3c-srcset/<img src="beach-desktop.jpeg"srcset="beach-mob...
Compressive Images (experimental)Double the dimensions but lower the quality
As images get smaller need to focus on subject“Art Direction” - Jason Grigsbyhttp://www.flickr.com/photos/barackobamadotcom...
<picture><source media="(min-width: 45em)" src="large.jpg"><source media="(min-width: 18em)" src="med.jpg"><source src="sm...
Cache-Control: no-transformStop proxies recompressing your imagesUnclear how many proxies follow the standard
Do you really want to do it by hand?Can adapt format for visitor e.g.WebPAutomate generate image versionshttp://www.flickr....
We’re adapting on the client-sidehttp://seesparkbox.com
But we shouldn’t forget about the serverhttp://www.flickr.com/photos/getbutterfly/6317955134
devicewidthClient Hints HTTP Header (proposed)http://tools.ietf.org/html/draft-grigorik-http-client-hints-00CH: dh=598, dw...
! "ipinfo": {! ! "ip_address":"212.183.128.252",! !"ip_type":"Mapped",! !"Network": {! !! "organization":"vodafone limited...
cache-control: private&vary: user-agentManaging Caching
But loading fast is only the start…http://www.flickr.com/photos/foodthinkers/4442279870
Facebook artificially slowed downscrolling from 60fps to 30fpsUser Engagement Collapsed
So… what wrecks smoothness?http://www.flickr.com/photos/18854914@N04/2216950328
“Rendering Without Lumpy Bits”http://www.flickr.com/photos/marcthiele/8114191496
Don’t just rely on rules… learn how to measurehttp://www.flickr.com/photos/chandramarsono/4324373384
http://www.flickr.com/photos/alesimages/4215559895
Thank You!@andydaviesandy@asteno.comhttp://slideshare.net/andydavieshttp://www.flickr.com/photos/nzbuu/4093456029
Upcoming SlideShare
Loading in...5
×

Making Mobile Sites Faster

1,286

Published on

Slides from my talk on mobile performance at Port 80, Newport

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,286
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Making Mobile Sites Faster"

  1. 1. Making Mobile Sites Faster@andydavies#Port80, May 2013http://www.flickr.com/photos/b-tal/156919562
  2. 2. Imagine… later today…http://www.flickr.com/photos/andrew_bolin/3909446250
  3. 3. How long would you wait here?http://www.flickr.com/photos/oatsy40/6198212129
  4. 4. Some of this advice will expirehttp://www.flickr.com/photos/21560098@N06/7127570205
  5. 5. http://www.flickr.com/photos/szene/8220511232So many devices… lots of variation
  6. 6. Differing Network EnvironmentsGPRS EDGE 3G 4G WiFiFaster, Lower Latency???Special networks…Conference, Hotel & Coffee shop WiFi
  7. 7. Latency is a huge issue“In 2012, the average worldwide RTT toGoogle is still ~100ms, and ~50-60ms withinthe US.”http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/“we are looking at 100-1000ms RTT rangeon mobile”Ilya Grigorik
  8. 8. 3G Radio Resource Controlhttp://web.eecs.umich.edu/~fengqian/paper/3g_imc10.pdfIDLE CELL_FACHCELL_DCH Idle for 5sIdle for 12s1-2s delay!Exact timings vary and depend on carrier NOT device1s delay
  9. 9. http://www.flickr.com/photos/fastjack/2943793818It’s not just about speed
  10. 10. Some things blockhttp://www.flickr.com/photos/timo/3995227
  11. 11. http://www.flickr.com/photos/wiertz/6922984303What’s needed to render the page?
  12. 12. Fast mobile sites have short waterfalls
  13. 13. Do you deploy your CSS like this?<link href="screen.core.css" /><link media="(min-width: 320px)" href="s320.css" /><link media="(min-width: 480px)" href="s480.css" /><link media="(min-width: 750px)" href="s750.css" /><link media="(min-width: 960px)" href="s960.css" />
  14. 14. Do you really need that font?http://www.flickr.com/photos/symphoney/76513801
  15. 15. And what about those scripts?http://www.flickr.com/photos/alikins/4439062727
  16. 16. Remember GZIP and Cachinghttp://www.flickr.com/photos/_flood_/6732863457
  17. 17. Re-Use TCP Connections - HTTP Keep-Alive(HTML5 Boilerplate has example settings for Apache)Orange segments arenew TCP connectionsbeing opened
  18. 18. Beware of Redirects367ms and still no HTML!Set a cache lifetime and make them private
  19. 19. #OneLessJPGMisquoted a lot recently, original quoterefers to relative sizes of JS libraries
  20. 20. ImagesScriptsStylesheetsOtherHTMLImages are 70% of an ‘average’ mobile sitehttp://mobile.httparchive.org
  21. 21. Time to bury bitmapped images?http://www.flickr.com/photos/tonyjcase/7183556158
  22. 22. Use vector graphics instead?SVG: 12 KB vs PNG: 86KB
  23. 23. Heydings by Heydon WorksIcon fonts★ ★♥ ♥☁ ☁“Bog Standard Font”☆ ☆
  24. 24. Use CSSborder-radius: 20px;background: linear-gradient(left, #f06, #ff0);Some combinations produce poor paint performance
  25. 25. What if only a bitmap image will do?http://www.flickr.com/photos/orkomedix/5026054826
  26. 26. Size images for the viewporthttp://www.flickr.com/photos/emzee/139794246
  27. 27. Proposed srcset attributehttp://www.w3.org/html/wg/drafts/srcset/w3c-srcset/<img src="beach-desktop.jpeg"srcset="beach-mobile.jpeg 720wbeach-tablet.jpeg 1280w"alt="The beach is gorgeous.">image-set() is CSS equivalent
  28. 28. Compressive Images (experimental)Double the dimensions but lower the quality
  29. 29. As images get smaller need to focus on subject“Art Direction” - Jason Grigsbyhttp://www.flickr.com/photos/barackobamadotcom/5795228030
  30. 30. <picture><source media="(min-width: 45em)" src="large.jpg"><source media="(min-width: 18em)" src="med.jpg"><source src="small.jpg"><img src="small.jpg" alt=""><p>Accessible text</p></picture>Proposed picture elementhttp://www.w3.org/TR/html-picture-element
  31. 31. Cache-Control: no-transformStop proxies recompressing your imagesUnclear how many proxies follow the standard
  32. 32. Do you really want to do it by hand?Can adapt format for visitor e.g.WebPAutomate generate image versionshttp://www.flickr.com/photos/skrubu/4962771959- CMS- Scripts- CDNs- Dedicated services
  33. 33. We’re adapting on the client-sidehttp://seesparkbox.com
  34. 34. But we shouldn’t forget about the serverhttp://www.flickr.com/photos/getbutterfly/6317955134
  35. 35. devicewidthClient Hints HTTP Header (proposed)http://tools.ietf.org/html/draft-grigorik-http-client-hints-00CH: dh=598, dw=384, dpr=2.0deviceheightdevicepixelratio
  36. 36. ! "ipinfo": {! ! "ip_address":"212.183.128.252",! !"ip_type":"Mapped",! !"Network": {! !! "organization":"vodafone limited",! ! !"carrier":"vodafone limited",! ! !"asn":25135,! ! !"connection_type":"mobile wireless",! ! !"line_speed":"low",! ! !"ip_routing_type":"mobile gateway",! ! !"Domain": {! ! !! "tld":"net",! ! !! "sld":"vodafone"! ! !! }! ! !},Quova GeoPoint APIWhat if we could detect mobile connections?
  37. 37. cache-control: private&vary: user-agentManaging Caching
  38. 38. But loading fast is only the start…http://www.flickr.com/photos/foodthinkers/4442279870
  39. 39. Facebook artificially slowed downscrolling from 60fps to 30fpsUser Engagement Collapsed
  40. 40. So… what wrecks smoothness?http://www.flickr.com/photos/18854914@N04/2216950328
  41. 41. “Rendering Without Lumpy Bits”http://www.flickr.com/photos/marcthiele/8114191496
  42. 42. Don’t just rely on rules… learn how to measurehttp://www.flickr.com/photos/chandramarsono/4324373384
  43. 43. http://www.flickr.com/photos/alesimages/4215559895
  44. 44. Thank You!@andydaviesandy@asteno.comhttp://slideshare.net/andydavieshttp://www.flickr.com/photos/nzbuu/4093456029

×