We're going to talk about what exactly LCP is and why it matters. Moreover, we'll delve into the details of its score criteria, tools for gaining more insight about it, most common causes for poor performance and ultimately, how to improve it.
What is LCP and why does it matter?
LCP is one of the three Core Web Vitals, along with First Input Delay (FID) and Cumulative Layout Shift (CLS). Furthermore, the LCP accounts for 25% of the overall performance score, and its purpose is to measure how long it takes to display the largest element that you’ll see on screen when you open the web page.
Moreover, what determines the LCP score is how fast the browser receives and renders the requested content. It helps you understand how quickly your site loads visual elements, which are usually big images or hero sections. They could also be videos or animations, which can impact LCP scores even more since they usually take up more resources than a single image.
What are the LCP score criteria?
It goes without saying that you should strive to make your website as fast as possible. However, according to Google, there are certain thresholds you should take into consideration, whenever you’re not entirely sure if your website’s performance is optimal enough or not.
Your website should score 2.5 seconds or less on LCP, to be considered good, and be given a green score, which we could interpret that it’s optimal enough. Furthermore, if your website scores between 2.5 and 4 seconds on LCP, it still needs improvement. Last but not least, if it scores above 4 seconds, its performance will be considered poor and there is some work to be done about it.
You also need to consider that your website’s performance will be different based on from which device your visitors open it. Therefore, the metrics will differ whether the site is tested on mobile or desktop devices.
Tools for gaining insight into website performance
There are many tools which we can get performance insight from, some of which base their results on simulated lab data and some on real-world field data if it’s available that is.
One of the most popular among these tools is PageSpeed Insights from Google, which will generate reports for mobile and desktop devices separately. Even more, it will output both lab and field data along with suggestions on how to improve each metric score separately.
Google also provides API access to it, so you can create your tools that leverage its auditing capabilities. For WordPress websites in particular, you can find such implementations in plugins like Site Kit, which will display Core Web Vitals within the dashboard.
In case you’re a Chrome browser user, you can also use its DevTools, accessing it by pressing F12 shortcut key or a combination of CTRL + SHIFT + I keys. Here you’ll find a bunch of different options, and among these are also Lighthouse, Performance insights tabs, and Waterfall chart under Network tab.
Using these tools, you can get detailed information about what assets are being loaded, the time they take to load, and metric scores, LCP included.
You can also use tools that will output performance insight of your website based on real-world user data. However, you can only use them if your website has sufficient usage history. PageSpeed Insights will display field data if the website you’re auditing is included in the Chrome User Experience, or CrUX for short, dataset.
Furthermore, you can also use another tool that’s based on this dataset, which is called CrUX Dashboard, where you can gain detailed insights and visualizations of your website’s performance.
Another tool you can use is KeyCDN Performance Test to test the performance of Time To First Byte metric, which measures the performance of the hosting server where your website lives, and accounts for 40% of the LCP score.
What causes LCP score to decline and how to improve it?
There are a few different reasons that might affect your LCP score negatively.
Slow server response time
There is little you can do to improve the performance of the server your website lives on. However, you can help it by using a Content Delivery Network (CDN), which will cache your website data and serve it from the closest data cache warehouse to the visitor.
Render-blocking JavaScript and CSS files
Some JavaScript and CSS files can prevent other assets from rendering until they’re done loading.
To explain, the browser must first parse the HTML of the page to create a HTML structure, also known as the Document Object Model (DOM) tree. After it’s done with that, it can start rendering the content of the page. However, some JavaScript and CSS files can block this HTML parsing and as a consequence delay the whole loading process of the page.
One thing you can do to solve this issue is to defer these files or even remove unused ones altogether. Furthermore, deferring them will cause them to load in the background while visual elements load immediately.
If you use PageSpeed Insights, it will include information about render-blocking files and point them out in the report.
Slow resource load times
LCP is related to the elements that get loaded at the top of the page, or in other words, above the fold. Therefore, unoptimized images can have a noticeable impact on the score along with if your website isn’t leveraging browser caching, making them load every time a visitor loads a page.
In order to improve this, you can use images with a modern format like webp and run them through a compression algorithm. And to optimize their performance even further, they should have a srcset attribute so the browser loads specific sizes of that image, tailored to the device it’s been loaded on.
You can also minify and compress CSS and JavaScript files and preload critical assets, to further optimize the performance of your website.
As for the browser caching with Wordpress websites, you can use plugins like Perfmatters and WP Rocket to take care of that, which also prove lazy loading options to even further finetune the website’s performance.
Conclusion
To conclude, we explained what Largest Contentful Paint is, why it’s important, the main causes that affect it negatively, and how to improve upon them to raise its score to optimal levels.
