“Software is never completed, it is just abandoned“- is a very popular saying in the tech Ecosystem. What does this mean, no matter how much you try to adapt and optimize it, there will always be something to optimize — Make it faster, smoother, etc. In the Quest for perfection, there are certain metrics that are used to measure the performance of our web application. They are as follows
LARGE CONTENFUL PAINT
FIRST INPUT DELAY
CUMULATIVE LAYOUT SHIFT
These metrics are sometimes overlooked but are big determining factors in your business. Poor user experience due to poor performance on our software may deter users from coming back to use such software
In this blog post, we would be learning how to measure the LARGE CONTENTFUL PAINT, the tools used to measure this, and how we can optimize this, with a tutorial explaining how this can be done.
LARGE CONTENTFUL PAINT
Large contentful paint (LCP) measures the loading performance of a web page by identifying the time it takes for the largest content element in the viewport to become visible. This metric is measured before the user interacts with the webpage, such as by scrolling, clicking, and so on
In previous years engineers use an inbuilt function such as LOAD & DOMCONTENTLOADED to measure this metric
LOAD — This event is fired when all resources such as stylesheet, javascript scripts , dependency, and others have been loaded on a page
DOMCONTENTLOADED — This fires as soon as the dom has loaded, without waiting for the other resource to load
To put into perspective, Say a user sends a request to a server for a webpage. LCP report on the web page will indicate how long it took for the largest content on the page to load and be fully visible to the initial viewport of the user’s device before the user starts interacting with the page.
To provide the best user experience, business owners and web developers should be looking toward hitting 2.5 seconds or less.
What is considered to be large contentful paint are
Images
Texts bloc
in the CSS style sheet, elements with background image URL
elements containing text nodes or other inline-level text elements children.
However, images that occupy the whole of the initial viewport of the user’s device are not considered as Large contentful paint
Why so? if an image occupies the entire viewport, it may not be considered the largest content element because it does not have any other content competing for space. In this case, the browser may consider other elements such as text or videos as the largest content element below the initial viewport, and measure the loading performance based on their visibility.
It is important to note that even if an image occupies the entire viewport, it can still affect the loading performance of the page if it takes a long time to load. In such cases, the loading performance may be measured by other metrics such as the FIRST INPUT DELAY and CUMULATIVE LAYOUT SHIFT.
The word “Initial” has been emphasized in this article
It’s worth noting that the primary goal of the LCP metric is to measure the loading performance of the initial viewport, which is the portion of the page that is visible without scrolling. However, as the user scrolls and new content becomes visible, the browser may measure the loading performance of additional content elements that become visible in the viewport, using other metrics such as the FIRST INPUT DELAY and CUMULATIVE LAYOUT SHIFT.
HOW THEN IS THE LARGEST CONTENTFUL PAGE REPORTED?
When a user requests a web page from the server, the page is loaded in stages. The request might contain images that are asynchronously requested from another server and may not load immediately as another element would load on that page. Some data too also be outsourced from external API and may take longer to load, or a very large video that auto-plays on load might take longer to set up. How then can we measure which of these elements are the largest contentful paint?
Web browser dispatches PerformanceEntry of type largest-contentful-paint, identifying the largest contentful element as soon as the browser starts rendering content. As more and more contents keep loading, the PerformanceEntry of type largest-contentful-paint is dispatched again to record the Largest contentful — paint (the elements that took the longest to load ). This dispatch stops when all elements have been rendered and the last element that is rendered is then recorded as the largest contentful element
The letters A-E indicate the elements that load first when the user requests for CNN homepage. We can see that the Header loads first A, the Main text B , then the texts below at C, the image at D, and finally the hero image at E. For the user to request the CNN web page, it goes through different loading stages from 1–5. The Largest contentful paint recorded by the PerfomaceEntry keeps updating from A — E, E being the largest contentful paint record after the whole page has loaded.
SITAUTION WHEN USERS OPEN DIFFERENT TABS ON THEIR BROWSER HOW THEN CAN WE MEASURE THE LARGEST CONTENFUL ELEMENT?
Since users can open pages in a background tab, it’s possible that the largest contentful paint entries will not be dispatched until the user focuses the tab, which can be much later than when they first loaded it. Google tools that measure LCP do not report this metric if the page was loaded in the background, as it does not reflect the user-perceived load time.
TOOLS TO MEASURE LCP
There are different tools used to measure the LCP, based on two different conditions (Feild measurement and Lab measurement ).
Lab Testing
When developing features for software, it is not possible to gather information on how this feature will interact with real users. Tests are carried out in the lab, to find out how this tool will interact in the real world. The following tools can be used to carry out this test
Chrome Devtools
Lighthouse
PageSpeed insight
Webpageteest
Field Testing
On the other hand, while testing in the lab is a reasonable proxy for performance, it isn’t necessarily reflective of how all users experience your site in the wild. The performance of the website can vary drastically based on the user’s device and network. The following tools can be used to carry out this test
Chrome User experience report
Search Console (Core Web Vital report )
There is a public javascript that enables users, to measure LCP in their application. I wrote an article on “HOW TO USE LARGEST CONTENTFUL PAINT API IN YOUR SOFTWARE”.
My this article “HOW TO IMPROVE LCP” explains how to optimize performance for a better user experience
Other metrics in measuring performance Idiscussed in full detail just like this one you read in full detail. They are as follow, FIRST INPUT DELAY CUMULATIVE LAYOUT SHIFT
Top comments (0)