Boosting Website Performance: A Case Study Summary on Slashing Total Blocking Time by 300ms

Nicholas Ray recently outlined a fascinating case study on how Wikipedia significantly improved its mobile site's performance by cutting Total Blocking Time (TBT) by a whopping 300ms. The journey of optimizing a site's performance is often a tale of small yet impactful changes. Below is the summarized version of the above case study for quick reading and understanding.

Understanding Total Blocking Time (TBT): TBT measures how long tasks on a website's main thread delay user interactions. Google considers tasks longer than 50ms as potential bottlenecks. Wikipedia's mobile site had a JavaScript task taking over 600ms, significantly impacting user interactions.

Identifying the Problem: Nicholas discovered that a specific JavaScript block, responsible for link handling and media viewer initialization, was causing extensive delays. For instance, attaching click event listeners to thousands of links or images was impeding page responsiveness.

Solution Phase: The solution involved two main steps:

1. Removing Unnecessary JavaScript: Nicholas found a block of code handling link clicks that wasn't crucial. Removing it freed up nearly 200ms from the main thread without affecting functionality.

2. Optimizing Existing JavaScript: Another performance bottleneck involved attaching event listeners to numerous thumbnails. By using event delegation, Nicholas optimized this process by attaching a single event listener to a container element.

The Impact: Implementing these changes led to remarkable improvements:

• The first deployment reduced TBT by 200ms.

• The second deployment further decreased TBT by 80ms, specifically on a Moto G (5) phone visiting lengthy articles.

The Key Takeaway: This case study highlights the immense impact of small yet targeted optimizations. Even seemingly minor code changes can substantially enhance a website's performance. It's a reminder that achieving a responsive browsing experience often involves making strategic tweaks rather than complex overhauls.