Optimizing Website Performance: Economic Times' INP Success Story

This summary provides a condensed version of the Economic Times' case study on improving Interaction to Next Paint (INP) to enhance user experience. For detailed information, visit the original case study.

Challenges and Initiatives:

The Economic Times faced the challenge of reducing INP, a metric crucial for assessing website responsiveness. Initially, there was uncertainty on how to measure INP effectively, but Total Blocking Time (TBT) emerged as a target metric. TBT measures the responsiveness during page load and correlates well with INP.

Optimization Strategies:

The team took various steps to optimize TBT:

1. Minimizing main thread work by de-prioritizing non-critical assets.

2. Using requestIdleCallback for non-critical tasks to reduce TBT.

3. Lazy loading third-party libraries and removing unused JavaScript and CSS.

4. Reducing DOM size by rendering elements at user request and lazy loading less important widgets.

Technology Upgrades:

To further enhance performance, the team upgraded their custom UI boilerplate to the latest React version and adopted Next.js. They migrated topic pages to Next.js, utilized PartyTown for offloading heavy work to web workers, and employed requestIdleCallback for deferring non-critical tasks.

Results and Business Outcomes:

The optimization efforts led to a significant reduction in TBT and INP, resulting in a 50% decrease in bounce rate and a 43% increase in pageviews on topic pages. The improvements were observed through metrics from Google Analytics, CrUX, and Akamai mPulse.

Conclusion:

INP proved to be a valuable metric in identifying and resolving runtime performance issues, positively impacting business outcomes. The success of the initiative motivated the Economic Times to extend optimization efforts to other areas of their website for additional benefits.

For more details, refer to the original case study.