Largest Contentful Paint element

Overview

Largest Contentful Paint (LCP) is a performance metric that measures the perceived loading experience for users.

Simply, LCP measures how long it takes for the largest content element (e.g., hero image, heading text, etc.) on your page to become visible.

LCP is one of the Google Web Vitals metrics. 

How to improve Largest Contentful Paint?

Improve your LCP timing by incorporating good web development practices, such as:

1) Reducing server response time

Reducing server response time helps load resources faster and deliver a fast LCP time on your page. Some of the things you can do here include:

• Reducing initial server response time
• Serving static assets with an efficient cache policy
• Using a Content Delivery Network (CDN) – Available on Staq (we call this Traditional CDN)
• Establishing early connections to important third-party origins
• Make your website load from the cloud via a CDN proxy – Available on Staq (we call this Next-Gen CDN)

Under Staq Hosting > JavaScript > Site Optimizer you will see numerous opportunities to improve Speed Index such as Minify Javascript files, Minify JavaScript files, Combine all JavaScript etc.

Staq’s Next-Gen CDN (near-serverless) capabilities will also improve Largest Contentful Paint.

2) Eliminating render-blocking behaviour

Eliminating render-blocking behaviour on your page ensures resources load as fast as possible.

3) Optimizing images and videos

Optimize image and video delivery on your page to reduce the time taken to load images and videos. Some of the things you can do include:

• Properly sizing images
• Efficiently encoding images
• Combining images using CSS sprites
• Serving images in next-gen formats
• Using video formats for animated content

Staq Automatically does it for you!

Staq can automatically compress png and jpg images and convert them to WebP format as well!

Serving images in next-gen format means serving images in WebP format. Go to Site Optimizer > Media and click Serve next-gen images [WebP] and also enable Rewrite media URLs for the cached file to show WebP images: