Проблема LCP в проекте Django - задержка рендеринга, вызванная генерируемым бэкендом текстовым элементом

В настоящее время я работаю над сайтом, построенным на Django, и у меня возникли проблемы с Largest Contentful Paint (LCP). Согласно Google PageSpeed Insights, время LCP составляет 5 070 мс со значительной 88-процентной задержкой рендеринга (4 470 мс), и он идентифицирует элемент <p> как элемент LCP.

Похоже, что проблема вызвана динамически генерируемым текстом из бэкенда. Элемент LCP задерживается, скорее всего, из-за блокировки ресурсов рендеринга или неэффективной обработки HTML над сгибом.

Вот снимок от PageSpeed Insights:

Diagnostics

LCP snapshot

Я пробовал:

  • Уменьшение и откладывание некритичных JS.

  • Удаление ненужных JS и CSS.

  • Использование font-display: swap;

  • Обеспечение оптимизации изображений (хотя элемент LCP не является изображением).

  • Также я попытался отложить некритичный css (даже если это критический и единственный используемый css-файл), применив следующий шаблон из этой статьи:

<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>

Есть методы или идеи, как это исправить?

Вернуться на верх