Summary: Enhancing User Experience: Trendyol's INP Success Story

Trendyol's INP Enhancement Journey

This summary condenses Trendyol's process of enhancing INP and its positive effects on user engagement. For further insights, the Original Case Study provides a detailed breakdown of their journey and methodologies.

Trendyol, a significant ecommerce platform, aimed to enhance user experience by reducing Interaction to Next Paint (INP) on their Product Listing Page (PLP). With INP serving as a critical metric for responsiveness, they sought improvement strategies despite using an older React version.

Identifying INP Issues

• Initial analysis revealed a 963ms INP on mobile, categorized as "poor."

• Lighthouse audits pointed to a script, causing extended JavaScript execution.

• Chrome DevTools' performance panel pinpointed a 700-900ms long task from an Intersection Observer callback within React.

Strategies Implemented

• The team recognized that setState within Intersection Observer impacted performance, leading to a series of lengthy tasks.

• They adopted a technique involving scheduler.yield and setTimeout to split tasks, prioritizing crucial user interactions.

Business Impact

• After six months, INP decreased to around 650ms, marking a 50% improvement.

• A/B tests showcased a 1% increase in click-through rates from the listings to product detail pages.

Conclusion

• Optimizing INP involves a methodical approach, combining tools like PSI, Lighthouse, and DevTools.

• Task splitting via scheduler.yield significantly improved responsiveness, ensuring better user experiences.