Front-end performance

Front end performance is a critical task shared by all mobile solutions.

• Minify JavaScript, CSS and HTML
• Combine JavaScript and combine CSS
• Parallelize downloads across hostnames
• Leverage browser caching
• Enable gzip compression
• Specify image dimensions
• Optimize images
• Lazy loading assets
• Inline background images under ~4KB
• Remove unused CSS
• Use efficient CSS selectors

Testing

Here are some tools that can be used to test frontend performance:

• YSlow profiles pages and offers recommendations for speeding them up.
• Network tab of Firebug/Chrome/Safari/Opera devtools.
• Learn to read waterfall charts from Strangeloop Networks
• WebPageTest.org offers frontend performance testing from various locations worldwide. You choose the browser to test.
• gtmetrix.com & loads.in also offer more front-end performance testing.
• jdrop.org allows you to collect data on mobile devices and analyze it on a bigger computer using JavaScript-powered storage of test results.
• PageSpeed Insights offers website performance insights and provide recommendation to improve page speed on all devices.