Single Page Applications provide a faster, more user friendly web experience
Single Page Applications (SPAs) have one distinct advantage over more traditional, multiple-page websites; speed. With User Experience (UX) touted as one of the most important considerations for a company or business website, it is not surprising that fast and fluid SPA websites have become increasingly popular in recent years.
While SPAs have been used by interactive platforms and social media websites including Facebook, Twitter and Gmail for several years, more recently, static company websites such as Moneypenny, Ebow and Otterdev have taken to the SPA bandwagon.
What is a Single Page Application?
A SPA website breaks the workflow or paradigm of the standard client-server model. Whereas a ‘standard’ website that uses HTML, CSS and a bit of JavaScript works by a browser, sending a request to a web host (server), which then sends back the HTML mentioned above, CSS and JavaScript to populate the website in the user’s browser.
Typically, with a SPA, the browser will send a request to the web host initially and receive a small JavaScript file that is downloaded within a few seconds. This file works in the background to populate the SPA website pages when the user navigates to a new page or “view,” as they are called with SPAs. Instead of continually sending requests to the web host, SPAs use JavaScript to populate pages almost instantly. Because of this, they even work offline.
In terms of its outward appearance and functionality, a SPA acts the same as a traditional website, only faster. Pages don’t have to reload, and requests are not sent to the web host when a user navigates.
User Experience & Page Speed
Before someone even sees your website, visitors will be judging you impatiently, based on the time it takes for a page to load. If your website is slow to load, then a user will typically head over to a competitor’s website in the hope of a better, faster experience.
Common problems with page speed are associated with using detailed or large images, videos and with WordPress websites – too many plugins. Page speed does not only impact the user experience the rate at which users leave your website; it’s also an important SEO metric. Google wants to serve its users with relevant websites, which are enjoyable to use. If your website takes 10 seconds to load, Google will see from its user metrics data that people bounce off it and straight back to the search results – meaning you’ll sound fall off the first page.
To summarise – page speed is important for a number of reasons. SPA websites are significantly faster than traditional websites, and this is one key reason that more and more businesses and developers are using them. However, the one caveat here is that the initial page that a user loads can be relatively slow to render. This slow initial page speed is important; if the original page is slow, the user could exit the website without experiencing the fluid transitions that a SPA provides.
SEO & Single Page Applications
As many of you will be aware, SEO stands for “Search Engine Optimization.” “On-Page SEO” involves editing and formatting page code and copy according to Google’s best practices.
Google indexes and ranks pages initially by sending around a “crawler” called “Googlebot,” which follows links around the internet, reading the HTML as it goes.
One initial problem with SPAs is that Googlebot is not great at understanding JavaScript. While the bot has made some significant progress, the common opinion from professional SEOs is that JavaScript, used too much, can hurt SEO.
This article on Stackoverflow gives an example of this SPA problem, with one developer stating that he had created a super-fast SPA website with thousands of unique pages of content. However, his site only ranked on Google for a single, irrelevant search term. In this instance, Google was not executing the required JavaScript files and was just reading the minimal HTML – which mainly consisted of developer notes for troubleshooting.
Single Page Applications Pros & Cons
Single Page Applications are a hot topic at the moment, possibly because they remain somewhat controversial in terms of their use as a company or organization’s website.
Pros of a SPA:
– Fast page load
– Seamless user experience
– Mobile friendly
– Works offline
– Easy to debug in Chrome
– Easy caching
– Uses less bandwidth
Cons of a SPA:
– Complicated SEO protocols
– Implications for tracking online campaigns
– High skill set required for development
– URLs don’t automatically change when browsing the site
– Additional security issues
– First page of a SPA that a user lands on, may be slow to render
Many of the cons of using a SPA can be overcome. For example, this YouTube video from Google Search Central guides you through the typical issues with SPAs and SEO, including using the history API to make sure the site’s URLs change when a view/page changes.
Another issue with SPAs is that it can be complex or more challenging to track campaigns. For example, you are running a Google Ads campaign for your eCommerce website; inside Google Analytics, you may not see which traffic is coming from your ads and which is coming from organic Google clicks. There are several ways to overcome this issue using Google Tag Manager, as outlined in this video.
To finish off, here is an SEO Checklist for Single Page Applications:
– Test SPA in the Google Mobile-Friendly Test
– Test Spa with the structured data tool
– Use Search Console’s URL Inspection Tool
– Ensure unique meta titles & descriptions exist in the HTML
– Ensure SPA has an XML sitemap
– Ensure SPA has a robots.txt file
– Use correct HTML for internal links
– Use the history API so Googlebot finds each URL
– Use canonical URLs
– Ensure correct handling of redirects, 400 and 500 HTTP status codes
Conducting an SEO audit on a SPA can be challenging for an SEO executive with no coding experience. However, using the checklist above along with a standard technical SEO checklist is a good starting point.
Leave a Reply