Faster Largest Contentful Paint with Edgemesh Server

The Largest Contentful Paint is a complex metric, yet is critical to obtaining high marks on Google's Core Web Vitals scores. Largest Contentful Paint (LCP) is a metric that measures the time it takes the largest content block or content element to become visible in the viewport. In other words, it’s a measurement of how long it takes for a web page to be readable by a user. Here’s a quick example of what it looks like;

Unless the LCP loads, the user will most likely not see anything on the web page. This is because LCP is always above the fold i.e., the content you see without scrolling. For site owners, the LCP is a critical metric as this is the time it takes before you can present your product page (long before user interaction).

‍

How Edgemesh Server Accelerates LCP

For years we've analyzed how best to increase the rate of LCP rendering, and have made huge strides with Client Side Caching and Enhanced Server response time - but these methods are general solutions to a specific problem. The key issue has been how do we dynamically detect which element is the LCP , and once detected how do we inform the browser that this image is a critical asset that should be loaded with higher priority?

Today, we have officially solved this problem through a combination of dynamic client side detection and enhanced server side cache optimization.

Client Side Detection: Powering the optimization

With Edgemesh Server, the ability to utilize the client browser to provide hints has long been a superpower we've employed in optimization. With the LCP optimization, this is now built in. When client browser's access your Edgemesh Server enabled site, the LCP elements are recorded and sent back to the edge alongside other key performance metrics.

When the Edgemesh Server receives this information, it matches this page to an existing custom cache object and rewrites the cached HTML to add two critical changes:

‍

1. A preload link header is added to the response to ensure that future visitors get the LCP element eagerly preloaded

2. The image tag is optimized to include eager loading and optimal decoding (ensuring the browser loads this element as soon as possible)

‍

Best of all, this optimization is completely transparent and adapts to every new page on the fly - delivering faster LCP scores for all browsers regardless of device or image capability.

‍

How much faster is it? (spoiler: A LOT)

We're in the early stages of the production rollout, but already we're seeing 15-60% reductions in LCP timings across the fleet. If you are already using Edgemesh Server's built-in image optimization, you should see improvements on the higher end - but all clients get a speed bump. Here's an example (with client caches disabled)

‍