Front-end performance

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.
• Implement modern image formats such as webP and AVIF.

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.