Я хочу улучшить показатели Web Vitals для моего сайта, в частности LCP. У меня возникли проблемы: время составляет ~2,7 с (должно быть менее 2,5 с). Согласно https://web.dev/optimize-lcp:
В частности, LCP измеряет время от момента, когда пользователь инициирует загрузку страницы, до момента рендеринга самого большого изображения или текстового блока в области просмотра.
Я изолировал проблему в компоненте темы баннера, который написал. Изображение баннера, которое я монтирую как виджет «above-main-container», является самым большим объектом, отображаемым на экране практически на каждой странице.
Код
<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", как показано в коде. Но, думаю, это не решает проблему с таймингом в корне.
Есть ли предложения, как приоритизировать рендеринг этого конкретного компонента темы? Было бы лучше конвертировать его в плагин? Есть ли другой способ внедрить баннер как можно раньше? Спасибо!
hahaha