• Save
Making Mobile Sites Faster
Upcoming SlideShare
Loading in...5

Making Mobile Sites Faster



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

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



Total Views
Views on SlideShare
Embed Views



3 Embeds 110

https://twitter.com 87
http://lanyrd.com 19
http://eventifier.co 4



Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Making Mobile Sites Faster Making Mobile Sites Faster Presentation Transcript

  • 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 WiFi
  • 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
  • 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
  • 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 media="(min-width: 480px)" href="s480.css" /><link media="(min-width: 750px)" href="s750.css" /><link media="(min-width: 960px)" href="s960.css" />
  • 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 connectionsbeing opened
  • 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&#x2605; ★&#x2665; ♥&#x2601; ☁“Bog Standard Font”&#x2606; ☆
  • 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-mobile.jpeg 720wbeach-tablet.jpeg 1280w"alt="The beach is gorgeous.">image-set() is CSS equivalent
  • 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/5795228030
  • <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
  • 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.com/photos/skrubu/4962771959- CMS- Scripts- CDNs- Dedicated services
  • 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=384, dpr=2.0deviceheightdevicepixelratio
  • ! "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?
  • 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