Making Mobile Sites Faster
4 likes2,251 views
The document discusses strategies for making mobile websites faster, including optimizing images, caching resources, minimizing redirects, leveraging new HTML elements like <picture>, compressing files, and ensuring smooth performance after page load. It emphasizes the importance of measuring site performance and adapting delivery based on network conditions and device capabilities.
Making Mobile Sites Faster
- 1. Making Mobile Sites Faster @andydavies #Port80, May 2013 http://www.flickr.com/photos/b-tal/156919562
- 3. How long would you wait here? http://www.flickr.com/photos/oatsy40/6198212129
- 4. Some of this advice will expire http://www.flickr.com/photos/21560098@N06/7127570205
- 5. http://www.flickr.com/photos/szene/8220511232 So many devices… lots of variation
- 6. Differing Network Environments GPRS EDGE 3G 4G WiFi Faster, Lower Latency??? Special networks… Conference, Hotel & Coffee shop WiFi
- 7. Latency is a huge issue “In 2012, the average worldwide RTT to Google is still ~100ms, and ~50-60ms within the US.” http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/ “we are looking at 100-1000ms RTT range on mobile” Ilya Grigorik
- 8. 3G Radio Resource Control http://web.eecs.umich.edu/~fengqian/paper/3g_imc10.pdf IDLE CELL_FACH CELL_DCH Idle for 5s Idle for 12s 1-2s delay! Exact timings vary and depend on carrier NOT device 1s delay
- 11. http://www.flickr.com/photos/wiertz/6922984303 What’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 Caching http://www.flickr.com/photos/_flood_/6732863457
- 17. Re-Use TCP Connections - HTTP Keep-Alive (HTML5 Boilerplate has example settings for Apache) Orange segments are new TCP connections being opened
- 18. Beware of Redirects 367ms and still no HTML! Set a cache lifetime and make them private
- 19. #OneLessJPG Misquoted a lot recently, original quote refers to relative sizes of JS libraries
- 20. Images Scripts Stylesheets Other HTML Images are 70% of an ‘average’ mobile site http://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 Works Icon fonts ★ ★ ♥ ♥ ☁ ☁ “Bog Standard Font” ☆ ☆
- 24. Use CSS border-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 viewport http://www.flickr.com/photos/emzee/139794246
- 27. Proposed srcset attribute http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/ <img src="beach-desktop.jpeg" srcset="beach-mobile.jpeg 720w beach-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 http://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 element http://www.w3.org/TR/html-picture-element
- 31. Cache-Control: no-transform Stop proxies recompressing your images Unclear how many proxies follow the standard
- 32. Do you really want to do it by hand? Can adapt format for visitor e.g.WebP Automate generate image versions http://www.flickr.com/photos/skrubu/4962771959 - CMS - Scripts - CDNs - Dedicated services
- 33. We’re adapting on the client-side http://seesparkbox.com
- 34. But we shouldn’t forget about the server http://www.flickr.com/photos/getbutterfly/6317955134
- 35. device width Client Hints HTTP Header (proposed) http://tools.ietf.org/html/draft-grigorik-http-client-hints-00 CH: dh=598, dw=384, dpr=2.0 device height device pixel ratio
- 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 API What if we could detect mobile connections?
- 38. But loading fast is only the start… http://www.flickr.com/photos/foodthinkers/4442279870
- 39. Facebook artificially slowed down scrolling from 60fps to 30fps User 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 measure http://www.flickr.com/photos/chandramarsono/4324373384