Optimizing Single-Page Applications (SPAs)

Single-page applications (SPAs) have unique page speed optimization challenges. Let's go through some common web performance issues with SPAs, and how to optimize them.

While traditional web pages (sometimes called multi-page applications, or MPAs) work by allowing the user to navigate to different pages, single-page applications (SPAs) work by using JavaScript to perform in-page transitions between different parts of the application.

The key difference is that in a MPA, the browser performs a full navigation between each page. In a SPA, the application is responsible for loading new content and displaying it on the page.

For this reason, SPAs usually require the user to download more JavaScript on the initial page load. Not only do they require the JavaScript for the current page, they also require the JavaScript that handles transitioning between pages.

Reduce the amount of JavaScript on your pages

Of all the resource types in a web page, JavaScript has by far the biggest impact on your page performance. Reducing the amount of JavaScript on your pages can improve almost every page speed metric including Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Total Blocking Time (TBT).

This is recognized in most performance tools. For example Lighthouse warns you when JavaScript execution takes more than 2 seconds, and fails an audit when it takes more than 3.5 seconds.

There are several ways you can reduce the amount of JavaScript on your pages:

• Code-split JavaScript to only send what your users need.
• Minify JavaScript and compress HTTP responses to reduce the total payload size.
• Remove unused JavaScript to reduce payload size as well as compile, parse, and execution time.

Render page content on the server where possible

Metrics like Largest Contentful Paint can be improved in SPAs by rendering as much content as possible on the server. This allows the browser to show the user the content they're looking for while the JavaScript for the SPA is loading in the background.

Preload resources that the user is likely to need

Transitioning between pages within a SPA can be slow when the browser has to download new resources. You can mitigate this by intelligently preloading resources that the user is likely to need soon. For example you could start loading resources when the user hovers over a link or button, rather than waiting until they have clicked it.