Improving LCP on TIL News Sites: An In-depth Look at our Optimization Methods

Authored By: Daya Ram Yadav, Fanendra Nath Tripathi, Neeraj Upadhyay, Niraj Tiwari

This blog builds on our previous discussion about optimizing Core Web Vitals for TIL News sites, where we explored broad strategies to enhance key metrics like LCP, FID, and CLS. In this follow-up, we’re taking a deep dive into Largest Contentful Paint (LCP)- a pivotal performance metric for page load speed. We’ll share practical strategies, real-world implementations, and measurable outcomes to showcase how we’ve significantly improved LCP across our platforms, ensuring a faster, more engaging experience for our users.

Introduction to Largest Contentful Paint(LCP)

Largest Contentful Paint (LCP) is a key metric that measures how quickly the largest visible element on a webpage- be it an image, video, or text block- renders. As part of Google’s Core Web Vitals, LCP directly influences user experience and site performance.

In today’s fast-paced digital world, users expect near-instant page load speeds. A poor LCP score can lead to higher bounce rates, while a fast LCP fosters better engagement and retention. This metric emphasizes the loading speed of the most critical content that users first interact with, shaping their perception of the site’s responsiveness.

By focusing on improving LCP, you not only boost user satisfaction but also align your site with Google’s search ranking criteria, giving it an edge in visibility and performance.

Key Metrics that Define Largest Contentful Paint (LCP)

Understanding what shapes and influences LCP is crucial for optimizing your website's performance. Let’s break it down into measurable components:

1. Measurement Time: LCP is calculated from the moment a user begins? loading a page to the point when the largest visible content element is fully rendered in the viewport.

2. Content Elements: LCP focuses on the largest visual elements on the page, including:

• Images, including background or decorative? images set via CSS
• Video elements
• Block-level text elements, such as paragraphs or headings

3. Performance Thresholds: Google uses these thresholds to evaluate LCP performance:

• Good: LCP occurs within 2.5 seconds
• Needs Improvement: LCP occurs between 2.5 and 4 seconds
• Poor: LCP occurs in 4 seconds or more

4. Impact Factors: Several factors directly influence LCP performance:

• Server Response Times: Faster server responses result in quicker rendering of key content.
• Resource Load Times:The speed at which images, videos, and other resources are fetched affects LCP.
• Render-blocking Resources: Excessive CSS and JavaScript can delay content visibility, negatively impacting LCP.

Optimizing these factors is essential to deliver a seamless and engaging user experience.?

Our Optimization Techniques:???????

1. Improving Server Response Time

Improving server response time is critical for optimizing LCP and overall user experience. To achieve this, we implemented several strategies, including server-to-server API calls over a private network, pre-rendering pages, and leveraging caching on a Content Delivery Network (CDN). Below is a? breakdown of these initiatives and their impact on performance.

A. Server-to-Server API Calls on a Private Network

By transitioning our API calls from the public internet to a private network, we minimized latency and improved response times significantly.

• Direct Server Communication: A private network enables servers to communicate directly, reducing the round-trip time and bypassing delays caused by public internet congestion.
• Impact: We recorded a 70% reduction in average API response times, directly contributing to faster page loads and smoother user experiences.

B. Pre-rendering Pages

Pre-rendering involves generating HTML content in advance and serving it when requested, eliminating real-time processing for frequently accessed pages.

• Optimized Content Delivery: By rendering pages ahead of time, we eliminated the need for real-time processing for frequently accessed pages. This drastically reduced the server's workload and ensured users received content faster.
• Impact: Implementing pre-rendering led to a notable decrease in the time taken to load critical pages, enhancing user satisfaction and retention.

C. Caching on a Content Delivery Network (CDN)

Utilizing a CDN to cache static assets and pre-rendered pages further optimized our response times.

• CDNs store cached content across multiple locations, allowing users to access data from a server closer to them, which reduces latency.
• Reduced Server Load: By offloading requests for static content to the CDN, our origin servers experienced less strain, allowing them to handle dynamic requests more efficiently.
• Impact: The combination of reduced server load and proximity-based delivery significantly improved overall site performance.?

2. Moving Javascripts from the <head> tag (Impact - High)

One of the key strategies implemented to improve LCP was moving all scripts and JSON schema to load after the main App HTML. This change prioritized the parsing of critical page content by ensuring that the main HTML structure loaded first. High-priority JavaScript files, such as ad-related scripts, were preloaded in the head tag to mitigate any delays caused by repositioning scripts.

