summary of a post by LukeW on lukew.com
Users expect sites to load in less than 2 seconds
Slow sites are the main reason shoppers abandon eCommerce sites
Here are some technical details of what you can do to improve your site’s performance on mobile:
1 Build mobile-first responsive designs
- Start with baseline mobile experience and enhance with a media cascade from small to large screens
- By building mobile first, you focus on key screens, flows and interactions. Your desktop site will also benefit from this focus
2. Keep CSS images in their place
- Scope images inside media queries and set up media queries to isolate different sized images
- Override images in CSS media queries mostly works, but not on Android 2 devices
3 Conditionally load Javascript based on capabilities
- The Ajax Include pattern serves simple default elements to mobile and enhances at larger sizes
4 Deliver different sized images to different screens
- Resolution switching: load the most appropriate assets
- Consider changing image crops at different sizes
5 Handle high res images carefully
- Display requirements can cause 3000% difference in memory requirements between devices
- eCommerce sites often serve optimized images and hi res only on demand
- Make sure your Javascript isn’t downloading both hi res and optimized images
walkerux 