Josh Fraser: Mobile performance tricks
6 likes1,092 views
Josh Fraser presented tricks for optimizing mobile performance. He discussed challenges like smaller screens and connections on mobile. Some strategies he covered include resizing images, lazy loading below the fold images, using localStorage to reduce requests, preloading content, and determining when to inline or externalize resources. He emphasized measuring performance and automating optimizations.
Josh Fraser: Mobile performance tricks
- 1. Tricks for mobile performance Josh Fraser
- 2. Hi. Im Josh Cofounder & CEO of Find me on the web... @joshfraser on twitter joshfraser.com josh@torbit.com @joshfraser | torbit.com
- 6. Whats special about mobile? @joshfraser | torbit.com
- 7. Challenges on mobile Smaller screen Slower connections Lower bandwidth Higher latency Smaller cache sizes Lots of differences between devices @joshfraser | torbit.com
- 8. My focus is on automated solutions @joshfraser | torbit.com
- 9. Understanding differences between devices @joshfraser | torbit.com
- 10. Platform breakdown HP / Palm 2.8% Microsoft 7.5% Google 34.7% Apple 25.5% RIM 27.1% ComScore, May 2011 @joshfraser | torbit.com
- 11. Differences between devices Screen sizes Processor speeds Different browsers Different cache sizes 3G vs. wi鍖 What about tablets? @joshfraser | torbit.com
- 12. Resizing images @joshfraser | torbit.com
- 13. Resizing images Resized to 35% Full size image @joshfraser | torbit.com
- 14. Resizing images Finding the best ratio Replacement strategy Wait for onload Wait for onready Wait for a set amount of time Interlaced vs. low resolution place holders @joshfraser | torbit.com
- 15. Lazy-loading below the fold @joshfraser | torbit.com
- 16. Lazy-loading images Replace lower images with a placeholder Set width & height attributes on IMG tag to prevent re鍖ows Determine below-the-fold Keep track of screen resolutions for each device Detect with JavaScript & remember with cookies Replacement strategy @joshfraser | torbit.com
- 17. Using localStorage @joshfraser | torbit.com
- 18. Using localStorage Technique used by Google, Facebook & Bing Gives you dedicated cache for domain Generally 5MB Reduce HTTP requests Include static resources with the initial HTML Use cookies to track which resources are in localStorage Best when automated @joshfraser | torbit.com
- 19. How it works @joshfraser | torbit.com
- 20. Using localStorage Send static resources as inline JavaScript For the JavaScript Use document.write for outputting JavaScript For the CSS Replace the link to original CSS 鍖le with an empty style tag Use innerHTML to write contents Everything is still executed in the correct order @joshfraser | torbit.com
- 21. Bene鍖ts of localStorage Dramatically reduce HTTP requests Extend cache life to optimize return visits Safer than many other techniques used today @joshfraser | torbit.com
- 22. Without localStorage @joshfraser | torbit.com
- 23. With localStorage 2.2x faster @joshfraser | torbit.com
- 24. Preloading content for the next page view @joshfraser | torbit.com
- 25. Preloading content Wait until onload Dont slow down current page Predictive analysis Decide which page resources to preload based on historical data Use localStorage Be respectful of metered bandwidth @joshfraser | torbit.com
- 26. When to inline or externalize CSS or JavaScript @joshfraser | torbit.com
- 27. Inline vs. external External Inline @joshfraser | torbit.com
- 28. Inline vs. external Separation of code is nice for development External resources allow for future cache hits Extra HTTP requests are expensive @joshfraser | torbit.com
- 29. Use localStorage for the best of both worlds @joshfraser | torbit.com
- 31. Iframes Often used to get around cross-domain issues Facebook like button, Google +1, etc Should be avoided even more on mobile Can often be lazy-loaded @joshfraser | torbit.com
- 32. Loading indicators @joshfraser | torbit.com
- 34. Trade-offs Preloading Fast user experience vs. high cost of bandwidth Image quality Faster loading vs. better quality This page view vs next page view Requirements & results vary for every site @joshfraser | torbit.com
- 35. The best way to deal with trade-offs is to use automation and measurement @joshfraser | torbit.com
- 36. The easiest way to automate Visit torbit.com Sign up using the invite code velocity This week: use coupon velocity for 20% off! @joshfraser | torbit.com
- 37. In summary Reduce the # of HTTP requests Reduce 鍖le sizes Take advantage of localStorage Automate @joshfraser | torbit.com
- 38. Thank you! @joshfraser josh@torbit.com @joshfraser | torbit.com
- 39. Questions? @joshfraser josh@torbit.com @joshfraser | torbit.com