Making Mobile Sites Faster

  • 1,154 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,154
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
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