CLIENT CLEANUP: 2021 So Far & What’s On Deck

We've made a commitment to share recurring updates on the work we're doing to improve the performance and reliability of the League Client.

Today's update is the seventh blog in the series. (See the first, the second, the third, the fourth, the fifth, and the sixth here)

TL;DR: We spent the first quarter of 2021 working to unblock our path to upgrade Chromium Embedded Framework (CEF). We still have some work to complete but anticipate getting to a new version of Chromium Embedded Framework (CEF) by end of Q2, which will provide a large number of player benefits.

Updating Chromium Embedded Framework (CEF)

As mentioned last time, one of the big projects we're working on is updating the client's version of Chromium Embedded Framework (CEF)—the web browser at the heart of the League Client's architecture. We understated its importance last time, so to be more direct. Updating CEF is the single most impactful individual change we can make to improve the client, both in terms of direct benefits and unlocking our ability to make other improvements.

The last time we updated CEF was November 2019 (version 74); at the time of writing, the latest current version is CEF 90. Updating CEF (We are targeting CEF 90) will reap the following benefits:

• Reduction in Client Crashes
  • Outdated CEF versions don't play nicely with some hardware. Early data is telling us that a majority of crashes could be due to an outdated version of CEF. We strongly believe once we upgrade, we expect to see fewer crashes for players.
• Compatibility improvements
  • The CEF team exhaustively tests new versions against many hardware combinations. The League Client gets the benefit of that testing for free.
• Faster WebSocket performance
  • The League Client has two big chunks: the "front end" which is the visual application you interact with and a much smaller "foundation" which runs behind the scenes, fetching data from our servers and keeping track of all the information the client needs to surface the right stuff to you. Examples of stuff the foundation does:
    • "This player enabled the setting to close the client during games and they just entered game; kill the front end until they're done."
    • "This player just opened up the Collections tab. Which champions do they own?"
  • A websocket is basically a pipe that connects the front end to the foundation. A larger pipe with fewer twists and turns gets more data to you faster, which is what a newer CEF version gets us. Especially for players on older hardware, websocket improvements can result in better performance in places where lots of data is transferred (End of Game, Champ Select). Comparing our CEF versions, the difference could be up to:
    • 4.1x faster on Windows
    • 7.8x faster on Mac
• Improved animation performance
  • In particular, animations that are procedurally animated based on data, like the experience bar in the End of Game screen (we have a lot of these). These animations are technically a type of memory leak so general client performance over long sessions will also improve.
• Better FPS—Reduced ‘sluggishness’ and faster acknowledgment of clicks
• Easier (read: faster, more reliable) for our devs to work with
  • Additional ways to prevent memory leaks across longer play sessions
  • A new metric that gives us better data on how long things in the client actually take to render on-screen
• Smarter CPU usage
  • The client's current CEF version (74) debuted a feature called "Network Service" that routes all network requests through a single thread in your CPU, freeing up other threads for other stuff like loading content. We aren't using this feature right now since it was brand new when we last updated CEF and we didn't have time to experiment with it. With our next upgrade, we can begin planning support for it in League.
• Improved Javascript performance
  • Newer versions of Chromium bring significant improvements to the v8 engine it uses to handle javascript. Like compatibility improvements, this is a benefit we get just by upgrading versions.

Our work this past quarter has been focused on upgrading our existing web components (think website tech for video embeds, popup notifications, and whatnot) to versions that are compatible with new CEF versions, to ensure upgrading CEF itself won't break anything. We want upgrading these components to be a seamless experience, so hopefully, you haven't noticed us rolling these upgrades out over the past few patches. These upgrades touch a vast amount of code so we're aware of the occasional minor issue that slipped past testing, but are fixing these issues as we catch them.

All said we're just a few weeks away from finishing these component upgrades and will be able to move on to updating CEF itself, which we hope to have done by end of July 2021.

Social Panel

Another area of focus we mentioned last time was the Social Panel. Our long-term plan is to transition the social panel from ComponentsJS (old architecture) to Ember. This is currently on hold while we focus on getting the CEF update out the door, though we've completed some of the early steps required for the Ember transition and will come back to this once CEF has been updated.

Here are the major issues we resolved with the Social Panel before shifting focus onto unblocking our CEF upgrade:

1. Social panel not connecting
2. Friends list not loading, incorrect status being displayed, friends not populating
3. Ranked information disappearing from hovercard when a player is in a normal game
4. Flickering from Disconnected to the sad poro to Friends List Loading on startup

Update on Memory Footprint and Javascript Errors

We have also continued to track the memory footprint for games played in a single session. We are happy to report that we have seen almost a 30MB drop per game played since patch 10.25 and a continued decrease in out-of-memory crashes across the board.

The last item we want to touch on is Javascript errors. We made a mistake in our previous post about the actual number of JS errors players experienced in Riot Regions. In 10.25, it was a whopping 265 million. The silver lining is that only further underscores the urgency of the problem, and the actual number of errors players experienced didn't change, just our measurement of them. Since then, we’ve reduced the number of errors to 140 million per patch and feel confident that we can reduce this number even further.

What’s on Deck

Although the CEF upgrade is our primary focus in the near-term, we're also lining up projects we want to tackle later in 2021.

• Transitioning the Social Panel to Ember, as discussed above
• Revisiting End Of Game (EOG). While we addressed a couple of major issues with End of Game performance late last year/early this year, there's more work to be done. Many players still complain about the time it takes to get back into the client and/or EOG freezing. Once this project begins, we'll start by mapping out all the client's interactions with the in-game engine and services, and then see what we can do to improve the experience. EOG works with many other services the client team doesn't own, so part of the process will be partnering with other teams to prioritize joint fixes.
• Getting into Champ Select late. This is a highly reported issue for some regions, which tells us there's a dependency on a player's network connection (internet infrastructure varies from region to region). While we can't do much to address the network issues, we'll still be working with the Competitive team to do what we can within the client to ensure all players get into Champ Select in a reasonable amount of time.
• Client stability during long sessions. One of our emergent focuses at the end of last year was addressing memory leaks, which cause the client to take up increasingly more memory as players play multiple games or leave their client idling for long stretches of time. As a more comprehensive follow-up, we'll be looking for intuitive ways for players to consistently experience the client as if they had just logged in, regardless of how many games they've played or how long the client's been open. The fix here could be to continue to double down and address more difficult memory leaks, but we will have to evaluate that work against short-term solutions.

That's all for this update! As always, the work we do is driven in no small part by the feedback we receive through a variety of means, like our regular player surveys. Please keep letting us know which parts of the client need the most work, and which of our changes have had the biggest impact on your experience!