Front-end performance

Last updated on
25 September 2023

Front-end performance is a challenge shared by all mobile solutions. This section lists strategies and tools for improving and testing mobile site performance.

Strategies

Below are some strategies that may improve site performance:

  • Minify JavaScript, CSS and HTML.
  • Aggregate JavaScript and CSS.
  • Parallelize assets downloads across hostnames.
  • Leverage browser caching.
  • Enable gzip compression.
  • Specify image dimensions.
  • Optimize images.
  • Use lazy loading for site assets.
  • Leverage breakpoints to download appropriate image sizes.
  • Keep Inline background images under ~4KB in size.
  • Remove unused CSS.
  • Use efficient CSS selectors.
  • Download 3rd party scripts asynchronously.

Testing

Here are some tools that can be used to test front-end performance:

  • YSlow profiles pages and offers recommendations for speeding them up.
  • Network tab of Firefox/Chrome/Safari/Opera devtools.
  • WebPageTest.org offers front-end performance testing from various locations worldwide in the browser of your choice.
  • gtmetrix.com & loads.in also offer front-end performance testing.
  • PageSpeed Insights offers website performance insights and provides recommendations to improve page speed on all devices.

Tools

Here is a list of tools that can help you achieve the strategies above:

  • Use PageSpeed Insights to get the list of recommendations for your website.
  • Compress theme assets with image compressor software like tinypng, tinyjpg or compressjpeg.
  • Distribute your assets with CDN networks like Cloudflare or Akamai.
  • Use Chrome devtools Audits tab to check what CSS is not being used on the current page.

Help improve this page

Page status: No known problems

You can: