Simplicity is one of this year’s main trends in web development and design. And a single page application, or SPA, is one of the ways you can stay simple. SPAs combine minimalistic and smooth mobile-like user experience with high performance and outstanding load speeds.
A single page application is a web app with all the website content on a single page. An SPA doesn’t reload when you click a button. Instead, it displays the content you’ve requested on the same page.
Think of Gmail, a classic example of a single page app. You can create a new email, switch to a draft, or send a message in Hangouts without leaving the page or loading another one.
And what about your Facebook feed? You can scroll it forever and it will continue to display new posts. You can chat with someone, check out who is currently online or check your notifications – the page won’t change.
Single page applications have many advantages, and we’ve discussed most of them in one of our previous articles. But distrust in this technology is still a big issue because of certain limitations to SPAs.
Issues with SPAs. Why the doubt?
We have comprehensive experience with SPA development, and we confidently argue that every SPA issue can be solved. So, let‘s get acquainted with the dark side of single page apps. Don’t worry, it won’t turn out too dark in the end.
Longer web app loading time
When you launch a single-page application for the first time, it usually takes a bit longer to load compared to traditional multi-page apps (MPAs). The reason is simple – the app downloads all the HTML, CSS and JavaScript files. But after this initial load, all the following actions in an application occur almost instantly. Because the frontend code is already downloaded and rendered, it only has to request content that should be changed.
Single page applications strongly depend on client-side code, since it is fully responsible for everything we can do in the app. Connection with the server is established only to obtain extra data. Everything else is done in the frontend.
This may lead you to a logical conclusion – an SPA’s client side code must be more complex than for a multi-page application. This may cause issues for the initial website load when all this code is downloaded to ensure later smooth use and quick interactions.
We’ve already mentioned that an SPA takes a bit longer to launch initially, and complex frontend code may increase wait times.
That’s why it’s crucial to keep your single-page app fast. 40% of visitors leave your website if it takes longer than three seconds to load – that’s what the statistics say. If you feel like your SPA is in danger – check out the methods for increasing website speed.
SEO issues
Search engine optimization is important since it helps potential users discover your website. But optimization of a single-page application works a bit different from a traditional page.
Search engines couldn’t crawl apps based on AJAX interactions with servers for quite a while. This meant Google or Yahoo couldn’t get the information from your website to properly rank it in the search results list. As a result, a lot of single-page applications were left behind by search engines and rendered unfindable by potential clients. But there’s no longer anything to fear.
In 2009, Google suggested a solution to make AJAX based apps crawlable, and that did its job well until October 2015, when it was deprecated by the issuer.
The reason for this deprecation is simple – Google has taught its crawlers to understand pages that use JavaScript to present content to viewers. So now all single page apps are indexed by Google without any additional coding. Great news!
If you are aware of the main principles of search engine optimization, you’ve probably guessed that a single page can rank higher because there are more opportunities for inbound links.
Inbound links are an important ranking factor for Google. Multi-page websites may link a lot to different pages inside the website, and this means the authority of the website is divided between multiple pages. But, for a single-page app, all sources link to a single page, and the website ranks better.
Even though SPAs didn’t use to be a good solution for SEO-dependent websites, those times are now gone. When you follow all the tips for technical SEO, single-page apps can consistently outrank their multi-page competitors.
JavaScript dependent website
Single page applications function via JavaScript, which dynamically renders the page right in the browser. But this doesn’t mean that a user who disabled JavaScript in his browser, will be unable to see your website at all.
Disabling JavaScript was a trend some years ago since JS was considered a security threat. And that was actually true. JavaScript made web apps vulnerable to different treats like XSS, for example, which stole cookies and forced the user to take app actions he never intended to. Many users simply gave up on JavaScript to keep their computers safe, even though that wasn’t the best solution.
Users also disabled JavaScript in their browsers to avoid annoying advertising or due to high technical device requirements. Many devices at that time were not powerful enough to run JS-heavy apps.
But the situation has changed dramatically. Today, almost every device can execute JS files, modern adblockers successfully fight annoying popups, and progressive antivirus software protects computers without the need to sacrifice anything.
At the end of 2016, Blockmetry published fresh statistics on JS disabled internet traffic. The company claims that only 0.2% of users worldwide have JS turned off in their browsers. The numbers vary depending on different regions. In Taiwan and China, for example, the average percentage is higher but still low, at 2.3% and 1.9%.
So, if your project targets an Eastern Asian market, you might want to think twice before implementing an SPA. There’s a danger that 1 in 50 users won’t be able to access your website.
Among European countries, Finland had the highest rate – 1% of the whole Internet traffic there has JavaScript disabled.
But even so, the worldwide average rate of 0.2% proves there is no reason to fear JavaScript disability unless you target countries with higher rates.
Linking to the current page state
One of the main reasons users fear SPAs is their perceived inability to share a link to something they currently see on the screen. Link sharing works perfectly with multi-page websites, where you can link to any page without any issues. But in SPAs, this can prove an issue, since there is only one single page and all page states are displayed under one link.
Users are used to sending links to friends and colleagues or bookmarking pages to open later. Single-page apps seem to undermine this behavior.
But this problem can be solved. SPAs can work perfectly with deep links. They are used to link directly to a piece of content on a given page. To implement deep links for AJAX, the “#” or a so-called “hash” is used. The initial aim of a hash is to link to the anchor tag on the same page, which usually refers to subtitles.
As a result, website visitors will be able to save a particular page state as a bookmark or share the direct link.
As you can see, single-page apps aren’t faultless. However, all their issues are minor and can be easily solved with the right approach.
