PageSpeed ​​Insights LCP с тегом изображения

LCP означает, что когда нарисован самый большой элемент на странице, это не имеет ничего общего с размером этого элемента в килобайтах (кроме того, что меньший элемент будет загружаться быстрее).

Вы хотите, чтобы содержимое верхней части страницы (содержимое, видимое без прокрутки) было полностью закрашено менее чем за 2,5 секунды, в идеале за 1,5 секунды.

Для этого вам нужно убедиться, что весь ваш CSS, расположенный выше сгиба, встроен в ваш HTML. (известный как встраивание критического CSS).

Это также исправит Устранение ресурсов блокировки рендеринга, поскольку все необходимое для рендеринга страницы будет загружено с первым запросом. Наконец, это также поможет с кумулятивным сдвигом макета, поскольку при загрузке стилей CSS вещи не будут подпрыгивать по странице.

Для изображений над сгибом вы не хотите, чтобы они загружались лениво, вместо этого вы хотите, чтобы они загружались нормально, так как они должны отображаться как можно быстрее. Вы также можете убедиться, что фоновое изображение, которое вы используете для логотипа, имеет соответствующий встроенный CSS, а в противном случае он загрузится позже. (еще лучше преобразовать логотип во встроенный SVG, чтобы сохранить ненужный запрос и вес страницы).

Наконец, я заметил, что вы используете видео-фон, маловероятно, что вы получите наивысшие оценки, поскольку для этого используется большая пропускная способность. Я бы предложил заменить фоновое видео статическим изображением на мобильном телефоне, чтобы сэкономить огромные накладные расходы, связанные с фоновым видео.

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

Разрешение пользователю решать, воспроизводить ли видео, помогает как людям, у которых мало данных, так и людям с СДВГ, аутизмом и т. Д., Которым движущееся изображение может отвлекать.

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

Вы можете найти эту статью, объясняющую LCP, полезной, а также эту статья о том, как оптимизировать LCP, чтобы понять, на что вам нужно обратить внимание.