Castella Architectural Hardware
Castella Architectural Hardware sources sophisticated and beautiful ranges of fine architectural hardware from across the world. We have crafted a new, highly effective theme to decrease page load times and deliver an improved user experience.
Quick Facts
The Brief
Develop a high performing, WordPress theme based on the existing design. Their original website was delivering a poor user experience through a combination of slow page loads and outdated templates. Additionally there was mismatched styling from a number of plugins that added to an inconsistent user experience.
The new theme needed to feel fast and responsive in order to please both website users and search engines.
The Goals
- Reduce page load time.
- Specifically, reduce time to first paint & time to interactive page
- If possible, also reduce page size
- Improve delivery of page & assets where possible
- Have an easily updatable and maintainable (well-built) theme for continuous improvement
The Problem
The Castella website had a visually beautiful theme showcasing to customers the collections of stylish architectural hardware (really nice handles!). Unfortunately the theme relied entirely on a WordPress page builder to create the visual layout. There were a few other issues at play (such as a huge number of 3rd party plugins etc) but the net effect was pages that were slow to load, and a poor user experience. Complications with the theme also meant we were unable to implement an efficient cache strategy.
Page builder themes and plugins are often a quick and easy way for site owners to create and manage content, however they are almost guaranteed to perform poorly both in terms of speed and responsive design.
Impact of a Slow Website
The impacts of a slow website are many, but the key takeaways are;
- A slow website offers a frustrating user experience. Users will get frustrated and leave the site if pages take too long to load (see: How Page Load Time Affects Bounce Rate).
- Google hates slow websites! And how Google feels about the speed of your website will have a big impact on your SEO
The Solution
To solve the slow website problem it was proposed that we would recreate the visual experience of the existing website in a completely new and custom built theme. The new theme was built with as many best practice principles in mind with the aim of reducing page load. At the same time we made a number of small improvements to create a more cohesive and unified design and simplify user interactions.
The new theme was built from the “ground-up” to optimise the delivery of visible content, speed up overall page load, and ultimately provide a fast, snappy user experience.
View website
Key Performance Metrics
To assess the performance of the new theme, a number of key performance metrics were used. The performance metrics included;
- First visual change – This tells us how long the user is staring at a blank screen. Smaller numbers are better.
- Speed index – A number (in seconds) representing essentially how fast the page “feels”. Smaller numbers are better. Read more about speed index here.
- Fully loaded time/page size – How long did it take the page to fully load, and how big was the page. Again smaller numbers are better.
- Number of requests – The number of times a webpage must request assets (stylesheets, javascripts or images) from a remote location. Smaller numbers are better.
- Google page speed – Google provides a tool to measure how well it thinks a page performs on mobile/desktop (two ratings), out of 100. Bigger numbers are better.
The metrics were measured across a number of pages/page types that represented a good cross-section of the whole website, but for the sake of brevity only the homepage results are included here. The numbers shown here are the mean averages.
| Metric | Before | After | Improvement |
|---|---|---|---|
| First Visual Change | 2.333s | 0.500s | 78.54% |
| Speed Index | 3.018s | 1.599s | 47.02% |
| Fully Loaded | 3.373s | 2.746s | 18.56% |
| Number of Requests | 93 | 60 | 35.48% |
| Google Page Speed (Mobile / Desktop) | 6 / 30 | 37 / 67 |
Numbers are great, but pictures are better;
Before
After
