Next-level UX and Performance with Headless

The Process 

SoundGuys is a branch of Authority Media, who also own the Android Authority brand. Previously, we had carried out a similar project for Android Authority: building them a performance and mobile-focused Headless WordPress. This was a major factor in our approach to the project. 

During our work with Android Authority, we had built the entire frontend and Headless framework from scratch, a process which took over 8 months to complete. Once we’d built it, however, we had a solid foundation to re-use for future websites. 

And that’s exactly what we did. 

By building on the Android Authority architecture, we drastically reduced the time it took to complete the SoundGuys project. The process, which involved designing a new site and migrating all their old content (over 7000 posts and 20 shortcodes), was finished in only 2 months.

As with Android Authority, we built the SoundGuys website as a Progressive Web App (PWA) running on Headless WordPress.

The main benefits of this setup were: 

• Decoupling the frontend from the WordPress backend allowed us to build a performance-focused front-end using React and optimise it for both desktop and mobile. 
• Building a Progressive Web App made the front-end more lightweight and quick to load as well as providing additional functionality for mobile users.
• Maintaining the WordPress backend meant that the SoundGuys staff could continue using the familiar WordPress editorial experience for content creation and management.

Results

After implementing the new site, SoundGuys saw major improvements in their page speed: cutting the Time To Interactive in half, reducing First Contentful Paint from 0.81 to 0.24 seconds, and slashing the Largest Contentful Paint from 1.13 to 0.39 seconds. Similarly, mobile performance got a significant boost, with load times being cut by up to 60%.

As for the user experience, we saw a positive response in engagement metrics such as:

• Time on page: +40%
• Pageviews: +20%
• Bounce rate: -10%

An optimised website is a happy website

The Headless WordPress implementation allowed us to enhance the performance and flexibility of the SoundGuys website while keeping the WordPress backend that the editorial team were used to. Through improvements to speed and mobile compatibility, we crafted a re-energised user experience that fully represented the SoundGuys brand and connected with their audience.