NDTV enhanced user experience and thus retention by optimizing for Web Vitals.

[NDTV](https://ndtv.com) is one of India's leading news stations and websites. By following the [Web
Vitals](https://web.dev/articles/vitals) program, they improved one of their most important user metrics,
[Largest Contentful Paint](https://web.dev/articles/lcp) (LCP), by 55% in just a month. This was correlated
with a 50% reduction in bounce rates.

> [!NOTE]
> **Note:** NDTV made other product changes while they optimized for Web Vitals so it is not possible to conclusively say that optimizing for Web Vitals was the only cause of the bounce rate reduction.

55~%~

Improvement in LCP
50~%~

Reduction in bounce rates

## Highlighting the opportunity

With close to 200M unique users every month, it was critical for NDTV to optimize for quality of
user experience. Although their engagement rates were well over industry average and the highest
amongst their peers, the NDTV team still saw room for improvement and decided to invest in Web
Vitals along with other product changes to further improve their engagement rates.

## The approach they used

With the help of tools like [PageSpeed
Insights](https://developer.chrome.com/blog/chrome-ux-report-pagespeed-insights),
[web.dev/measure](https://web.dev/), and [WebPageTest](https://www.webpagetest.org/) the NDTV
team analyzed potential improvement areas on the site. These clearly defined optimization ideas
helped them re-prioritize high-impact tasks and achieve immediate results in the improvement of Core
Web Vitals. Optimizations included:
- **Prioritizing the largest content block** by [delaying third-party requests](https://web.dev/articles/efficiently-load-third-party-javascript#use_async_or_defer), including ad calls for below-the-fold ad slots, and social network embeds, which are also below-the-fold.
- **Increasing the [caching](https://web.dev/uses-long-cache-ttl)** of static content from a few minutes to 30 days.
- **Using [`font-display`](https://web.dev/articles/avoid-invisible-text)** to display text sooner while fonts are downloaded.
- **Using vector graphics for icons** instead of TrueType Fonts (TTF).
- **Lazy loading
  [JavaScript](https://web.dev/articles/efficiently-load-third-party-javascript#lazy-load_third-party_resources)
  and [CSS](https://css-tricks.com/native-lazy-loading/)**: loading the page with the minimum possible JS and CSS and then lazy loading the remaining JS and CSS on page scroll.
- **[Preconnecting](https://web.dev/uses-rel-preconnect)** to origins delivering critical assets.

![A summary of the optimizations: Largest Contentful Paint, Caching, CSS, vector graphics, lazily loaded JS and CSS, preconnecting.](https://web.dev/static/case-studies/ndtv/image/a-summary-the-optimizati-b938d496646d5.png)

## Impact

Web Vitals equipped the team with metric-driven signals to expedite the
process of improving user experience.

Before beginning the optimization project, the NDTV team benchmarked their LCP
score at 3.0 seconds (for the 75th percentile of their users, based on
[Chrome User Experience Report](https://web.dev/articles/chrome-ux-report) field data).
After the optimization project, it was down to 1.6 seconds.
They also reduced their [Cumulative Layout Shift](https://web.dev/articles/cls) (CLS) score to
0.05. Other metrics on WebPageTest like
"[First Byte Time](https://web.dev/articles/ttfb)" and "Effective use of
[CDN](https://web.dev/articles/content-delivery-networks)" improved to an A grade.
![0.05 CLS score.](https://web.dev/static/case-studies/ndtv/image/005-cls-score-63ecddcee9427.png)

> [!NOTE]
> **Note:** When optimizing your site, remember that it's important to not think of your metric scores as single values, but rather a distribution of field data values from real users. You'll want to make sure that the distribution overall is improving. See [Web Performance: Leveraging The Metrics That Most Affect UX](https://youtu.be/6Ljq-Jn-EgU?t=120) for more information.

## Return on investment

Despite the complexity and depth of [ndtv.com](https://ndtv.com), the site was
already achieving decent FID and CLS scores, thanks to the team's longstanding
focus on performance and UX best practices. To further improve their user
experience, the team focused on LCP and managed to meet the threshold within a
few weeks of kicking off their optimization work.

## Overall business results

- 55% improvement in LCP as a result of optimizing for Core Web Vitals.
- 50% reduction in bounce rate on the website after optimizing for Core Web Vitals, along with other product changes.
- Increased engagement and consumption of content directly, and proportionally increased revenue for their website.

![55% improvement in LCP. 50% reduction in bounce rate. Increased engagement and consumption.](https://web.dev/static/case-studies/ndtv/image/55-improvement-lcp-50-bbfb39b0c8352.png)
> NDTV has long followed best practices to deliver a top-quality user experience. We consider
> measuring Web Vitals to be an integral part of our product development now, and the engagement
> uplift we've seen makes it a good ROI.
> Kawaljit Singh Bedi, Chief Technology and Product Officer, NDTV Group

Check out the [Scale on web case studies](https://web.dev/scale-on-web) page for more success
stories from India and Southeast Asia.