A new headless
CMS website for
We built a faster, better, more dynamic new website combining a headless WordPress installation with Gatsby and React technology to improve site speed and user experience.
We took over the web development of the Ultimate Finance site in April 2019, with the knowledge that there were issues and limitations with the existing WordPress build and set-up, which hindered performance and user experience.
Poor website speed and complicated CMS
Website speed was a key issue (for both visitors and website administrators) and created a poor UX. There was also the potential for the speed issues to negatively affect SEO performance, with Google launching its Page Experience update at a point in spring of 2021.
Behind the scenes, the website was difficult to manage and update, with the WordPress core being heavily customised. For administrators, making even simple changes was time-consuming. The site needed to become more efficient to manage in both content management and ongoing web development.
Following extensive conversations about which direction to take, we were delighted that Ultimate Finance chose to go ahead with a complete rebuild. As a result, we took the opportunity to improve the site structure for users and upgrade the tracking implementation to GA4. In addition, the new Analytics installation provides a solid foundation to measure the effect of ongoing marketing activity and provide a clear picture of the activity driving performance.
Ultimate Finance knew there were issues with the existing WordPress site, and our technical audits (SEO, UX Analytics) highlighted the extent of the problems.
There were two primary challenges with the website:
#1 Poor performance
The existing website scored low on technical site speed and performance due to overuse of plugins, an off-the-shelf WordPress theme, a complex page builder set-up, and unoptimised assets and images.
- Using the Google Lighthouse page speed tool for benchmarking, we initially optimised the site where possible, minifying assets, combining CSS files and optimising images. Page speed improved on the desktop version from 5.5/100 > 46/100 and mobile from 1/100 > 6/100. While the scores improved, they were not sufficiently optimal.
#2 Inefficient development platform
Due to the front-end approach/architecture, considerable inefficiencies hindered rapid development and efficient content management.
- Time-consuming page builder: the highly complex nature of the prior page builder required content editors to build complex components using grids, spacers and an array of small elements. Website administrators needed deep knowledge of the system and prolonged time to complete even basic content requirements.
- Process inefficiencies: The process to build/use the same patterns on other pages created inconsistencies and was time-consuming. A lack of componentisation and automation and the need to customise off the shelf themes and plugins led to slow development.
Thank you very much for such a smooth website build project and a great result. The site looks fantastic and works well in so many ways, functionally and on-brand. I can speak for the Exec team and others around our business to say what an improvement it is and how much they like it. Our creative team that worked on the rebranding back in 2019 also think it embodies what we set out to achieve! I look forward to developing the website further in the coming months.Yvonne Balfour, Chief Marketing Officer, Ultimate Finance
Learn how to create faster web experiences with GatsbyJS
With technology advancing swiftly, web real estate needs to be agile, scalable and fast. Choosing the correct solution is pivotal for decision-makers – If this challenge resonates with you, discover more about GatsbyJS.
Rather than continue to invest in a site with inherent problems, Ultimate Finance wanted a trusted partner to rebuild their website. Initially working with our SEO team in 2017, we quickly demonstrated our web development and analytics expertise and took on the complete management of their website and, later, the rebuild project.
We carried out the rebuild project in the first half of 2021 with the goal to:
- Improve technology and structure for ultimatefinance.co.uk to improve UX and site performance.
- Make the site more efficient to manage – in terms of both content management and web development.
We proposed a headless CMS coupled with a Gatsby/React front end. Headless CMS provides security, scalability and futureproofing. It is also a more straightforward, faster, and more flexible platform to develop on. We chose to keep their existing CMS, WordPress, but utilise this lean technology. This approach enabled us to use a CMS the client was familiar with and reduce the effort of migrating content and users to a new platform.
With the front end decoupled from the back end and no longer bound by restrictive back-end technologies, the site can take advantage of new, market-leading, super-fast front-end technology. For example, with Gatsby, page load times of 200ms is the new 2s. In addition, near-instantaneous navigation means users stay engaged with the content rather than bouncing while waiting for content to load.
The new website utilised a simple component-based system. Having a carefully designed selection of reusable components led to editing efficiencies, reduced maintenance effort and made it easier to create consistency across pages.
We also proposed that the site was restructured for SEO gain, consolidating value into a single 'power page' for each product to prevent cannibalisation and compete more effectively in search for generic non-brand terms.
From zero to hero - When we took over the Ultimate Finance website, we found an underperforming development using an off the shelf WordPress theme and multiple plugins overriding everything and getting in the way of improving user and developer experiences! With the website already using WordPress, converting it to a headless CMS with WPGraphQL and Gatsby on the front-end was an easy choice. Now it's blazing fast and a dream to develop on.Ash Hitchcock, Front-end Development Director
The immediate benefits of the Gatsby framework are evident in the speed scores; there are considerable improvements over the speed benchmarks from the old site, and pages load noticeably quicker (speed in seconds).
|URL||Category||Old site speed||New site speed||Improvement (%)|
We want to thank you on behalf of our entire team for everyone's hard work and dedication and for completing everything within the timelines with such great ethics – we couldn't have asked for a better team at all times!
I have learnt a great deal from everyone on this project, and I'm delighted to look at our website with pride and great memories of getting it across the line. What a fantastic achievement!Anthony Gougeon, Marketing Executive, Ultimate Finance
Website traffic by device type.
'Quote start to apply complete' conversion rate difference.
'Apply start to apply complete' conversion rate difference.
The delivery of this project is a great success story. From identifying a clear need to rebuild the website, we then delivered against our goals of creating better efficiencies, enabling easy content management and improving UX and site speed.
We completed the project on time and budget, thanks to our technician's know-how and resourcefulness. And working with an incredibly responsive and knowledgeable client made this a dream project to manage. It was a great collaborative team effort, and I am over the moon with the results.Libby Toscano, Project Director
Major benefits of the headless CMS website rebuild
- Enhanced UX
- Content production efficiencies
- Stronger SEO foundation
- Agile, rapid development
- Flexible, faster CMS
As a result, although it is still early days as Google re-assesses and re-ranks new page content and structure, there is already some recovery for organic visibility on generic product terms. Additionally, some of the supporting hub pages now appear on pages #1 and #2 of SERPs, showing that content is indexable and relevant to search queries.
The website now offers an excellent platform with a flexible CMS to support content strategy work. The enhanced functionality will aid the Ultimate Finance team to push primary products and target new search segments and audience niches.
Faster development, prompting rapid deployment
We've already seen the benefits of the new headless CMS platform. Our development team is far more efficient in developing new features, allowing us to be more reactive to the needs and requests of our client while reducing development costs and reducing the time to deployment.
With any website migration, there usually comes the point where the ideal planned structure deviates from what you see in development. For example, the CMS won't do something a particular way, or to put things in one folder or another requires functionality that requires further development.
Not with this project. The Gatsby/WordPress framework offers excellent functionality and agility for developers. For marketers (and SEOs), significant structural changes or revisions can be made swiftly with no dramas. The website SEO structure is exactly as per the best practice advice we provided during the build process. The result was a website launch with no drawbacks or hindrances due to legacy platform issues.
Stephen Jones, Senior SEO Manager