• Impact: This approach significantly reduced delays in rendering main content, allowing quicker parsing of LCP elements and improving overall page load speed.

We conducted two studies to assess the impact. The following section detail the experiments and their results:

A. Case Study 1: Videoshow Page Implementation

On August 20, 2024, we made an implementation on the TOI Videoshow Page, impacting around 62K URLs in the 'Needs Improvement' state for LCP. Following the changes, this number dropped to just 40 URLs in the same category, indicating a significant improvement in LCP performance.

• Impact: The implementation led to a marked reduction in LCP delays, improving user experience across the affected URLs.

B. Case Study 2: Site-wide Videoshow Improvements

On August 29, 2024, a site-wide update was rolled out, addressing various subsections of the Videoshow page. This update resulted in significant improvements in LCP, which were evident in Google Search Console (GSC) reports, reflecting better load times and overall performance.

• Impact: The improvements led to marked enhancements in LCP across subsections of the Videoshow page, as confirmed by positive trends in the Google Search Console reports. This signified that the improvements had a widespread and beneficial effect on page load speeds.

3. Inline Critical CSS (Impact - High)

External CSS files can introduce delays in rendering, which in turn can slow down the loading of the main image on the page.. To speed this up, we added important CSS directly in the page's head section, allowing key content to load faster. Non-essential CSS was either deferred to load later, from external files placed at the bottom of the page or included within the page itself.

• Impact: By prioritizing the critical CSS, we achieved faster rendering of the first page view, significantly enhancing LCP scores.

4. Optimized Largest Contentful Paint (LCP) images (Impact - High)

We implemented next-gen image formats with advanced compression that significantly reduce file sizes without compromising quality and adapt delivery based on the client’s network speed.?

• Impact: The switch to optimized image formats reduced image load time, directly? improving LCP scores by ensuring faster content visibility.

5. Preloading LCP Key assets and Lazy Loading Other Images (Impact - High)

To optimize initial page load times, we preloaded the LCP image in the head tag with a high fetch-priority. We also removed non-critical preload, pre-connect, and prefetch tags from the head section. Deferred loading was applied to images below the fold, optimizing initial page load time by minimizing data transfer.

• Example: For instance, 80% of images were lazy-loaded, resulting in a 20% reduction in initial load time.

<link rel="preload" as="image" href="lcp-image.jpg" />

<img src="lcp-image.jpg" fetchpriority="high">        

• Impact: By focusing on the essential images first, we achieved a faster initial load, improving perceived load times and significantly enhancing LCP values.

6. Enabling HTTP/3 (Impact - Medium)

We successfully implemented HTTP/3, which has led to substantial improvement in connection? speed, reliability, and overall user experience.

• HTTP/3 allows: Faster Connection Establishment, Reduced Latency and Improved Resource Loading, Better Performance Under Poor Network Conditions and Built-in Security.
• Impact: LCP dropped from 1.13s on HTTP/2 to 766ms on HTTP/3, leading to faster content rendering.

In the below metrics, you can observe that the LCP on HTTP/3 is around 766ms compared to 1.13s on HTTP/2, showcasing the noticeable performance boost.

7. Enabled Brotli Compression (Impact - High)

On average, Brotli compression reduces JavaScript files by 14%, HTML files by 21%, and CSS files by 17% compared to gzip. By applying Brotli compression to these resources, we achieved an overall? 14% reduction in chunk size.

• Impact: Smaller file sizes resulted in faster downloads and quicker page rendering, enhancing LCP performance.

8. Reduced Page HTML size (Impact - Medium)

To enhance initial load times, we implemented lazy loading for non-SEO critical components, ensuring only essential elements loaded first. By streamlining HTML structure, we reduced excess tags and minimized nesting, leading to faster parsing and a lighter markup. Additionally, we purged unused CSS from critical paths, allowing only necessary styles to be loaded upfront. The state JSON was moved to an external file, reducing the initial payload size.

• ?Impact: Lazy Loading significantly reduced the page size, allowing the browser to quickly render the initial layout, improving LCP performance.

A. Moved out State JSON from initial HTML

• We relocated the App state JSON (INITIAL_STATE), which aids in hydration, from the HTML to an external file. This reduced the page size by approximately 30%, improving initial load times and allowing the browser to render the Largest Contentful Paint (LCP) element faster.
• First weight drop in below graph: ?CSS reduction activity
• Second weight drop below graph: Extracted App state from the page.

