Recently we launched a new website for the CBSO built on Craft CMS, it was a pretty exciting project for us all and was a lot of fun to work on. It was also the first time we got to use our new Box Office system that I’d spent the better part of 3 months building as it needed to display events and integrate with the Spektrix ticketing system to let users purchase tickets.
Whilst that went pretty much to plan one thing that didn’t go particularly well to begin with was the site speed. Initially our load time for the upcoming season was a whopping ~6.5s - which really wasn’t good enough - so shortly before launch I squeezed the most out of Craft that I could using it’s inbuilt caching.
Caching is where the system stores a copy of the page so that repeat requests for it can be fetched much quicker as it doesn’t need to be rebuilt. I also moved all of our static assets over to Amazons CloudFront CDN. Both of these worked great, and in combination with each other took page load down to a much more reasonable ~1.3s which we were pretty happy with.
As we moved through the initial few weeks of the site having gone live we started to notice that it was really obvious when a page had just been updated (either by an editor or our continual synchronising with Spektrix) and that these newly updated pages were back to the old 5 to 8 second load times. So I set about implementing two things; Varnish and a plugin to keep things permanently cached, yet up to date.
Adding Varnish shaved nearly another whole second off our upcoming season page, which is now a snappy ~800ms for the initial load and ~500ms for repeat views.
We were still hitting an issue with updating pages though, this time because Varnish was still serving the old copy of the content. To get around this I wrote a plugin that integrates tightly with Craft to allow editors to just press save and not have to think about any of this nonsense. Behind the scenes my plugin waits for Craft to finish purging its own cached copy of the page, then purges the same content in Varnish and finally forces both systems to update their own caches. This now means that all website users should never see a long page load - they should all be under a second (provided their internet connection is good).
And finally, if you’re at all interested in the much geekier version of this post - then you can read the technical breakdown over here on our engineering blog.
