Your SlideShare is downloading. ×
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


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

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Making Mobile Sites Faster@andydavies#Port80, May 2013
  • 2. Imagine… later today…
  • 3. How long would you wait here?
  • 4. Some of this advice will expire
  • 5. 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.”“we are looking at 100-1000ms RTT rangeon mobile”Ilya Grigorik
  • 8. 3G Radio Resource Control CELL_FACHCELL_DCH Idle for 5sIdle for 12s1-2s delay!Exact timings vary and depend on carrier NOT device1s delay
  • 9.’s not just about speed
  • 10. Some things block
  • 11.’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?
  • 15. And what about those scripts?
  • 16. Remember GZIP and Caching
  • 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 site
  • 21. Time to bury bitmapped images?
  • 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?
  • 26. Size images for the viewport
  • 27. Proposed srcset attribute<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 Grigsby
  • 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 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 versions CMS- Scripts- CDNs- Dedicated services
  • 33. We’re adapting on the client-side
  • 34. But we shouldn’t forget about the server
  • 35. devicewidthClient Hints HTTP Header (proposed) dh=598, dw=384, dpr=2.0deviceheightdevicepixelratio
  • 36. ! "ipinfo": {! ! "ip_address":"",! !"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…
  • 39. Facebook artificially slowed downscrolling from 60fps to 30fpsUser Engagement Collapsed
  • 40. So… what wrecks smoothness?
  • 41. “Rendering Without Lumpy Bits”
  • 42. Don’t just rely on rules… learn how to measure
  • 43.
  • 44. Thank You!@andydaviesandy@asteno.com