Email

Ultimate Performance

Reworking a large multi-site as an in-house developer for ultimateperformance

For the Ultimate Performance Acquisition Website project, I undertook a complete rewrite to consolidate the site from a fragmented multi-site setup into a streamlined, single-site architecture. This transformation not only simplified management but also enhanced performance and scalability. A key focus was optimising file load orders—strategically deferring and selectively loading assets to ensure critical resources were prioritised. Through these refinements, I was able to bring load times down from a sluggish 10+ seconds to an impressive sub-2-second experience, significantly improving user engagement and conversion potential.

Testimonials archive rework

Beyond performance improvements, I also reworked key functionality, including a complete rewrite of the client results filter. Previously, the filter relied on a third-party WordPress plugin alongside the system’s built-in query function, which struggled under the sheer volume of posts, often leading to crashes.

To resolve this, I optimised the query logic by selecting values directly from the database, bypassing unnecessary overhead and ensuring greater efficiency. This approach not only stabilised the site under heavy loads but also significantly improved the filter’s responsiveness, delivering a seamless experience for users navigating client results.


    public function loadTestimonials(): void
    {
        $this->rankingEnabled = get_field('results_ranking', 'option')[0];
        $this->testimonials = new WP_Query($this->getQueryArgs());
    }




    public function getQueryArgs(): array
    {
        $args = [
            'post_type' => 'testimonial',
            'post_status' => 'publish',
            'posts_per_page' => 48,
            'is_paged' => true,
            'paged' => (get_query_var('paged') ? get_query_var('paged') : 1),
            ...
        ];

        return $args;
    }

A fresh start with a robust carousel

Another challenge was the legacy carousel, which had been custom-built for reasons unknown, despite the availability of hundreds of plug-and-play libraries that could have done the job more efficiently. The complexity stemmed from the way the website was originally structured—data was stored in a non-standard format that didn’t align with industry best practices.

Rebuilding the carousel while preserving this existing data was crucial, as repopulating hundreds of pages manually would have been impractical. To solve this, I opted for Flickity, a lightweight and flexible carousel library. By feeding in the existing data and designing a component matrix to handle different types of content, we successfully modernised the carousel without disrupting the site's content, ensuring a smooth transition while significantly improving maintainability and performance.

<?php 

/**
 * Function to automatically generate card slider with arguments.
 *
 * @param array $args Contains Data from template
 * @return void
 */
function carouselFactory(...): void
{
    ...

    // Dynamically construct Flickity options based on arguments
    $flickityOptions = [
        ...
    ];
    $flickityOptionsJson = htmlspecialchars(json_encode($flickityOptions), ENT_QUOTES, 'UTF-8');

?>
    <div class="card-carousel__wrapper">
        <div class="click click-left">
            <?php get_template_part('/arrow-carousel'); ?>
        </div>

        <div class="click click-right">
            <?php get_template_part('/arrow-carousel'); ?>
        </div>
        
        <div class="card-carousel__width">
            <div class="card-carousel" data-flickity='<?php echo $flickityOptionsJson; ?>'>
                <?php foreach ($args['cards'] as $card) : ?>
                    <div class="card-carousel__slide">
                        <?php cardFactory($card); ?>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
<?php
}
?>

<section class="card-deck">
    <div class="container">       
        <?php

            if ($is_slider) {
                carouselFactory($args);
            } elseif (count($args['cards']) >= 5) {
                carouselFactory($args, true);
            } else {
                columnFactory($args);
            }

        ?>
    </div>
</section>

Multiple iterations of core pages

A key focus of the project was rapidly iterating on multiple pages to optimise funnel capture within the acquisition process. This included a refresh of the core location post pages, ensuring they were more engaging and conversion-driven, as well as multiple reworks of the testimonial pages to better highlight client success stories and instil confidence in potential customers. A major push was also made to increase consultation bookings directly from the thank you page, leveraging user momentum post-engagement. To support this, I developed a yet-to-be-released ReactJS component that pre-populates user information into the consultation form for a seamless experience. Additionally, I undertook a complete rebuild of the site’s forms in ReactJS, meticulously recreating the existing look and feel to ensure continuity while laying the groundwork for a transition away from the legacy system. These efforts not only enhanced user experience but also played a crucial role in driving higher conversion rates.

Get in touch

I am always free to discuss new projects, opportunities or any assistance you may require.

Responses usually take less than 24 hours.