Josh Fraser: Mobile performance tricks
6 likes1,094 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. I’m Josh ‣ Cofounder & CEO of ‣ Find me on the web... ‣ @joshfraser on twitter ‣ joshfraser.com ‣ josh@torbit.com @joshfraser | torbit.com
- 6. What’s 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. wifi ‣ 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 reflows ‣ 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 file with an empty style tag ‣ Use innerHTML to write contents ‣ Everything is still executed in the correct order @joshfraser | torbit.com
- 21. Benefits 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 ‣ Don’t 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 file 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