Building on top of Visualsoft's existing PHP platform, this project involved a major overhaul of the front-end.
Challenges & Requirements
The aim of the project was to improve site performance across the Visualsoft platform by leveraging the benefits offered by using Google's AMP Cache. This meant using the AMP web component framework, also known as Accelerated Mobile Pages.
Whist implementing these changes we also had to maintain the integrity of the existing platform, ensuring it still worked for those customers who chose not to opt-in to an AMP solution.
In order to do this we had to rebuild the entire front-end of the platform using the AMP web component framework. This brought its own complexities.
Maximum CSS payload
There's a hard-cap for custom CSS which is 50kb, fortunately though this is per page and not side wide.
Having previously used Tailwind on the Visualsoft Admin rebuild, it seemed like a good-opportunity to re-use this CSS framework.
One of the main advantages of an Atomic CSS framework like Tailwind is that it's not prone to bloat over time. Since there's a finite number of CSS properties which are applied atomically in your HTML, the size of your CSS doesn't increase as dramatically over time (though your DOM size does).
Actions & Outcomes
As it's still yet to see public release, the outcomes of this project are yet to be measured. Visualsoft have no live sites currently using this new technology stack.
While an interesting framework to work with and offering some clear speed and performance benefits via Google's AMP Cache, I still feel the AMP framework itself is still a little immature. In AMP's defence its original purpose focused on editorial content so it maybe a little critical to expect the same web components to work as effectively on an ecommerce platform such as Visualsoft's.