SPA refers to a web application design structure that achieves high operability by loading only the parts necessary for user operations.
Even among websites, page transitions and click behavior vary widely. Among them, those with SPA implemented allow users to browse websites stress-free without having to change pages once they visit the page. Typical web services that have SPA implemented are Google Maps and Facebook Messager.
These services allow you to update some content without reloading the entire page, providing a better UX for your users. Therefore, in this article, we will introduce the advantages and disadvantages of implementing SPA, as well as the characteristics of the content that should be implemented with SPA.
What is SPA?
SPA is an abbreviation for “Single Page Application” and is a design structure that composes a web application with a single page. On pages with SPA implemented, content changes without transitions, leading to improved user experience (UX).
Traditional web pages load the entire page each time you interact with it. On the other hand, pages implemented with SPA use Javascript to replace part of
the HTML
and load only the necessary parts, which reduces the amount of communication with the server and improves application performance.
This SPA is the reason why Google Maps does not load the entire page every time you change your destination. Therefore, advanced web expressions and high operability can be achieved.
Four benefits of implementing SPA
The benefits of implementing SPA can be broadly divided into the following four types.
For websites, these are all benefits that are directly connected to the user experience. Here, we will explain the four advantages mentioned above.
Expanding the range of things that can be expressed on the web
SPA loads only the parts that are necessary for the user’s interaction. Therefore, you can design a wide range of UIs without being bound by browser behavior. With conventional web pages, loading screens and page transitions are controlled by the browser, making it impossible to create uniqueness.
By implementing SPA, you can develop your own content, even parts that used to depend on the browser, such as page transitions and loading. Also, Javascript has many frameworks such as vue.js and React, so it is relatively easy to express it.
Improved operability
Operability is very important in the operation of web pages. In fact, data shows that a one-second delay in page loading speed can reduce
by 7%. Also, from the perspective of SEO, slow display speeds will lower your rankings from search engines. However, implementing SPA can greatly speed up the operation.
Conventional web pages load the entire page for each operation, which takes time and is greatly affected by the communication environment. Another drawback is that it takes time to update the entire page, not just the part you want to update.
By implementing SPA, only the necessary parts are loaded during operation. Therefore, the areas other than the operating area are not reloaded, and the amount of communication can be significantly reduced, increasing operating speed and improving operability at the same time.
Reference:
How Loading Time Affects Your Bottom LIne
Native app replacement
The user experience that can be provided by implementing a SPA is comparable to native apps that are installed via an application store and operated on a device. It is also possible to implement features unique to smartphone apps, such as launching apps from the home screen and push notifications.
To actually release a native app, it takes a lot of time and effort to go through Apple Store and Play Store reviews even after development. By implementing SPA, you can implement the functions specific to smartphone apps such as those mentioned above, so you can use the SPA web app as a replacement for native apps.
Improved UX
Web applications that implement SPA are convenient because only the operation part is loaded. For example, let’s say you want to update the part of your page that is playing music. If a web page is not equipped with SPA, if you operate a part of the page, the entire page will be reloaded and the music will stop playing. However, if you implement SPA, only the parts you manipulate will be loaded, so the music will not stop. In this way, SPA allows you to implement features that do not compromise the UX.
%400%2C5x.png)
SPA has several disadvantages from a technical perspective.
SPA has all the good things at first glance, but from a technical perspective, it also has the following disadvantages.
You should consider implementing SPA after understanding the disadvantages. Here we will introduce the above four disadvantages of SPA.
High implementation cost
In order to implement a SPA, it is necessary to implement functions that were traditionally carried out by browsers, so the development cost is higher than that of a normal web page. Typical examples include the browser’s “forward” and “backward” functions, history management, and loading screen display.
These are small details of the UI, but if you save development time more than necessary, it may become inconvenient to use and you may not be able to provide a good user experience. Although it is possible to reduce man-hours by using libraries, development should be tailored to the application as much as possible.
I will explain the details later, but simply creating something that works will put you at a disadvantage in terms of SEO compared to regular web pages. If you want to cover
SEO
as well, you need to use a technology called server-side rendering (SSR). Introducing SSR requires server-side development, and the number of compatible libraries is limited, resulting in higher development costs.
Few developers
Currently, there are far fewer experienced SPA developers than general web page developers, making it difficult to secure human resources. SPA development requires knowledge of web page development, Javascript, and related technologies, and requires writing large-scale code.
The use of libraries and frameworks is essential for SPA development, so knowledge of them is also required. In addition, the ability to proceed with design and construction while taking post-development maintenance into account is also required.
Initial loading is slow so it takes a while
By implementing SPA, page switching will be faster, but it will require more Javascript code and take longer to initially load. However, in recent years, with the development of CDN (Contents Delivery Network), weaknesses have been preserved. Currently (as of September 2021), initial loading can be sped up by using SSR, but please note that this will incur implementation costs.
If you remove underlying content, it may be disadvantageous for SEO.
Pages that implement SPA are, in principle, provided by one URL/URI, so they cannot be accessed as fixed URLs for specific display states. Web pages implemented with SPA acquire data using Javascript and display the page by constructing HTML. Therefore, in most cases, it will not be crawled, which will be disadvantageous for SEO. There is no problem if the content is not affected by SEO, but if SEO is required, it is necessary to introduce SSR as mentioned above.
Characteristics of content for which SPA should be implemented
So far, we have introduced the advantages and disadvantages of SPA. I hope you understand the need to carefully examine whether SPA is necessary during development. So, what kind of content should SPA be implemented for? I will explain two examples based on the advantages and disadvantages I introduced.
Content that stays for a long time
Due to its characteristics, SPA is very suitable for content that is frequently manipulated and has a long dwell time. For example,
digital marketing
tools whose information is frequently updated.
If SPA is not implemented, each update of information requires long loading times. Even if you want to take a closer look at the data, it is updated frequently and it is extremely inconvenient to have to wait for the data to complete loading each time.
By implementing SPA, loading for each operation becomes faster, so there is no need to wait for loading each time information is updated.
A typical tool that implements SPA is Slack. Each time a message is sent, Slack does not load the entire message, but only reads the part necessary to display the message. SPA should be implemented for content that requires a long dwell time and needs to be updated frequently.
Content with many page transitions
SPA has the advantage of loading quickly during page transitions, so you should also introduce content that requires many page transitions. A typical example is a movie theater ticket reservation page.
To reserve a movie theater ticket, you must perform frequent operations such as “select the movie you want to watch → choose the time → select your seat…” and also require page transitions to accompany these operations. If it takes a long time to load every time you perform an operation, it will be very inconvenient for users and cause them to abandon your website.
For content that requires many page transitions, implementing SPA can increase the speed of page transitions and provide a better user experience.
Summary: Improve your UX by implementing a SPA
In this article, we explained the advantages and disadvantages of SPA, and the characteristics of the content that should be implemented. SPAs are useful, but they aren’t suitable for all content. It also has significant technical disadvantages, so it is important to carefully consider its implementation.
As mentioned above, consider implementing SPA for content that takes a long time or that requires many page transitions. Use this article as a reference to understand the advantages and disadvantages of SPA, and then consider whether it is really necessary to implement SPA on your company’s web pages.