Largest Contentful Paint (LCP)
What is LCP and why is it important?
LCP is the time it takes to load the largest block of image, video, or text into the viewport.
This metric is important because the largest block is likely the most important block that you want the user to see and experience on the page. A fast LCP helps ensure that visitors can quickly access the most relevant and important information.
Slow pages rank worse
The user experience is directly related to the conversion rate and thus to the sales of an online shop. In addition, Google is increasingly using the page experience as an independent ranking factor.
Google has been considering page speed as an SEO ranking factor since 2010. In 2018 a Google update followed, which devalues the very slow mobile websites in the search results.
Slow sites have a poorer conversion rate
Every developer knows that the loading time of a page can have a direct impact on the user experience of your website. Long loading times reduce the conversion rate because users are reluctant to wait, especially when using their smartphone.
The page speed influences the income from e-commerce both through the organic reach that an online shop achieves and through the conversion rate.
How to Measure LCP
There are several ways to measure LCP for your online shop. The easiest way is to use Google’s PageSpeed Insights (PSI). Run any page-specific URL through the report to calculate both mobile and desktop scores.
How to improve the LCP score for your online shop
If your LCP score is not good, you can use these measures to improve the page loading time of your online shop:
Identify & optimize LCP element
Very often the LCP element will be an image, make sure you optimize it for all devices.
So, optimize this image especially carefully for a small size and use a specially optimized image for your mobile website or refrain from using large images in the first viewing area.
Additional code can easily build up on your website over time, especially if you manually add new applications and don’t remove the old code.
Often, elements are just hidden or code commented out, which can increase the size of browser downloads.
When a visitor comes to your website or online shop, their web browser basically starts at the top of your website’s code and reads its way down.
How can you eliminate render blocking CSS?
Eliminating render blocking CSS can be more complicated, as you have to be careful not to delay the CSS that is needed to render above the fold content.
The ideal practice is to identify the styles that are required to render above the fold content and deliver those styles inline with the HTML.
Use the media attribute on the link elements that use CSS files to identify CSS resources that are only needed for specific devices or situations.
Load critical / important content and resources first
Conversely, you should provide critical CSS as soon as possible
Identify the critical CSS (related to the layout and above the content above the fold) and make sure it loads quickly.
In the case of images, the file size can usually be reduced significantly, which noticeably increases the speed of the website.
There are many free online tools for compressing images, such as: B. TinyPNG or CompressJPEG. We generally recommend compressing the images before uploading them.
Make use of lazyload images
Delay loading images below the fold until they come into view.
Load above-the-fold images as early as possible, as these images should be visible as soon as possible.
Use responsive images (Srcset)
With srcset you define a set of image sources and thus overwrite the src attribute. Offer the browser different image sizes. The browser will select and retrieve the appropriate size image, making sure it does not download larger images than needed.
Pre-connect external resources (prefetching)
All external resources are drawn from applications that are not physically located on your website. When a visitor comes to your online shop, the browser calls up these resources. The more external resources that need to be accessed, the greater the potential for a cumulative slowdown in the shop.
Typical external resources are:
- Share buttons
- Social media posts
- Comment sections
While prefetching resources usually won’t make your online store noticeably faster, PageSpeed Insights and Lighthouse will likely increase your score.
How do you connect resources in advance?
There are many different ways to pre-allocate resources on your website. Either via a plugin or via adjustments in the code of your website or online shop.
Use next generation image formats
WebP is a modern image format that provides superior lossless and lossy compression for images on the web. With WebP, webmasters and web developers can create smaller images that make the web faster.
WebP lossless images are 26% smaller compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images of similar quality.