Providing a Single Page Application Experience

SPA feeling


Page speed is an interesting subject. We often try to put a set of metrics against page speed, hoping that if everything is transferred quickly from a server to the user's browser, we are more than happy.

Unfortunately it is not that simple...

Page speed is all for the users, and not so much for machines. While Google and other search engines prefer fast loading websites over slower loading ones, this preference derives from a user-experience point of view. "If it is fast for a user, then they are more likely to enjoy their experience and convert on the website" - which means it is all down to perception.

A great way to provide users with the perception of a fast loading website is to reduce loading wherever possible. Users often navigate around on a website, so what if we could remove the blank screen moment completely? And what if we could ensure that not every resource has to be transferred again?

This is where a Single Page Application (SPA) comes in. A SPA consists of a 'shell', the framework that features elements such as header, footer and holds the content and scripts to make it functional; in this case we have used amp-script.

This project ensures that the user only has to download the required resources, such as the content and some images; infactit is likely that the whole website is already available on your device (unless you are an OSX or iOS user). We have ensured that the data transferred when browsing a page is kept to a minimum and that the transfer is completed via JSON, while images and other resources have been precached to optimise your experience.

Not bad for an AMP site.