EDGEMESH
Solutions
The Problems We Solve
Learn how Edgemesh solves the most challenging ecommerce issues
01
Speed Up Your eCommerce Store
02
Get Deeper Insights
03
Improve Organic Search
04
Optimize Ad Spend
Resources
Insights, Success Stories and More
Expert advice and insights on how to optimize your ecommerce business.
01
Blog
02
Case Studies
03
Live Overview
03
Guides
EditionsCustomers
About
About Edgemesh
Learn more about Edgemesh
01
In the News
02
About Us
Request a Demo
Customer Login
|
Support
SIGNUPLOGIN
Customer Login
|
Support
Request a Demo
Posted on 

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;

Rendering for Largest Contentful Paint


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.

Detecting the LCP element client side

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)

optimized link header with LCP element

‍

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)

No Preload header or HTML optimization (LCP ~= 610ms)

‍

Same page with Preload optimization and HTML optimization (LCP ~=350ms)
Tagged:
Core Web Vitals
Performance
Website Acceleration

Want more insights? 

Enter your email address to sign up for our monthly newsletter:
Jacob Loveless
Co-Founder
view All Posts
Featured Posts
Performance
Third-Party Tags: How They Affect Overall Website Performance
Insights
10 2023 E-Commerce Key Metrics [+1 That’s Often Missed]
Ad Fraud
Edgemesh Launches Ad Protect, a Solution to Help Retail Brands Identify and Prevent Ad Fraud
Engineering
Faster Largest Contentful Paint with Edgemesh Server
Headless
10 New Changes on Shopify Online Store 2.0
Ad Fraud
How We’re Fighting Ad Fraud with Edgemesh Server
Ad Fraud
Ad Fraud: What it is, the Different Types & How to Prevent it
Performance
Server-Side Caching vs. Client-Side Caching: The Differences (And Which Is Good For Your Website)
Tags
Ad Fraud
Business
Client Side Caching
Conversion Rate
Core Web Vitals
Development
Features
Headless eCommerce
Performance
SEO
Shopify
Website Acceleration
wordpress
Stay Connected

Try Edgemesh Today!

START 14-dAY FREE TRIAL
More Posts

You Might Also Like

Performance
How To Create 301 Redirects In 3 Simple Ways
Jan 25, 2023
 by 
Ayomide Joseph
Performance
5 Ways to Optimize Third-Party Scripts (And Easier Solutions)
Nov 25, 2022
 by 
Ayomide Joseph
Performance
Real User Monitoring (RUM) vs Synthetic Monitoring: The Complete Guide
Nov 22, 2022
 by 
Ayomide Joseph
Performance
Third-Party Tags: How They Affect Overall Website Performance
Oct 28, 2022
 by 
Ayomide Joseph
Insights
10 2023 E-Commerce Key Metrics [+1 That’s Often Missed]
Oct 18, 2022
 by 
Ayomide Joseph
Performance
How to Serve Images in Next-Gen Formats: The Complete Guide
Sep 28, 2022
 by 
Ayomide Joseph
EDGEMESH

Welcome to a head(ache)-less ecommerce experience.

Navigation
HomeSpeed Up Your WebsiteGet Deeper InsightsImprove Ad EffectivenessImprove SEOEditions
Resources
BlogNews & ArticlesDocumentationContact Support
Legal
Terms of ServicePrivacy Policy