[Python] LCP Issue in Django Project - Render Delay Caused by Backend-Generated Text Element

I'm currently working on a website built with Django and I'm having trouble with the Largest Contentful Paint (LCP). According to Google PageSpeed Insights, the LCP time is 5,070ms with a significant 88% render delay (4,470ms), and it identifies a <p> element as the LCP element.

It seems that the issue is caused by dynamically generated text from the backend. The LCP element is being delayed, most likely due to render-blocking resources or inefficient processing of HTML above the fold.

Here’s the snapshot from PageSpeed Insights:





I’ve tried:

• 
  Minifying and deferring non-critical JS.
  
  
• 
  Removing unsued JS and CSS.
  
  
• 
  Using font-display: swap;
  
  
• 
  Ensuring images are optimized (though the LCP element is not an image).
  
  
• 
  Also I tried to defer non critical css (even though the it is a critical and only used css file) by applying the following pattern from this article:
  

<link rel="preload" href="{% static "css/city/city-critical.min.css" %}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="{% static "css/city/city-critical.min.css" %}"></noscript>


Any methods or ideas on how to fix it?

Continue reading...