# Компоненты темы и Largest Contentful Paint (LCP)

**URL:** <https://meta.discourse.org/t/theme-components-and-largest-contentful-paint-lcp/258680>\
**Category:** Development\
**Created:** [19.Март.2023 23:13:26 UTC](https://meta.discourse.org/t/theme-components-and-largest-contentful-paint-lcp/258680 "2023-03-19T23:13:26Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![piffy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/piffy/32/254198_2.png) [@piffy](https://meta.discourse.org/u/piffy)\
**Post date:** [19.Март.2023 23:13:26 UTC](https://meta.discourse.org/t/theme-components-and-largest-contentful-paint-lcp/258680/1 "2023-03-19T23:13:26Z")

</div>

Я хочу улучшить показатели Web Vitals для моего сайта, в частности LCP. У меня возникли проблемы: время составляет ~2,7 с (должно быть менее 2,5 с). Согласно [https://web.dev/optimize-lcp:](https://web.dev/optimize-lcp:)

> В частности, LCP измеряет время от момента, когда пользователь инициирует загрузку страницы, до момента рендеринга самого большого изображения или текстового блока в области просмотра.

Я изолировал проблему в компоненте темы баннера, который написал. Изображение баннера, которое я монтирую как виджет «above-main-container», является самым большим объектом, отображаемым на экране практически на каждой странице.

> **Код**
>
> ```plaintext
> <script type="text/discourse-plugin" version="0.8">
> const h = require("virtual-dom").h; 
> 
> api.createWidget("my-banner", {
> tagName: "div",
> 
> html() {
> return h("img.banner-center", {src: settings.banner_image, fetchpriority: "high", style: "aspect-ratio: 925 / 359 ; width: 100%"})
> }
> });
> </script>
> 
> <script type="text/x-handlebars" data-template-name="/connectors/above-main-container/banner">
> {{mount-widget widget="my-banner"}}
> </script>
> 
> ```

Вот что, по моему мнению, происходит. div, содержащий изображение, монтируется с помощью JS, поэтому при обновлении страницы Discourse должен произойти ряд предварительных действий, прежде чем этот код JS выполнится. Из-за этого баннер загружается после 2,5 с, что негативно сказывается на метрике LCP.

Я пытался приоритизировать загрузку изображения баннера с помощью `fetchpriority="high"`, как показано в коде. Но, думаю, это не решает проблему с таймингом в корне.

Есть ли предложения, как приоритизировать рендеринг этого конкретного компонента темы? Было бы лучше конвертировать его в плагин? Есть ли другой способ внедрить баннер как можно раньше? Спасибо!

---

_[View the full topic](https://meta.discourse.org/t/theme-components-and-largest-contentful-paint-lcp/258680)._