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.
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
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
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
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
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
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
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
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