MPA Optimization: 2 Code Snippets for Instant Improvement

As developers, we're always looking for ways to enhance the user experience, and Multi-Page Applications (MPAs) are no exception. Despite the rise of Single-Page Applications (SPAs), MPAs still offer numerous benefits, especially in terms of simplicity and SEO. However, MPAs can sometimes feel less fluid than their SPA counterparts.

Today, I want to share two powerful code snippets that can significantly enhance your MPA’s performance and user experience, making it feel just as modern and smooth as an SPA.

1. Cross-Document View Transitions

One of the key challenges in MPAs is maintaining smooth transitions between pages. This can disrupt the user experience, especially when compared to the dynamic, fluid transitions typical of SPAs. The good news is that you can achieve smoother transitions with a simple CSS rule.

By adding the following snippet to your global CSS file, you can enable cross-document view transitions across your MPA:

@view-transition {
? navigation: auto;
}        

This snippet works seamlessly with browsers like Chrome and Edge, offering instant improvements to page transitions. While Firefox and Safari have yet to support this feature, its implementation can still make a significant difference for a large portion of your user base.

However, there are a few caveats to keep in mind. Cross-document view transitions are limited to same-origin navigations, so they won’t work across different domains. Additionally, if a navigation takes too long—more than four seconds in Chrome—the view transition will be skipped altogether. To get the best results, you’ll want to ensure your pages load quickly. This brings us to our next snippet: prerendering.

2. Prerender with the Speculation Rules API

To make your MPA feel even faster, you can use Chrome’s prerendering capabilities. By injecting this snippet into all your pages, you can tell the browser to start loading potential next pages before the user even clicks on a link:

<script type="speculationrules">
  {
    "prerender": [
      {
        "where": { "href_matches": "/*" },
        "eagerness": "moderate"
      }
    ]
  }
</script>        

This snippet is also supported by Chrome and Edge, though, like view transitions, Firefox and Safari currently don’t support it. When a user hovers over a link for just 200 milliseconds or initiates a pointerdown event, the browser will begin prerendering the linked page. This results in a dramatically faster navigation experience, as the next page is already partially loaded by the time the user clicks the link.

Conclusion:

Implementing these two snippets can elevate the fluidity and speed of your Multi-Page Application, making it feel more like an SPA without the added complexity. Whether it’s through smoother transitions or faster page loads, these small changes can make a big impact on how users interact with your application.

Thank you for taking the time to read this article! If you’re interested in exploring more about these features, including customization options, be sure to check out the official documentation:

• Cross-Document View Transitions
• Prerender with the Speculation Rules API

Happy coding!