Your SlideShare is downloading. ×
0
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Making Mobile Sites Faster
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Making Mobile Sites Faster

1,253

Published on

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

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,253
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Making Mobile Sites Faster@andydavies#Port80, May 2013http://www.flickr.com/photos/b-tal/156919562
  • 2. Imagine… later today…http://www.flickr.com/photos/andrew_bolin/3909446250
  • 3. How long would you wait here?http://www.flickr.com/photos/oatsy40/6198212129
  • 4. Some of this advice will expirehttp://www.flickr.com/photos/21560098@N06/7127570205
  • 5. http://www.flickr.com/photos/szene/8220511232So many devices… lots of variation
  • 6. Differing Network EnvironmentsGPRS EDGE 3G 4G WiFiFaster, Lower Latency???Special networks…Conference, Hotel & Coffee shop WiFi
  • 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. 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. http://www.flickr.com/photos/fastjack/2943793818It’s not just about speed
  • 10. Some things blockhttp://www.flickr.com/photos/timo/3995227
  • 11. http://www.flickr.com/photos/wiertz/6922984303What’s needed to render the page?
  • 12. Fast mobile sites have short waterfalls
  • 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. Do you really need that font?http://www.flickr.com/photos/symphoney/76513801
  • 15. And what about those scripts?http://www.flickr.com/photos/alikins/4439062727
  • 16. Remember GZIP and Cachinghttp://www.flickr.com/photos/_flood_/6732863457
  • 17. Re-Use TCP Connections - HTTP Keep-Alive(HTML5 Boilerplate has example settings for Apache)Orange segments arenew TCP connectionsbeing opened
  • 18. Beware of Redirects367ms and still no HTML!Set a cache lifetime and make them private
  • 19. #OneLessJPGMisquoted a lot recently, original quoterefers to relative sizes of JS libraries
  • 20. ImagesScriptsStylesheetsOtherHTMLImages are 70% of an ‘average’ mobile sitehttp://mobile.httparchive.org
  • 21. Time to bury bitmapped images?http://www.flickr.com/photos/tonyjcase/7183556158
  • 22. Use vector graphics instead?SVG: 12 KB vs PNG: 86KB
  • 23. Heydings by Heydon WorksIcon fonts&#x2605; ★&#x2665; ♥&#x2601; ☁“Bog Standard Font”&#x2606; ☆
  • 24. Use CSSborder-radius: 20px;background: linear-gradient(left, #f06, #ff0);Some combinations produce poor paint performance
  • 25. What if only a bitmap image will do?http://www.flickr.com/photos/orkomedix/5026054826
  • 26. Size images for the viewporthttp://www.flickr.com/photos/emzee/139794246
  • 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. Compressive Images (experimental)Double the dimensions but lower the quality
  • 29. As images get smaller need to focus on subject“Art Direction” - Jason Grigsbyhttp://www.flickr.com/photos/barackobamadotcom/5795228030
  • 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. Cache-Control: no-transformStop proxies recompressing your imagesUnclear how many proxies follow the standard
  • 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. We’re adapting on the client-sidehttp://seesparkbox.com
  • 34. But we shouldn’t forget about the serverhttp://www.flickr.com/photos/getbutterfly/6317955134
  • 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. ! "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. cache-control: private&vary: user-agentManaging Caching
  • 38. But loading fast is only the start…http://www.flickr.com/photos/foodthinkers/4442279870
  • 39. Facebook artificially slowed downscrolling from 60fps to 30fpsUser Engagement Collapsed
  • 40. So… what wrecks smoothness?http://www.flickr.com/photos/18854914@N04/2216950328
  • 41. “Rendering Without Lumpy Bits”http://www.flickr.com/photos/marcthiele/8114191496
  • 42. Don’t just rely on rules… learn how to measurehttp://www.flickr.com/photos/chandramarsono/4324373384
  • 43. http://www.flickr.com/photos/alesimages/4215559895
  • 44. Thank You!@andydaviesandy@asteno.comhttp://slideshare.net/andydavieshttp://www.flickr.com/photos/nzbuu/4093456029

×