League of Legends, one of the most popular games in the world, attracts over 100 million players around the globe each month to engage in thrilling 5 vs. 5 virtual battle arenas. These players often turn to the League of Legends website to get important content that includes the latest patch notes, champion reworks, and skin releases. To support a user base of this size, Riot Games, the brains behind League of Legends, had to ensure that their team of over 100 web developers were equipped with the right technology to efficiently develop and deploy content at scale.

Since players are eager to dive into new updates and consume all content available to gain an edge, web performance and bandwidth optimizations are critical components of Riot Games’ business strategy. After searching for modern web solutions to meet these demands, Riot Games chose Netlify to support their high website traffic volume and frequent content updates, realizing a remarkable 65% reduction in bandwidth consumption and considerable cost savings.

Searching for a new web stack

Back in 2018, Riot Games was looking for a reliable tech stack solution that could withstand massive traffic spikes. Server-side rendering (SSR) wasn’t a viable option due to its higher susceptibility to crumbling under traffic spikes compared to static site generation (SSG). With scalability and performance in mind, they embarked on their journey to the modern web by building and deploying websites with Gatsby, AWS, and a separate content delivery network (CDN). Although some parts of their stack provided tangible benefits, others presented notable challenges.

One prominent drawback of this fragmented approach was the compromised developer autonomy. For example, when developers needed environment variables updated to retrieve specific content from a database or content source, the process could only be facilitated by a limited number of gatekeepers. This bottleneck became more apparent as Riot Games desperately wanted their developers to independently update all configuration points, including internal environments, SSL certificates, and redirect options.

As the team grew more weary of this barrier to developer autonomy, they began to search for improved solutions. While conducting a market evaluation, Riot Games prioritized finding a partner who meshed well with their own “player-focused” philosophy and could also eliminate the bottlenecks present in their web stack.

In essence, the team wanted to find a new platform that could empower their developers to build, generate, and deploy websites with more control, agility, and autonomy. Another need was a platform that could support ​​Riot's framework of choice, Gatsby.js, while also providing the flexibility to migrate to a different framework in the future if necessary.

Migrating to the Netlify platform

After months-long research, Riot Games selected Netlify. Support for a broad array of frameworks, ability to build custom integrations, and the ability to configure redirect rules, proxy rewrites, and header management were some of the more enticing factors in this decision. Additionally, the availability of internal build environments, along with build previews, provided Riot Games with a much more structured QA process.

Once the team had replatformed to Netlify, website build times decreased from 15-25 minutes to 3-5 minutes, and developer productivity improved as bottlenecks from their previous web stack vanished overnight. Developers could ship quality code faster since they no longer had to rely on system administrators to set up test environments and could instead leverage a more robust, self-serve QA environment. Project planning, which typically took 2-3 weeks, reduced to less than 3 days as a result of the improved agility.

Another advantage for Riot Games was the noticeable increase in web performance. Key metrics such as Time to First Byte (TTFB), First Contentful Paint (FCP), and overall page render time across the globe improved by more than 20%.

The migration to Netlify also had a positive impact on Riot Games’ bottom line. With Netlify’s superior out-of-the-box HTTP caching, Riot Games was able to maintain the same high level of website traffic while reducing bandwidth usage by 65%. Prior to Netlify, the League of Legends and Valorant sites consumed over 200 TB per month, but after migrating to Netlify, bandwidth consumption dropped to less than 70 TB.

The developer team experience

Working with the Netlify team has been an “absolutely epic, five-star experience” for Riot Games.

Jason Rose, Riot Games’ Sr. Web Developer, described the experience as:

We aspire to be the most player-focused gaming company in the world, and Netlify absolutely carries the same spirit of aspiring to be the most developer-focused technology company in the world… Ultimately, there was a sense of deep collaboration, understanding and meeting our business requirements, and providing extremely knowledgeable and highly professional solutions every single step along the way.

The entire team demonstrated what it means to not only create and facilitate a smooth transition, but also showed what a good partnership for web-based experiences looks like… When two different companies share the same level of passion for users, magic happens.

Riot Games and Netlify have partnered together to build and deploy best-in-class digital experiences that delight their fanbase while delivering superior web performance, streamlined QA processes, and increased developer productivity. Netlify is committed to building solutions to help the Riot Games team continue to innovate and build new worlds where their millions of users can meet and do battle.

To learn more, check out the interview with Riot Games below.