Skip to main content

The GDS Way and its content is intended for internal use by the GDS and CO CDIO communities.

How to optimise frontend performance

You should focus on frontend performance when developing your service’s website. This will improve the user experience of your service by making your website respond faster and work better on all devices.

Prioritise performance tasks

You can optimise your site’s frontend performance by prioritising tasks that will improve your site speed. Prioritise things you must do (high) over medium or low priority (nice to have) tasks.

For example:

Priority Example Action
High Position styles correctly Set styles at the top of the page and defer scripts
Minimise HTTP requests Minimise tiling icons, CSS and JavaScript files to reduce size and loading time [HTTP/1.1 only]
Compress static resources Use minification, Gzip, and Brotli to compress CSS and JavaScript code
Set correct Headers Set correct Cache-Control and ETag headers on assets for optimal caching
Medium Look for empty image src attributes Avoid using empty image src attributes as some browsers always send requests to them, resulting in additional traffic
Include width and height attributes on images to minimise layout thrashing Make sure to include these attributes to improve visual stability and the Cumulative Layout Shift (CLS) metric
Minimise TCP connections Use fewer third-party domains to reduce the number of DNS + TCP + SSL negotiations per page
Investigate lazy loading For pages with many images, only load images in the immediate browser viewport
Investigate the impact of loading @font-face assets on perceived performance Investigate the CSS font-display property for managing common issues like FOUT, FOIT and FOFT
Low Set images and sprites correctly Set images and sprites horizontally as it’s easier for browsers to parse
Reduce cookie size Because every cookie is sent with each HTTP request, consider using a cookie-free domain for static assets [HTTP/1.1 only]. Enable HTTP/2 to enable HPACK header compression or HTTP/3 for QPACK
AJAX requests using JSON Avoid adding too much data to a JSON Object because this causes performance errors with parsing
Investigate using WebSockets Consider using WebSockets rather than XMLHttpRequest, because an HTTP request packet has 1,684 bytes of overhead, compared to 8 bytes for a WebSocket packet
Investigate using a service worker Consider using a service worker for fine grain cache control of critical assets on users machines instead of transferring them over the network

Automate optimisation

You can automate performance optimisation using tools such as:

You should integrate these tools into your Continuous Delivery (CD) and Continuous Integration (CI) workflow so they automatically run before deployment.

Consider automating common tasks like:

  • CSS and JS Linting and optimisation
  • CSS and JS Minification
  • image optimisation
  • sprite and icon generation
  • SVG Image optimisation

Google PageSpeed can perform many of these tasks for you.

Automate testing

You can automate frontend performance testing using third-party services such as:

  • WebPagetest
  • Google PageSpeed Insights
  • SpeedCurve
  • Sitespeed.io
  • Calibreapp

You should set a performance budget for your website’s pages. Once you’ve set a performance budget, test to check your website’s pages stay within your budget. There are many tools available to do this, such as:

  • grunt-prefbudget
  • grunt-pagespeed
  • performance-budget
  • PSI - PageSpeed Insights with reporting
  • Google Lighthouse

Further reading

You can find out more about improving your website’s frontend performance by reading:

The Service Manual has more suggestions about how you can test frontend performance.

This page was last reviewed on 7 June 2021. It needs to be reviewed again on 7 December 2021 by the page owner #gds-way .
This page was set to be reviewed before 7 December 2021 by the page owner #gds-way. This might mean the content is out of date.