Website optimisation: Streamlining a Board Game enthusiast’s online platform

In a recent freelance job I helped a board game enthusiast improve their passion project’s performance, whilst reducing its digital carbon impact.

Sam approached me looking for help. After discovering a blog post of mine talking about digital sustainability, they were looking to hear more and understand the impact their own website had, and what could be done to improve it.

Optimising the plugins and theme

Sam’s board game review website is built on WordPress, using a custom theme. The first step I took was to look into all the plugins installed. I removed any that were not active. I also reviewed the active ones to see if there were any that weren’t being utilised.

Next I looked at the theme, discovering it had been built using Timber and the Twig templating system. I’m not sure why this system was used, as it isn’t in my view necessary. It also made certain updates harder to achieve.

After a first go at optimisations, I managed to reduce the homepage from 6.78MB of initial page load to 4.62MB. A reasonable saving already. Though, I really wasn’t satisfied as I knew there was more that could be done.

Learning and experimenting

I’m not a huge fan of Twig templating. I haven’t used it a great deal, so there was some things I didn’t know how to do. So, I started hunting through the documentation for solutions and best practices for performance. Unfortunately I didn’t find quite what I was looking for. I needed to look elsewhere. Stumbling on some forum posts got me about 70% of the way to a solution. The rest was purely down to experimenting.

Image optimisation

A huge barrier to image optimisation was due to how Twig handles image data. In my view, it makes it harder to use the default system that WordPress has in place to output responsive images. But, through some further experimentation I found a way to output the correct image sizes for the visual layout, adding responsive sizes and native lazy loading.

Caching and WordPress optimisation

One of the last items on my list was to add a solid layer of caching to help speed up pages. I especially wanted to speed up database heavy pages such as the games listing and search results. Adding the W3 total cache plugin helped a great deal here. It’s free, so it is perfect for side projects. It does a good job of caching both on the server as well as in the browser. It also helps to cache database queries.

I also took the opportunity to clean up some of the default scripts and styles that WordPress core loads. Removing unnecessary output and saving even more weight on the frontend.

The results

After all of the optimisations, I managed to get the homepage down from my previous efforts of 1.733g / 4.62MB to a much lighter 0.297g / 808.97KB. A huge improvement from the initial 6.78MB when I first looked at the site.

The games listing pages were a little trickier. After experiencing some issues with lazy loading across browsers due to a custom ajax content load, I implemented a different solution. This resulted in the games list page initial load dropping from 1.987g / 5.29MB to 0.614g / 1.63MB. Again a really good saving that will both help to speed the website up, but also reduce its carbon impact.

The future

The one thing I couldn’t change at the time was the hosting. I advised upon the importance of using renewable energy, and possible solutions, and it is something that Sam is looking into changing soon. With a different hosting provider, and moving the site physically closer to those viewing it, as well as using a hosting company that powers its servers with renewable energy, the impact of the website can be reduced even further.