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:

Diagnostics

LCP snapshot

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?

Back to Top