Front-end performance

Last updated on
22 September 2016

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.