How Economic Times Reduced Bounce Rate by 43% with Core Web Vitals

The Challenge: High Traffic, High Stakes

The Economic Times handles over 45 million monthly active users. With internet speeds improving day-by-day, users expect websites to respond and behave faster than ever. By optimizing for Core Web Vitals across the domain, on AMP and non-AMP pages, the team managed to significantly reduce bounce rates and improve the reading experience.

Measuring the Impact

The team focused on Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS), as they matter the most when it comes to providing a great reading experience to users.

Key Results:

Overall CLS improved by 250% - from 0.25 to 0.09

Overall LCP improved by 80% - from 4.5 seconds to 2.5 seconds

Bounce rate reduced by 43% across the entire website

LCP Optimization Strategies

1. Critical Requests First

All modern browsers limit the concurrent number of requests. The team prioritized loading critical content first - evaluating what elements were required for LCP and providing preference to load those items first.

2. Font Display Optimization

The team experimented with the font-display property. Using font-display: swap renders text initially in the best matching available font, then switches when the custom font downloads. This resulted in text rendering quickly, independent of network speed.

3. Better Compression with Brotli

Switching from Gzip to Brotli compression achieved:

JavaScript files 15% smaller

HTML files 18% smaller

CSS and font files 17% smaller

4. Preconnect and DNS Prefetch

Using preconnect for known third-party domains and dns-prefetch for occasional resources like social media and analytics helped reduce connection setup time.

5. Code Splitting

Only loading essential business logic and critical above-the-fold rendering resources in the head. Splitting code into chunks further improved LCP.

6. Redis Caching Layer

Adding a Redis layer for front-end routes served templates from cache, reducing server computation time and improving LCP for subsequent requests.

CLS Optimization Strategies

1. Placeholder Elements

Using styled placeholders for ad units and media elements of known dimensions prevents layout shifts when content loads.

2. Defined Container Dimensions

Explicitly defining dimensions for all containers that hold dynamic content ensures the browser allocates correct space before content loads.

CLS Results:

Poor values reduced by 65%

Good values increased by 20%

FID Optimization Strategies

1. Break Up Long JavaScript Tasks

Splitting long JavaScript tasks into smaller chunks allows the browser to respond to user input between tasks.

2. Defer Unused JavaScript

Moving non-critical JavaScript to defer loading reduces main thread blocking.

3. Reduce Polyfills

Modern browsers don't need many polyfills. Removing unnecessary polyfills reduced JavaScript bundle size.

4. Lazy Load Ads

Loading advertisements lazily prevents them from blocking the main thread during initial page load.

Key Takeaways

Focus on user-centric metrics - LCP and CLS directly impact reading experience

Prioritize critical path - Load what matters first

Compression matters - Brotli provides significant size reductions

Cache aggressively - Redis caching dramatically improves repeat visits

Define dimensions - Prevent layout shifts by reserving space for dynamic content

---

> Source Attribution: This content is adapted from the case study "How The Economic Times passed Core Web Vitals thresholds and achieved an overall 43% better bounce rate" published on web.dev under the Creative Commons Attribution 4.0 License. Original authors: Anshu Sharma, Prashant Mishra, Sumit Gugnani.