More often than not, web pages load in stages. Therefore, it is most likely that the largest element on the page may vary. So, to manage this probable change in web page loading and the time of reporting, the Largest contentful paint is really important.
Firstly, the web browser sends off a ‘Performance Entry’ of the ‘Largest-Contentful-Paint’ type. This entry identifies the largest contentful element once the browser paints the initial frame. However, as the next frames are successively rendered, another ‘Performance Entry’ is dispatched as soon as there is a change in the largest contentful element.
The vital point to note is that only when an element is rendered and is completely visible to the user, only then can it be considered as the largest contentful element. Content, images or text, that are not yet loaded will not be taken as rendered. When this happens, a smaller element may get reported as the largest contentful element. But once the larger element is rendered, it will be reported as the LCP through another ‘Performance Entry.’
Moreover, when any new content becomes available, a web page may add more elements to the Document Object Model. In case of any of these new elements being larger than the last reported LCP, then a new ‘Performance Entry’ will be reported. However, if an existing LCP gets removed from the user’s viewport, it will keep being the largest contentful element until a larger element is loaded.
The new entries will keep on occurring until the user makes any interaction with the page. As soon as the user executes any action on the page, the content visible on the page usually gets altered. So, the browser stops dispatching any new reports after an interaction. Therefore, when you are analyzing a web page, you should only consider the latest ‘Performance Entry’ dispatched.
Browse to the Advanced tab & choose the time from the start. Check all the boxes, especially the cache and cookies options.
Finally, click the Clear button to get the job done.
Now, you’ve cleared the device’s history and cache. Check by loading a page on the internet, and your issue is resolved. Enjoy browsing the internet.
1 Platform to manage everything WordPress so you can focus on what matters.
Launch your first site for free
What Web Page Elements are Considered in Largest Contentful Paint?
There are various content elements that are taken into account when measuring the Largest Contentful Paint of a web page. All the types of elements that are considered for LCP are currently mentioned in the Largest Contentful Paint API. The elements considered are as follows:
- <image> elements inside an <svg>element
- <img> elements
- <video> elements where the poster image is being used
- Any block-level elements such as heading blocks, table blocks, paragraph blocks, etc.
- An element with a background image that is loaded through the URL function instead of a CSS function.
These are the elements that are being considered at present. However, more elements may be added in the future once more research and studies are carried out.
Load time vs. render time
The amount of time taken by a web page to get downloaded on the user’s end is referred to as the load time. On the other hand, the amount of time taken by a page to be ready for the user to interact with is referred to as render time.
The render time of an image is not made visible because of security reasons. Rather, only the load time can be seen, as it is already exposed through several other web APIs.
How to measure LCP?
The Largest Contentful Paint can be measured using two different types of scoring tools, including in the lab or the field. If you still are getting the same error, switch to the next solution.
Field Tools
You can measure the Largest Contentful Paint (LCP) directly on the site by utilizing these field scoring tools:
- Chrome User Experience Report
- Search Console
- Google PageSpeed Insights
- JavaScript Library
Lab Tools
You can measure the Largest Contentful Paint (LCP) by carrying out different performance simulations by algorithms. In this case, the LCP can be measured using the following lab scoring tools:
- Lighthouse
- Chrome DevTools
- WebPage Test
How is an element's size determined?
The size of the element that is reported for the Largest Contentful Paint is usually the element’s size as seen within the user’s viewport. In case the element is extended outside of the viewport, or if any part of the element is not visible, then those areas do not get counted in the size of the element.
For those image elements whose size have been changed from their intrinsic size, the reported size is the smaller one – either the intrinsic size or the visible size. For example, for images that are resized to a bigger scale, they will only report their intrinsic size. On the other hand, for images that are resized to a smaller scale, they will only report the visible size.
In the case of text elements, the element’s size is determined by the size of their text nodes.
What causes poor LCP?
The most common reasons that result in poor LCP are as follows:
- Slow Server Response Times
A slow server response time is the top factor that causes a poor Larger Contentful Paint. Even if all your other factors and resources are optimized, a slow server will make it all worthless. The more time it takes for a browser to obtain content from the server, the more time it will take for any content to be rendered on the user’s screen. Thus, a slow server will adversely impact every speed metric of your website.
- Slow Resource Load Times
Any images, text-block, or video elements that render above-the-fold will directly impact the LCP. Big or heavy elements, like a banner or embedded videos, will directly reduce the load time of your web page.
- Render-Blocking JavaScript and CSS
Choosing a heavy theme for your website or constantly adding new plugins can negatively impact your Larger Contentful Paint. Adding CSS and JavaScript, particularly above the fold of your web page, can slow down the loading time of your web pages. For a browser to render any content, it needs to analyze and convert the HTML markup into a DOM. In case any external stylesheets or synchronous JavaScript tags are encountered by the HTML parser, it will come to a halt.
The most common reasons that result in poor LCP are as follows:
- Slow Server Response Times
A slow server response time is the top factor that causes a poor Larger Contentful Paint. Even if all your other factors and resources are optimized, a slow server will make it all worthless. The more time it takes for a browser to obtain content from the server, the more time it will take for any content to be rendered on the user’s screen. Thus, a slow server will adversely impact every speed metric of your website.
- Slow Resource Load Times
Any images, text-block, or video elements that render above-the-fold will directly impact the LCP. Big or heavy elements, like a banner or embedded videos, will directly reduce the load time of your web page.
- Render-Blocking JavaScript and CSS
Choosing a heavy theme for your website or constantly adding new plugins can negatively impact your Larger Contentful Paint. Adding CSS and JavaScript, particularly above the fold of your web page, can slow down the loading time of your web pages. For a browser to render any content, it needs to analyze and convert the HTML markup into a DOM. In case any external stylesheets or synchronous JavaScript tags are encountered by the HTML parser, it will come to a halt.
- Client-side Rendering
There are many websites that make use of client-side JavaScript to render pages in the browser directly. However, Client-side JavaScript logic rendering can greatly affect the Largest Contentful Paint measure of your website. This is because the browser would first have to load up all the critical JavaScript before complete rendering of the content.
- Client-side Rendering
There are many websites that make use of client-side JavaScript to render pages in the browser directly. However, Client-side JavaScript logic rendering can greatly affect the Largest Contentful Paint measure of your website. This is because the browser would first have to load up all the critical JavaScript before complete rendering of the content.
1 Platform to manage everything WordPress so you can focus on what matters.
Launch your first site for free
How to improve LCP?
Luckily for you, there are many best practices that can help you improve your Largest Contentful Paint (LCP) to a much better level. Some of the most effective and beneficial ways of improving your LCP are as follows:
- Improve your Server
When you want to optimize your server performance, the first thing to take into account is your web hosting service provider. Make sure that you opt for a good and reliable hosting service that provides you with a fast and dependable server or hosting platform.
A good web hosting provider, like BionicWP, will provide you with a dedicated server, which will have a favorable impact on your LCP as you will not have to share the resources with another website. In addition to that, BionicWP makes sure to provide you with active and reliable customer support in case you come across any problems with the server.
Another way through which you can improve the performance of your server is by caching and using a Content Delivery Network (CDN). At BionicWP, our Nitropack CDN minimizes the time your browser takes for loading the content of a web page and provide your visitors with an ideal user experience.
- Optimize the Images
One of the top reasons for poor LCP is unoptimized images on the web pages. In particular, all the images that are present above the fold must be optimized in order to have a good LCP score. There are many different tools available that can be used to compress and optimize the images before uploading them on the website. You can also use modern image formats or plugins to make sure that the images on your website are optimized. You can also scale down or reduce the size of your images. One other straightforward method to better your LCP score is just to remove the images. If all this does not help you optimize the images, you can use an image CDN for more optimized images on your website.
- Minify CSS and Reduce Critical JavaScript
Minify is the process of removing any unnecessary and unrequired characters and lines from the CSS and JavaScript logic. The more lines, the more time it takes for the browser to convert those on to the user’s viewpoint. Therefore, make sure to check and remove any unnecessary characters and lines from your scripts and stylesheets.
- Delay Non-Critical JavaScript and CSS
The objective of optimizing a web page for Largest Contentful Paint (LCP) is to display the above-the-fold section of your website as quickly and as much as possible to the user. Your above-the-fold content is the initial thing a user will see on your website when it loads. The best method of solving this problem is to defer the loading of JavaScript by not placing them in your above-the-fold content. This way, the browser will be able to load the main content of your web page a lot more quickly.
- Opt for a good Hosting Service
The hosting service that you opt for for your website also holds a great role in the loading time of your web page. Therefore, make sure to find a reliable and well-reputed web hosting service provider.
BionicWP can help you improve the LCP of your website by having a perfectly optimized website. It is guaranteed to provide you with an adequate and customized infrastructure and hosting plan according to the size and traffic of your website. Moreover, the dedicated server provided by BionicWP will bring about a guaranteed improvement in the Largest Contentful Paint of your website.
What is a Good Largest Contentful Paint (LCP) Timing?
So, now we know what the Largest Contentful Paint (LCP) is, what are the factors that play a role in it, and how can you make it better. But what is a good Largest Contentful Paint (LCP) score as considered by Google?
In order to provide your visitors with a good user experience, your website must have LCP take place in the initial 2.5 seconds of the web page loading. In order to make sure that you are achieving this LCP target for the majority of your users, you can measure the 75th percentile of your page loads. This measurement should be collected from mobile as well as desktop devices.
Conclusion
To have a successful website and to pull more traffic, providing a good user experience is of the essence. Largest Contentful Paint (LCP) is regarded as one of the most critical factors among the Google Core Web Vitals. Therefore, in order to provide your website users with a remarkable user experience, make sure to monitor the LCP of your website. Moreover, make sure to choose the best optimization practices and opt for a good hosting provider, like BionicWP, to have the best results.
Let us manage your WordPress Website and attain true peace of mind.
Scale your business today.
Sign up
