Jul 25

How Funkhaus Used Stellate's GraphQL Edge Cache to Speed Up WPGraphQL

Learn about how we helped a content-heavy magazine give their readers what they want. Or if you’re ready to dive in, set up GraphQL edge caching for your API.

Funkhaus, a design-forward Los Angeles-based digital agency, found out just how much low water pressure sucks when trying to deliver music news and content for their client, FLOOD Magazine. Launched in 2010, FLOOD is massive, and as you can probably tell by its name, content hits you in the face like a cooling spray of water on a scorching summer day. It offers contemporary music-obsessed readers as much rich content as they can handle: breaking news, exclusive interviews, in-depth, festival events, as well as all kinds of videos. Impressed? You can even purchase some cool merch!

As much as Flood loves to cover this thriving music scene, on the backend, delivering 10K+ posts with all that juicy data – the images and videos – is no joke. Funkhaus’ Technical Director, Drew Baker, knew that a static website was not the way forward for FLOOD:

“We originally built it with Flywheel hosting WordPress using the WPGraphQL plugin that powered a Heroku hosted Nuxt app on the frontend,” Baker told us. “The home page requires a lot of data, so the GraphQL query for that was quite slow. Combined with the traffic it gets, the WordPress server was swamped!” Uh oh.

Fast-Loading Content Reigns Supreme

Baker knew the Flood audience: time is of the essence and content is king. FLOOD’s readers want their music fix and they want it now. Working with Stellate, Baker came up with a solution that resulted in huge improvements.

What’d he do? Put Stellate’s GraphQL Edge Cache in front of the API, wrote Nuxt plugins to handle Preview tokens for drafted content, and then built a plugin to purge the cache on content publish.

What Baker found next was nothing short of astounding. Here’s a snapshot of the server load before and after this deployment:

Stellate’s GraphQL Edge Cache Helps FLOOD Get into the Flow

Just like a drain that’s suddenly unclogged, FLOOD Magazine flows as wonderfully as musicians in a jam session. In Baker’s own words, “Now Flood is running fantastic!” With a 83% overall cache hit rate and a 97% cache hit rate on the most highly requested queries, the reduction in traffic their origin WordPress server has to handle is immense.

On top of that, Stellate’s GraphQL Edge Cache made FLOOD load much faster: the p99, p95 and p50 response times dropped by around 300ms each after they deployed the edge caching to production. With these refreshing and timely results, Baker plans to apply Stellate to more of Funkhaus’ SSR’d sites – let’s see how it affects them all. (He promises to report back, so we will too!)