Largest Contentful Paint (LCP) measures when the largest visible content element in the viewport has loaded, representing the perceived loading speed.Open glossary entry → is one of the Core Web Vitals are a set of Google metrics that measure real-world user experience in the areas of loading performance, interactivity and visual stability.Open glossary entry → and measures the point at which the largest visible element in the viewport has finished loading. This is often a hero image, a product image, a large heading or a large block of text. A good LCP value is no more than 2.5 seconds.
A poor LCP is often caused by a large, uncompressed hero image, a slow server, Render-blocking resources are files such as CSS or JavaScript that the browser must load and process before it can render the page, thereby delaying rendering.Open glossary entry →, Lazy loading is the deferred loading of content such as images only when it enters the visible area, in order to reduce the initial loading time.Open glossary entry → on the most important image or missing image prioritisation. You can improve LCP by, for example:
- compressing the main image and serving it as WebP and AVIF are modern, space-saving image formats that produce much smaller files than JPEG or PNG at comparable quality, improving loading time.Open glossary entry → or AVIF,
- providing Responsive images deliver an appropriately sized image variant depending on the device's screen size and resolution, so that unnecessarily large files are not loaded.Open glossary entry → with
srcset, - not lazy-loading the LCP image but prioritising it with
fetchpriority="high", - loading critical Cascading Style Sheets (CSS) is the language used to define the layout and design of web pages. CSS controls colours, fonts, spacing and arrangement, among other things.Open glossary entry → early and improving Time to First Byte (TTFB) is the time until the browser receives the first byte of the server response, describing how quickly the server reacts.Open glossary entry → (TTFB).