Here you can see Google's data on the time it takes to serve content using a service worker compared to without. Top tip: A big advantage of using a Progressive Web App is that they use a service worked by design so it will have a good effect on your Largest Contentful Paint time, too. This will deliver the Largest Conteful Paint even faster than a regular CDN trip.
#HOW TO REDUCE PAGE SIZE IN PAINT UPDATE#
This makes it possible to cache the HTML page's content and just update the cache when the content has changed. So, if your LCP is an image that is cached, a service worker will run in the browser background and can intercept requests from the server. Serve cached HTML content via a service worker To make this even faster, you can use a service worker to serve the cached content first. If your CDN doesn't have edge servers, you can still cache your content by managing your cloud provider's cache behavior. Less distance = less time.Ĭache your HTML Also, if your CDN uses edge servers, you can cache your content so it doesn't have to be reloaded every time. So, when your LCP element is a big HD image file, your user in Helsinki isn't going to have to wait for it to be piped down the wire all from your Brisbane server. Rather than having your content stored in a single location, when users request a page, the content is served from the server closest to them. LCP is a content metric so it makes sense that one of the best ways to improve it is to start with how long it takes to retrieve the content from your server.Īctivate a CDN A content delivery network will store your content on servers all around the world.
#HOW TO REDUCE PAGE SIZE IN PAINT HOW TO#
How to improve Largest Contentful Paint time Stage one: Serve your content faster The most common causes of a poor LCP are: What causes a slow Largest Contentful Paint? Measurement tools such as the Chrome User Experience Report, PageSpeed Insights, and Search Console (Core Web Vitals report) will show you how long it takes to load the LCP. If the user lets the page completely load the LCP will be taken from the largest contentful element that is rendered and visible. If a user interacts with the page, by clicking or scrolling, the reporting will take the LCP from that moment. When this happens the smaller element can be reported as the largest contentful element, but when the bigger element finishes rendering, it gets reported via another Performance Entry. You can see how the LCP switches from the section title to the headline, to the image. So, images further down the page will not affect the LCP time.īut, as you can see in the green boxes above, the Largest Contentful Paint can change during the load.
The elements that can be considered the Largest Contentful Paint are: Often an image or a block of text, the reasoning is that once there is something to look at, the user can start getting value from the page. It is the biggest visual part of the page. What is Largest Contentful Paint? Largest Contentful Paint is a pleasingly simple metric. This is the metric that measures how it takes to give users visual content, a watershed moment in the load process that shows a user that yes, progress is being made. Read our guides to First Input Delay and Cumulative Layout Shift. First up is the Largest Contentful Paint (LCP).
LCP can be sped up by a CDN, caching content, and optimizing assetsĪs Google prepares to make the Core Web Vitals a direct ranking factor, we're looking at how to optimize each metric in detail.Slow LCP is caused by slow servers, render-blocking, and heavy resources.Users like to see content appear as quickly as possible.Largest contentful paint is the biggest visual element loaded by the page.
0 kommentar(er)