• Impact: Reduced initial payload size, enabling quicker rendering of the LCP element.

B. AMP Page (Accelerated Mobile Pages) Optimizations?

After updating the code on the article pages? and homepage for AMP (Accelerated Mobile Pages):

1. CSS Size Reduction: Size decreased from 75KB to 25KB.

2. Javascript Optimization: Initially, these JavaScript files were included in the code. We removed them, streamlined some features, and applied conditional hide/show logic wherever necessary.

• Impact: The optimizations contributed to faster page rendering, improving LCP.

9. Removed Custom Fonts (Impact - Low)

We replaced custom fonts such as Montserrat with system fonts like Verdana, arial and sans-serif. This change eliminated about 120KB of font files and 4 network requests, which reduced font loading and parsing time.

• Impact: The switch to system fonts led to faster page rendering, with a modest improvement in LCP by reducing unnecessary resource loading.

10. Reduced Javascript Size (Impact - High)

By reducing the size of JavaScript files, we achieved several performance improvements:?

A. Faster Download and Execution: Smaller JavaScript download quicker, allowing the browser to execute scripts faster? and render key elements including LCP, more promptly.

B. Less Render Blocking: Optimizing JavaScript minimized blocking on the main thread, enabling the browser to prioritize rendering LCP elements without delay.

C. Improved Resource Efficiency: With smaller scripts, the browser used fewer resources (memory and processing power), helping to speed up content display and positively impact LCP.

• Impact: These optimizations allowed the browser to render key page elements more quickly, by reducing memory and processing power needed, thus improving LCP.?

Browser Screenshots:

Key Takeaways

The comprehensive strategies implemented to enhance Largest Contentful Paint (LCP) across TIL News sites yielded significant improvements. High-impact changes, such as optimizing server response times, streamlining critical CSS delivery, and compressing resources, had the most immediate and substantial effects on LCP. These optimizations were complemented by medium and low-impact changes, which further contributed to performance gains and an overall enhanced user experience. By adopting a structured and comprehensive approach to addressing LCP, we achieved meaningful reductions in loading times and improved user satisfaction.

Key techniques like implementing server-to-server API calls over private networks, pre-rendering content, and leveraging a Content Delivery Network (CDN) collectively expedited server response times. This resulted in faster delivery of essential content to users, leading to a marked improvement in LCP and increased user engagement.

Inlining critical CSS and adopting Brotli compression streamlined resource loading by reducing page size and HTTP requests. These enhancements, coupled with a leaner HTML structure and lazy loading of non-critical elements, allowed the browser to prioritize and render key content efficiently, improving both perceived and actual load times.

The adoption of HTTP/3 further accelerated LCP improvements by enabling faster connections and optimizing resource loading, especially under challenging network conditions. This, along with systematic reductions in JavaScript and font-related overheads, ensured that users experienced a smoother and faster browsing journey.

Takeaway: A holistic, data-driven approach to LCP optimization- prioritizing high-impact changes while addressing smaller bottlenecks- creates tangible performance gains. These efforts not only enhance LCP metrics but also elevate user satisfaction, engagement, and retention, making them indispensable for delivering a superior digital experience.

We strive to deliver the best experience to our readers, continually experimenting and innovating to enhance performance. Keep an eye on our blogs to stay updated on the strides we’re making and what’s coming next!

Join Us And #TakeUsToTheNextLevel: https://timesinternet.in/careers

Credits:

Ashish Jaiswal, Puneet Kukreja, Barun Kumar, Hunny Chawla, Ujjwal Paul, Md Rahber Azam, Virendra Rastogi, Vaibhav Sharma, Aditya Singh, Manoj Patial, Paras Agarwal

References:

• https://www.dhirubhai.net/pulse/boosting-times-internets-news-sites-performance-deep-dive-no9cf/

• https://web.dev/articles/fetch-priority
• https://web.dev/articles/optimize-lcp
• https://web.dev/articles/lcp?hl=en?
• https://web.dev/blog/common-misconceptions-lcp?
• https://web.dev/articles/vitals?
• https://web.dev/articles/lcp-lazy-loading?
• https://web.dev/articles/top-cwv?
• https://web.dev/articles/defining-core-web-vitals-thresholds?