Going from 25 seconds load time to under 1 second with Next Level Skillnet.

Prior to starting this project, it was painstakingly obvious that the website was slow.

Key challenge: speed.

There were a lot of large assets, a Wordpress backend laiden with plugins, and no caching strategies in place. This was best illustrated by this GT metrix report which showed a 25 second load time.

When we saw this, it made sense to challenge ourselves to deliver something on the opposite end of the spectrum... A web app that can speedily deliver content in less than 1s.

Information Architecture

As part of the redesign, we restructured the information architecture to ensure that key messaging was being prioritised and the meaty content was never far away.

Small images

We made design decisions to keep images small, favouring well positioned small (yet impactful) images over full width hero images that are resource intensive.

Nuxt 3 & Vue 3

We adapted a stack that already delivers performance gains out of the box. Vue 3 is perfect for building Single Page Applications and Nuxt 3 supercharges things enabling us to introduce data-fetching, SEO-friendliness and routing with it's Server Side Rendering. We also have the added benefit of the magical Nuxt link of which you can read more about here.

Cloudinary

Even through we started with small images... we made them smaller, using cloudinary to compress and resize them on the fly.

Cloudflare EDGE caching

With Cloudflare, we can cache website files and assets on Cloudflare's CDN. With Cloudflare we reduced our Time to First Byte (TTFB, a key metric for site speed) from around 2s to under 100ms.

Redis data cache

The cloudflare cache only persists for a predetermined amount of time. After this time, the cache is cleared and needs to be rebuilt. However, instead of making the round trip to a server that has to fetch data from a disk, we fetch it from a Redis data cache stored on RAM, giving us a little performance boost even when Cloudflare isn't firing on all cyclinders.

The Results...

The resulting web app is something that we're proud of. The user experience has improved by multiples and clicking around feels so smooth and slick.

And the new GT Metrix report...