1

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?

Improve this question
Related questions
131
Cannot display HTML string
0
Preload Key Request - Improving css calls
0
How to Fix H1 tag Largest Contentful Paint (LCP) Issue in Angular App as Reported by Lighthouse?
Load 5 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.