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
	Investigate using a Content Delivery Network (CDN)	A CDN will improve site performance by using a network of servers to deliver resources to users. The user will get delivered resources from the server that is located nearest to the user. A CDN is well-suited to handling heavy traffic and traffic spikes.
	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 JavaScript linting and optimisation
CSS and JavaScript minification
image optimisation
sprite and icon generation
SVG optimisation

Automate testing

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

Using Speedcurve to automate frontend performance testing

You can use Speedcurve to test the performance of your service.

Speedcurve provides an extensive set of tools to test your service such as the following:

Test from different locations and different browsers.
Schedule regular tests using tools like Google Lighthouse and Webpage Test.
Real user monitoring which allows you to collect data that shows you how your real users experience the speed of your site.

Contact the Head of Frontend or a Lead Frontend Developer to request an account.

Performance budget

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: