Google themselves say that they have no good way to measure performance accurately for an SPA. They measure as if it were an MPA solution, and a really good SPA solution will always be way faster for the user than a really good MPA solution. Especially if you start talking about not always having an excellent connection.
Google themselves say that they have no good way to measure performance accurately for an SPA. They measure as if it were an MPA solution, and a really good SPA solution will always be way faster for the user than a really good MPA solution. Especially if you start talking about not always having an excellent connection.
Why tools like PageSpeed Insights give misleading results for SPA solutions
“Many simplify performance to being just what the measurement tools report, but the tools are not built in a way that measures reality fairly. There are several factors that make a site fast in practice but still yield poor measurement results, especially for Single Page Applications,” explains Albert Dahlin, CTO at Webbhuset.
Performance for the user
A part of performance is the user's experience of a website's speed. Whether it is a Multi-Page Application (MPA) or a Single Page Application (SPA), they can feel equally fast in practice for a user. However, the difference is noticeable if the internet connection weakens.
“For instance, if you're in a tunnel with poor coverage, this will be noticeable with an MPA solution. It might take 5 seconds to see a new page, and sometimes things jump around so you click on something other than what you intended. People often miss this. They test an SPA and an MPA solution on their fiber network with a Macbook Pro costing 30,000 SEK. Of course, it's fast, and this is what performance for the user, the perception of the website's speed, is,” says Albert.
Performance for Google ranking
The other part of performance concerns search engine optimization (SEO). Among other things, Google has announced that speed is a component of their ranking algorithm, but they have not stated how large a portion it is of the total ranking score.
“Many assume that the faster your site, the higher up you'll appear in Google search results. It's unknown whether speed accounts for 1% of your ranking points or if an approved performance is equivalent. Is faster necessarily better? If it takes a third of a second when I click a link until the new page appears compared to a tenth of a second, is it three times better? A user won't notice a difference; you click, and the experience is that it happens instantly,” says Albert.
When we built SnusMe's e‑commerce, it was so optimized that a fade-out/in effect had to be added. Before the effect was added, you could barely perceive the page change when clicking between links because the website had such exceptionally high performance. This adaptation was also important from an accessibility perspective, as people with, for example, impaired vision might miss these quick page changes.
“Then we have performance for users vs. performance for Google ranking. Humans perceive times down to about a third of a second; faster than this makes no practical difference as it is perceived as instantaneous. If a page takes many seconds to load, it becomes distracting, and some may choose to leave the site. For Google ranking, it is unclear how much performance affects it, but Google has themselves said that good performance for the user is important,” explains Albert.
Misdiagnosed issues with Lighthouse
There are two well-known tools for measuring performance, Lighthouse and Core Web Vitals. When you analyze a website with PageSpeed Insight, you first get results from Core Web Vitals and then a Lighthouse diagnosis. Lighthouse is a developer tool that you can also bring up in the browser. The tool simulates a user's page visit and then provides suggestions for improvement.
“Lighthouse does not measure actual performance in a fair way. There are a lot of wrongly diagnosed problems, and if you measure the same page multiple times, you don't get the same result every time. These suggestions that Lighthouse makes aren't always accurate, or it might not be necessary to fix them,” says Albert.
Many sites use various scripts that take a long time to load, but which have no practical significance for the user experience as these do not always show. The number and size of different scripts vary from one website to another, but these, for example, can be tracking tools like Google Tag Manager and Google Analytics, or chatbots and ad tools. For our customer SnusMe, it is approximately 89 kb of scripts needed for the site to appear. This is not much, but with Google Tag Manager and Google Analytics, it becomes three times as many scripts that need to be loaded.
“Often there's five times more JavaScript that loads on other sites that users don't see, which drastically lowers the Lighthouse score. However, this is not an issue since it doesn't affect user performance. Many often conclude that the site is slow due to poor scores, but they haven't analyzed what the test results actually mean. Lighthouse scores aren't something that can simply be compared,” explains Albert.
Screenshot of Lighthouse diagnosing performance issues of snusme.com in the PageSpeed Insights tool. In the picture, you can see that the performance score is 54 points.
Core Web Vitals more accurate than Lighthouse
When you visit a website with Google Chrome, Chrome secretly measures how fast the website loads on your computer. Chrome sends the information to Core Web Vitals or the Chrome User Experience Report, which keeps track of metrics from real people visiting a site.
“If you have a site in a developing country where you might have worse phones and internet connections, then you'll get worse results because all visitors have poor metrics. A site where the majority of visitors are, for example, in Sweden and most have the latest iPhone, then you'll get good results. So, this is more of a reality check on real users,” says Albert.
Core Web Vitals shows statistics for several different metrics over the past 28 days and is continuously updated. Unlike Core Web Vitals, which is measured on real users, Lighthouse emulates an old phone, Moto G Power, with slow 4G.
“Lighthouse can say something that's completely out of the blue because something causes it to get lost and measure incorrectly. Core Web Vitals is a bit more accurate because it's measured on real visitors. If you see very poor values here, then maybe you should do something,” says Albert.
Largest Contentful Paint misses performance benefits of SPAs
Largest Contentful Paint (LCP) is an important performance metric used to assess the loading time of the largest visible content block on a webpage. LCP measures how long it takes from the moment the user requests the page until the largest visible content element (such as an image, video, or text block) is rendered and visible on the screen.
“Every time I click on a link in an MPA solution, it retrieves a page (html file) from the server, and you get a measurement result that may take 2 seconds with a good solution. For an SPA solution like SnusMe, it takes 2 seconds to fetch the first page, and all new pages take only a third of a second to load, which is the added fade-out/in effect. Although measurement tools do not capture the performance advantages that an SPA gives, we get good results. We have worked hard to optimize LCP and are now as fast, or faster, than most MPAs.” explains Albert.
In an SPA, no new html files are retrieved after the first page load, which means that a new LCP measurement is not triggered at every link click. Therefore, LCP may be insufficient to fully measure performance on SPA solutions because it does not capture how quickly the content updates on internal navigation.
Screenshot of an analysis of snusme.com in the PageSpeed Insights measurement tool. In the image, you can see that the Largest Contentful Paint is at 2 seconds measured on real users. In the Lighthouse screenshot, LCP was at 4.8 seconds measured on simulated data.
New measurement points
There is also no standard for how an SPA should function, making it difficult to know how to measure fairly, but this is something Google is working on. New measurement tools are coming to the browser, and one that has already arrived is Interaction To Next Paint. There are also several important measurement points not related to loading times, such as Cumulative Layout Shift, which indicates that content blocks have not moved after the page has loaded.
“This is very complex, and we're only scratching the surface of the important things people often miss. Google themselves say they have no good way to measure performance that is fair for an SPA. They measure as if it were an MPA solution, and a really good SPA solution will always be much faster for the user than a really good MPA solution. Especially if you start discussing that you may not always have a great connection,” says Albert.
FAQ
Here are some common questions and answers:
Where can you learn more?
We are more than happy to talk about the latest in technology and e‑commerce. Reach out to us if you have any questions, or want to drop by for a cup of coffee to discuss Single Page Applications or book a demo!
Also read Chrome for Developers' own article How SPA architectures affect Core Web Vitals.
What is the difference between a Single Page Application (SPA) and a Multi-Page Application (MPA)?
SPA: Loads an initial single HTML file and updates content dynamically without reloading the entire page. This provides a faster and more interactive user experience.
MPA: Consists of multiple HTML files where each page retrieval requires a new request to the server to fetch a new HTML file. Each navigation between pages involves a full page load.
Learn more about the article What is a Single Page Application?.
What are the advantages of an SPA?
Faster navigation and improved user experience since only parts of the page are updated.
Better cache handling and reduced server load.
Possibility of offline mode with the help of service workers.
Can you have an SPA solution regardless of the e‑commerce platform?
Yes, you can implement an SPA solution on almost any e‑commerce platform. At Webbhuset, we specialize in customizing e‑commerce solutions and can help you implement an effective SPA solution regardless of the platform you use.
Want to know more?
Fill in the form, and we will contact you shortly.
