Now in its 75th year, the Fender Musical Instruments Corporation is maker of some of the music world’s best-loved rock n’ roll guitars, basses, and amplifiers. The brand is iconic: Leo Fender, the company’s founder, was inducted into the Rock ‘n Roll Hall of Fame in 1992, and products like the Stratocaster and the Twin Reverb Amp have retained their timeless cool. As a company, Fender has flourished in the competitive, US$2-billion-per-year musical instrument industry with 2020 revenue nearing a half-billion dollars.
Despite its analog roots, the company is focusing on digital technology to help it stay at the top of the charts. The Fender Play app, for example, is dedicated to helping neophyte guitar (also bass and even ukelele) players unleash their inner rock god. The company also serves musicians through its flagship website, Fender.com, with interactive content like “Find Your Fender” interactive app for matching players with the right instrument.
Last year, Fender technologists and marketers recognized they needed to do more to keep people glued to Fender.com. They began to search for ways to get more people to visit the site and spend more time on it. That meant devising a page that loaded almost instantly and rapidly linked users to a wide range of mobile offerings — everything from virtual guitar lessons to product information to an online guitar tuner app.
“It’s important to get our customers, including people who are basically brand new at playing an instrument, into our ecosystem faster,” says Mark Beeson, director of client engineering at Fender. “We publish a large number of articles geared towards early beginners, such as how to buy a guitar and select the right strings for it.”
To make the site a place that clients were more willing to move around in, Beeson turned toward a stalwart of its own: Gatsby.
“Gatsby was part of my thinking from the beginning,” Beeson says. “I’ve used Gatsby before, so I understand the power of it. And I understand the simplicity inherent in hosting a Gatsby site. We are very much about keeping our infrastructure very simple.”
The elegance of Gatsby lies in its ease of use, Beeson adds: “We don’t want to have a huge amount of technical complexity because we know that introduces issues. Just being able to dump a bunch of HTML documents, JavaScript, and images into an S3 bucket and call it a day—that was very important to us.”
So in mid-2020 Fender began to rework the site, starting with an Ember application that fetched info from a database and used an API to store content. That part of the site was usable, but page load times were a problem. “Our overall page wait was very slow and the time to first render was very slow as well,” Beeson says. Google Lighthouse analytics confirmed that observation: To move faster and more efficiently, the site needed a new front end.
Beeson and other Fender technologists got to work, making sure that their Contentful CMS was aligned with the new Gatsby front end, as were the site’s existing React components. Though the team needed to create a custom plugin/navigation feed for the company’s Salesforce platform, Beeson describes the overall transition as “basically seamless.“
On the few occasions when they ran into snags, the Fender team leaned on Gatsby experts in order to move forward, specifically when it came to learning more about Gatsby internals. “There are always technical gotchas with every implementation, like publishing only certain pages versus publishing the whole site. We wanted to be sure we were optimizing effectively to make sure the time it took to publish the site is as short as possible,” Beeson says, adding that Gatsby tech experts were typically able to solve Fender’s issues within 24 hours.
The new Fender site launched last September demonstrated immediate results. Analytics show that using Gatsby was, er, instrumental in providing seriously improved site performance. Fender.com demonstrated a 63 percent faster first contentful paint, meaning that pages were loading almost instantaneously. What’s more, the site’s Lighthouse score improved by a whopping 275 percent, with its Lighthouse speed index clocking in 40 percent faster after the switch to Gatsby.
As a bonus, even as the site received more requests Gatsby’s efficiency lowered its network load by 80 percent.
“Having a Gatsby site really pushed up our rankings,” Beeson reports. “It wasn’t overnight, but it all happened in a short amount of time. That really helped us on the SEO side.”
It all adds up to a better client experience, he adds: “People are spending more time on the sites. Users are able to browse from page to page much more quickly than before. And we see people engaging with the content itself more than before.”
As 2021 progresses, Gatsby will become more and more of a key facet of Fender.com. “We have this router that creates different routes to different applications so that our lessons app, Fender Play, will become its own application,” says Beeson. “We’ll also be moving more marketing content into Gatsby. There’s a ton of room for growth.”
Rock on, Fender.com 🤘!