Author
Limesharp

Share

Author
Limesharp

There's been lots of talk around Progressive Webs Apps within the Magento community. As the movement progresses so many different technologies and additional systems have become available. Here at Limesharp we thought we'd do some research of our own to see what we could implement. Quite a lot of this features around the term headless Magento or e-commerce in general.

We've looked into add some interesting features such as:

  • Making a site work like Single Page Application
  • A lighter frontend load meaning having an initial page load under 1 second.
  • Moving more logic to the frontend allowing the server to function faster.
pwa-reliable.png#asset:686

Making a Website Work like a Single Page Application

What is a Single Page Application you ask? Well, a simple way to explain is to imagine that you have to load your whole site the first time you access it in your browser. From there, clicking products/categories or pages within the site are much faster than normal. That is the real beauty of a single page application. They allow for much faster feedback to the user, near instant in most cases. 

The way we are trying to achieve this is via the use of powerful frontend frameworks that allow use to have a rich frontend experience for the end user while allowing to utilise some of JavaScripts most recent features for cleaner code.

A Lighter Frontend Load

You might think the introduction of more code on the frontend would mean a higher page load. Actually, it's quite the opposite as the framework will only load once the user has initially hit the site. Alongside this we are also passing more data that is already cached. All of this is sent with the first request which means the server is spending less time processing and more time serving the user their page. 

With the speed of the frontend framework it will mean the moment a page is loaded it is rendered with a few milliseconds. It also means the server is passing less resources to the user. This would simply consist of a few JavaScript files and a few CSS files.

Moving More Logic to the Frontend

This frontend logic is a fantastic leap forward as it allows developers to spend less time working with Magento's complex XML Layout structure and more time writing clean HTML. It also means the server is spending less time processing all these actions and more time just waiting for requests such as adding data to carts, processing orders or accepting form requests. 

Once a user has hit your site the leg work of navigating between pages is handled by the frontend meaning less load on the server. This should mean you are serving a fully optimised, almost instant load website even during your busy sale periods like Black Friday or the pre-Christmas rush.

Small Steps

We still are scratching the surface of what is possible with an approach like this as there is so much more we have to take into consideration as a lot of it does rely on using Magentos API's for fetching and sending data. 

The release of GraphQL in Magento 2.3 will open up many more opportunities, looking to how product data could be cached to be feel like a 'living' cache that is updated upon sales so speed is still maintained along with updated information for products.

Are you interested in harnessing PWA for your Magento website, or want to work with us to explore PWA even further? Why not get in touch by calling 0845 520 2400 or email hello@limesharp.net.