Search code examples
twitter-bootstrappagespeedweb-performancecore-web-vitalswebpagetest

How to debug and fix Largest Contentful Paint LCP probem due to div with text loaded in initial HTML document?

The Largest Contentful Paint (LCP) score varies around 2.5s to 2.7s for below web page, as per both Lighthouse report from Chrome Incognito as well as WebPageTest.org.

Web Page with this LCP problem = http://www.showmyhall.com/c/India/Karnataka/Bangalore/halls/marriage-halls

WebPageTest Result page = https://webpagetest.org/result/211226_AiDcFQ_7d18f1f7dc7bcdcf6fd75be523a5fc4b/?view=webvitals

Filmstrip showing LCP problem is shown below. Filmstrip showing LCP problem

I have removed extra font but I am not able to figure out why is the big paragraph (div) highlighted below as the cause of LCP probem.

This concerned text in this div comes along with the document from the server side and is neither loaded via ajax or any kind of "if" or "for" condition/loop.

I tried looking for answers in StackOverflow and Google but in vain. I have go through https://web.dev/lcp/

Could someone please enlighten me how to debug this further or what is the problem with the text in that div which is causing the high LCP problem ?

Solution

  • There is no problem with this paragraph. It is highlighted because it IS the "largest content" above the fold. Your LCP metric refers to when this paragraph appears.

    As the paragraph appears at the same time as the rest of your page, you need to wonder why your entire first paint is slow.

    (From your WPT waterfall, it looks like your server is slow to answer the HTML. It also looks like too many CSS and JS files are loaded synchronously in the head, from 3rd party domains. Try to load them asynchronously or from your main domain.)