Making Mobile Sites Faster
4 likes•2,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
- 9. http://www.flickr.com/photos/fastjack/2943793818 It’s not just about speed
- 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