CLIENT CLEANUP: We launched the updated Chromium Embedded Framework (CEF)

We launched our new version of CEF and the results are lookin' good!
We've made a commitment to share updates on what we've been doing to improve the performance and reliability of the League Client. Today's update is the ninth blog in the series. (See the first, second, third, fourth, fifth, sixth, seventh, and eighth here!)

TL;DR—We updated the CEF (Chromium Embedded Framework) web browser at the heart of the League Client in patch 11.17 and have seen significantly improved memory usage, lower CPU utilization, and fewer crashes. With this, we can now focus on planning more frequent updates to improve the reliability and performance of the client!

Updating Chromium Embedded Framework (CEF)

It's a big moment for the Client Cleanup Campaign! Back in the beginning of the year, we determined that updating the client's version of Chromium Embedded Framework (CEF)a.k.a. the web browser at the heart of the League Client's architectureto version 91 would be the most impactful thing we could do to improve the client. (For context, the last time we updated it was back in November 2019 to version 74...) The benefits of updating CEF are two-fold: First, it immediately improves memory usage, CPU utilization, and stability. Second, it unlocks our ability to do many future improvements since it comes with newer features and tools (more on that in a sec). These reasons made updating CEF our top priority of the year, so we're super happy to announce we successfully launched the update to version 91 in patch 11.17 with great results so far!

Fewer Client Crashes

Upgrading CEF helped us address a lot of client crashes, and our goal is to continue addressing the ones that impact players the most. We're happy to see a 61% drop in crashes since 11.16 and a 38% drop from the average rate in 2021 so far, and we plan to keep driving those numbers down. In fact, early data from patch 11.18 shows another big drop in crashes! This is a huge win since we have a large number of client startups in any given patch (which can be upwards of 240 million in our Riot Regions!)

Patch

Number of Crashes

11.14

2,349,865

11.15*

3,686,442

11.16

3,161,145

11.17

1,214,155

(* 11.15 had a longer patch cycle, explaining the higher count here.)

The top culprit behind the remaining crashes seems to be machines running out of memory. After digging a bit deeper, we noticed that almost half of these out-of-memory crashes were on old PCs running Windows 7. While some players worldwide do play League on old PCs running Windows 7 (our current minspec), we're going to investigate how many of these cases are bots, unlicensed/out-of-date copies of Windows, or other circumstances that aren't representative of regular players legitimately playing League.

Reduced Memory Usage

We've seen a significant decrease in the client's front-end memory usage during a single session. The front-end of the client refers to the visual elements that players interact with like buttons, text fields, and pretty much everything you can see and click on. In our Riot Regions, here's the breakdown:

CEF Version

20th percentile players (faster machines)

50th percentile players (medium spec machines)

90th percentile players (slower spec machines)

74 (pre-patch 11.17)

359 MB

597 MB

1016 MB

91 (patch 11.17+)

74 MB

275 MB

598 MB

Improvement

285 MB (79%)

322 MB (54%)

418 MB (41%)

Memory in this context is sort of like attention—the more it's freed up, the more room your computer has to multitask or focus on what it's already doing. This means fewer client crashes and more memory available so you can watch LCS streams and queue up for ranked at the same time!

Lower CPU Utilization

We've also seen a decrease in the amount of CPU power the client now uses. Here's the breakdown in our Riot Regions:

CEF Version

20th percentile players ( faster machines)

50th percentile players (medium spec machines)

90th percentile players (slower spec machines)

74 (pre-patch 11.17)

13%

34%

83%

91 (patch 11.17+)

10%

22%

72%

Percent Drop

23%

35%

15%

This means your computer doesn't have to work as hard to run the client, leading to cooler processors and less power consumption. Videos, for example, are very taxing on the CPU, whereas the League Client shouldn’t be. Basically, more Netflix and Pentakill.

What does a newer version of CEF unlock for us?

Chromium-based apps

Chromium-based apps are some of the fastest-growing tools and programs in software development today. You’re probably already using a Chromium app to read this article, to chat in Discord with your friends, and to listen to that playlist of the same 10 songs on repeat for the 100th time. Every single one of those applications use Chromium, and so does the client. Updating the client's Chromium Embedded Framework version gives us access to Chromium's newer features and improvements.

WebAssembly

Next let’s talk about WebAssembly, a code format that can run complex instructions much faster than base JavaScript, which is what many apps in the client still run on (remember "ember apps" from earlier blogs?). CEF basically emulates a specialized "mini-computer" within the client that uses WebAssembly to process code more efficiently. Because WebAssembly supports a wide variety of programming languages, it makes reusing existing code easier while also giving us the performance advantage that comes with running processes in that specialized "mini-computer" (rather than launching a separate application). WebAssembly is slowly being adopted across the web, and support in Chromium improves with each release. Having access to WebAssembly will make the client faster and let us do things we couldn't do before.

Web Workers

Then there’s Web Workers. Historically, Chromium apps run synchronously, meaning they process one line of code at a time. That's like having one single worker on the entire factory line, whereas Web Worker*S* scale up the team so you can run multiple lines of code alongside each other. A Chat Web Worker could handle all things chat, while the main client focuses on getting you into a game. So if you've got a particularly talkative friend asking you for Teemo build suggestions, that conversation would no longer slow down the rest of your client experience. Web Workers will also make the client faster.

Even without writing new code to take advantage of these new features, updating CEF alone has already made the client faster thanks to better handling of the JavaScript we've already written. As we improve other areas of the client, we can focus on methods that work well with native performance improvements.

Other Updates

We've also made progress on the End Of Game (EOG) experience since our last blog post. First things first, we added some code to collect data on exactly what's going on during the stalled "Waiting for Stats" page that players are still experiencing. This helped us identify and improve the delay time since it really shouldn't be as long as it currently is. We also shipped a fix in 11.17 that reduced the chance of that page completely freezing. Additional fixes to the game engine were pushed to speed up EOG even more in 11.19. And—last but not least!—we're excited to integrate Challenges and are doing our due diligence to make sure this new feature doesn't impact the client's performance and reliability.

What’s Next

Our CEF update proved to be extremely valuable in improving the client, so we're establishing a more frequent update schedule (instead of once every 1.5 years, lolz). As for the rest of 2021, we will continue to prioritize the reliability of the client, address EOG with the Challenges team, address high-frustration bugs, and continue to improve our code to improve your experience. Thanks for joining us in celebrating this huge milestone on the Client Cleanup Campaign! See you in the next one.