Precise Improvements: How TikTok Enhanced its Video Social Experience on Android

Posted by The Android Developer Relations team

TL;DR

TikTok serves a wide range of user groups. With users around the world, it’s inevitable that some of them experience network issues such as slow, intermittent, or expensive connectivity. Other users are using entry level devices with limited memory and storage. Ensuring an excellent app experience in all these scenarios is paramount. TikTok's team was able to significantly improve their overall performance by following Android’s performance guidance, and employing their deep understanding of development tools such as Android Gradle Plugin and Jetpack libraries. If you want to learn how the TikTok team improved their app experience to achieve better business performance, please read our business article here.

Intro

TikTok is one of the most popular community-driven entertainment platforms with 1 billion people across the globe publishing and browsing video content every day.

A diverse user base naturally means diverse network bandwidth conditions and devices with different screen sizes, available memory and processing power. All users want a smooth, responsive app experience, no matter which device they use. If the app is slow to load, or playback gets stuck, users will feel frustrated and might abandon the app altogether. To avoid issues like these, the TikTok team continuously tracks the overall app performance through ongoing data monitoring, peer benchmarks, and user surveys.

TikTok is constantly introducing new features. But a rapid increase in functionality sometimes leads to an upsurge in technical requirements. The engineering team identified three reasons that slowed down the app : janky frames, video playback lag, and network issues. To solve these issues, the TikTok team looked to Android tools to start their app improvement journey.

From Discovery to Solution

Reducing app startup time, a smoother user experience with reduced jank and better video playback experience were three major goals that the team prioritized. They also discussed how to measure the effects of performance optimization to prevent the occurrence of regression.

1. Faster startup: refactor startup framework

App startup time is one of the metrics in Android Vitals. Making sure the app startup time is no longer than the Android Vital’s recommendation is the best way to ensure the app loads and starts responding to user activity as quickly as possible. The App Startup library is an Android Jetpack library to help developers initialize app components simply and efficiently.

The team studied the App Startup library in depth and refactored the app's startup framework to achieve on-demand loading and meticulous scheduling of components. In order to further reduce the execution time of creating Views on the main thread, the team even used a background thread to load View components asynchronously, thus improving the overall speed of app startup.

TikTok used Simpleperf to analyze the code execution time, and Android Studio's Profiler to monitor the usage of resources such as memory, CPU, and network to optimize I/O, threads, and resource locks.

2. Smoother user interface

To ensure a smoother user interface, the team needed to tackle two challenges: 1) simplify the View hierarchy, so that the app only renders what is necessary on screen, and 2) reduce the number of task executions in each frame so that the app can have a steady frame rate.

The TikTok team used the Layout Inspector in Android Studio to pinpoint the unnecessary layout contents. The layout boundaries of each View are clearly visible in the inspector, so the team can easily simplify the View hierarchy of the interface and reduce excessive and unnecessary content drawing.

In many cases, TikTok used doFrame() to perform frame-by-frame tasks. Trying to fit too much work in a single frame will inevitably cause a jank. TikTok's approach was to use allocation algorithms to distribute tasks into different frames to ensure that the application has a steady frame rate.

3. Better video playback experience: reuse resources

TikTok users can create audio and video content in various ways, and different codecs are used to play different types of content. Android provides the MediaCodec class to help access the underlying codec. To further improve the speed of video playback, it is good practice to provide different media player instances for different codecs. The TikTok team created a pool of media player instances throughout the application to neatly provide for various media contents. They even run each media player instance in different threads to minimize interference between one another

Network connection speed is another contributor to video lag . The team tested different solutions, including optimizing connections and reusing sockets, and developed algorithms to dynamically adjust buffer length when streaming content to reduce lag during playback.

They also used on-device video super-resolution to generate high-resolution frames based on low-resolution video content, further improving the quality of video playback without increasing network pressure.

Preloading (loading the next video ahead of time) and pre-rendering (rendering the first frame of the video ahead of time) are critical components to ensure that users have a smooth experience when playing multiple videos in succession. TikTok drew a Surface in advance only adding it into the screen when it is actually needed, to reduce the pressure of drawing it on the spot.

4. Avoid regressions

The team continues to maintain a detailed understanding of performance and works to fine-tune elements when necessary. Luckily, Android has tools in place for this exact purpose, like Systrace to capture traces so developers can export system activities (including CPU scheduling, disk activities, and app threads) for detailed analysis. The team also relies heavily on tools like Perfetto and Android Studio CPU profiler to track the execution time of various events, especially for I/O and class loading.

Better Performance, Better Experience

TikTok creatively leveraged the Android toolchain to track, quantify, and optimize their app’s performance for its business priorities, resulting in improved user experience and an increase in user satisfaction

The app startup time was reduced by 45%, and the smoothness (the chance of the frame rate being lower than the target value) has been optimized by 49%. When playing a video, the first frame of the video appeared 41% faster, and the chance of video lag was reduced by 27%.

Users are now more willing to use TikTok: active days per user in 30 days increased by 1%as did the average of session duration. User surveys and TikTok’s rating in Google Play also show a significant increase in user satisfaction.

The Next Stage for TikTok

By constantly optimizing app performance and adapting to the latest Android 13 platform, TikTok has created a more seamless app experience, encouraging more users to discover, create, and share the content they love.

With more than 250 million active large-screen Android devices globally, the team has also been focusing on large-screen devices, including foldable devices. By adopting the app to large screens, the team has brought a more immersive experience to TikTok users.

To learn more about how TikTok optimized its Android app to improve user experience and business performance, read the article here.

Get Guidance on Performance

To learn how you can get started to inspect, improve and monitor your app's performance visit our developer guide. The fastest way to improve your app's launch speed is by adding a baseline profile to your next release.