Six years is way too long for any digital marketing agency to have left their website untouched. Much like the “builders house”, this renovation project was always top of mind but the bottom of our priorities.
In early 2020, the decision was finally made to dedicate some internal resources to the rebuild, with the goal of creating a scalable front-end framework which, once completed, could be rolled out to selected customers, and ultimately define where we are heading as a ‘technology first’ organisation.
Our top-level brief was:
- 0.2 second load time
- Pass all core web vitals
- Twitter Bootstrap
- WordPress as CMS but support for any CMS that supports REST API
- Can act as a flexible front-end for any web or mobile application
- Instantaneous content delivery
Paladine Systems, Click Click Media’s sister research and software company, took on this brief in the development of our website technology stack, thus being christened as the ‘Paladine Website System’.
Paladine Website System Features:
Through many optimisations, experiments and testing, we have come up with an adaptable framework which combines a collection of tools and methodology that enables us to create blazing fast websites with minimal caveats, as often found is broad, messy caching solutions.
Effectively what we have is an extremely light php framework with only the core functionality to handle routing and basic controller model logic. The effective system is only a few files large and around 20kb in file size.
This, combined with reverse proxy caching if required, leads to an effective barebones speed experience.
Although just that, would not be enough. Most of the issues relate to sites not providing appropriate images to the device in question, not lazy loading and loading to much information from css/js.
We have a few methods that we utilize to minimize these issues, though we are improving these daily.
The optimization of each site to a 40-50% page speed score is pretty general, but getting to 90%+ is a unique challenge for any website, based on its requirements. We made this system with a realisation that in order to achieve this, we really needed a decoupled frontend that can be readily integrated into various or even multiple backends. This way, optimisation can be put where it’s needed and only what is required for each page can be loaded.
Interesting Technology wise
- The system can load various different dom elements or images based on the viewport size of the device in question. This is done backend wise to reduce unnecessary dom elements.
- The system will auto create webp images as needed from any image attached, this is done via a standard call and no further alteration is needed.
- The system will load the most suitable image size from the same single image call based on mobile, tablet or desktop size. This is backend wise no unneeded dom changes.
- Very reliable, even if the attached backend is down, the frontend will remain operational.
- Rapid file or ram based php caching to handle api result caching at native speeds.
- Rapid file based php caching to handle api results to allow native speeds.
- Designed around api integration with external sources.
- Scss to css auto conversion via php, no extra reliance.
- Handling redirections.
- System is easy to maintain, no exotic dependencies.
Embracing a Headless Future
The Paladine Website System enables businesses to have the flexibility of a front-end you can plug any back-end system into easily, but also natively supporting WordPress as a CMS to allow marketing teams to make fast changes without the need of code knowledge.
If you are reading this on https://clickclick.media you are already experiencing the speed that this system can deliver content. Check out our screenshots below of results we are able to achieve, or simply navigate around this website.
PS – These results are with Google tag manager and tracking tags, this is not a cheat result!
Is this System a Good Fit for Every Business?
With the Google core web vitals update around the corner this should be considered by any business that needs a competitive edge in speed and reliability of their web marketing stack.
Want to learn more? Get in touch with us now.