Largest Contentful Paint (LCP)

[AlexMax13]

Гугл ругается на то, что картинка на первом экране загружается не самой первой. Т.е. нужно сделать чтобы она загружалась быстрее всего.

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

 

Пробовал с прелоад и куда я его только не вставлял)) 

 

и так:

<link rel="preload" as="image" href="{{ thumb }}" type="image/webp">
<img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" />

 

и просто в шапку со ссылкой на изображение чисто для одной страницы чтобы посмотреть:

<link rel="preload" as="image" href="{{ thumb }}" type="image/webp">

 

гуглу фиолетово. Он как тормоз жалуется на картинку которую я его заставляю загружать первой.

 

Ненавижу уже этот гугл. Кто как решает эту проблему?

 

[markimax]

Там багато нюансів які впливають, є такі що  ви навіть не здогадуєтесь, як вони можуть вплинути

[buslikdrev]

C чего вы взяли, что это спасёт от высокого LCP?

Тут нужен свой сервер и уметь его настраивать.

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

https://web.dev/articles/lcp?hl=ru#what_is_lcp

 

Возможно HTTP/2 решит ваш вопрос.

[AlexMax13]

В 17.01.2024 в 23:03, buslikdrev сказав:

C чего вы взяли, что это спасёт от высокого LCP?

Тут нужен свой сервер и уметь его настраивать.

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

https://web.dev/articles/lcp?hl=ru#what_is_lcp

 

Возможно HTTP/2 решит ваш вопрос.

 

к сожалению вы также ссылаетесь на ту же бесполезную информацию. Я и так знаю тайминги и прочее. вопрос - как заставить гугл грузить эту картинку самой первой так как он и желает?

[AlexMax13]

т.е. вот он жалуется на картинку https://prnt.sc/rFlB0iBZ9LEK я ее добавляю в прелоад - он и дальше на нее жалуется.

[buslikdrev]

18.01.2024 в 00:14, AlexMax13 сказал:

т.е. вот он жалуется на картинку https://prnt.sc/rFlB0iBZ9LEK я ее добавляю в прелоад - он и дальше на нее жалуется.

Пробовали без type="image/webp"?

[AlexMax13]

В 17.01.2024 в 23:22, buslikdrev сказав:

Пробовали без type="image/webp"?

 

попробую. но на сайте webp. И как задать прелоад прямо в шапке, ведь фото генерируется на странице товара. или он может работать в шаблоне product.twig?

[niger]

17.01.2024 в 23:34, AlexMax13 сказал:

 

попробую. но на сайте webp. И как задать прелоад прямо в шапке, ведь фото генерируется на странице товара. или он может работать в шаблоне product.twig?

В system document додати якийсь private preload_image, додати для нього гетер та сетер.

 

в контролері товара додаємо в документ зображення. $this->document->setImagePreload($product_info['image']);

 

в контролері який керує хеадером достаємо його з документа та додаємо його в хеадер

$data['preload_image'] = $this->document->getImagePreload();

 

ну і в header закинути {% if preload_image %} <link rel="preload" href="{{ preload_image }}" as="image"> {% endif %} щоб вивести

 

Скоріш за все це не прибере LCP, але я відповів як зробити прелоад в шапці

Змінено 17 січня користувачем niger

[AlexMax13]

@niger спасибо, буду пробовать.

Тем временем есть сдвиг. Помогает уменьшение разрешения для мобильного. Тогда этот параметр постепенно уменьшает задаржку https://prnt.sc/RSGrd4jcHuuL

Но блин, пикселить картинку тоже не хочется((

Змінено 17 січня користувачем AlexMax13

[AlexMax13]

По итгогу на данный момент можно утверждать:
1. Вес картинки/разрешение имеют влияние на показатель отрисовки (LCP). Чем картинка хуже по качеству, тем лучше этот показатель. Логично, требуется меньше времени на рендеринг фотки.

2. В тоже время влияет размер самого изображения. Если растянуть пиксельное фото на весь экран, тогда показатели будут хуже чем фото в большем разрешении но которое занимает 1/4 на экране. Т.е. ужатое при помощи параметров width & height

 

Теперь нужно заставить гугл грузить это фото в первую очередь. Попробую совет выше

Змінено 17 січня користувачем AlexMax13

[AlexMax13]

Ну и если на первом экране не будет большой фотки, тогда LCP взлетает до небес)))

Змінено 17 січня користувачем AlexMax13

[AlexMax13]

В 17.01.2024 в 23:57, niger сказав:

В system document додати якийсь private preload_image, додати для нього гетер та сетер.

 

а подскажите в каком это файле?

[AlexMax13]

по идее сюда https://prnt.sc/4Yq-akILD5DI

можете помочь с этим пунктом? А то знаний не хватает. 

Змінено 17 січня користувачем AlexMax13

[AlexMax13]

И еще есть идея сначала прогружать мыльное фото, как прелоад, а после сразу на его место уже фотку побольше. что то по типу data-src

[markimax]

В 18.01.2024 в 00:56, AlexMax13 сказав:

И еще есть идея сначала прогружать мыльное фото, как прелоад, а после сразу на его место уже фотку побольше. что то по типу data-src

Маячня. Подвійний перерендерінг блока

[AlexMax13]

В 18.01.2024 в 00:58, markimax сказав:

Маячня. Подвійний перерендерінг блока

 

тогда отпадает... как и в шапке

<link rel="preload" as="image" href="{{ thumb }}">

 

тогда только мыло(( единственное что хотябы как то работает

[AlexMax13]

под мылом имею ввиду мелкое разрешение фото

[ruslanstroj]

вам поможет

https://apoorv.pro/lozad.js/

[buslikdrev]

18.01.2024 в 10:35, ruslanstroj сказал:

вам поможет

https://apoorv.pro/lozad.js/

Нет.

[chukcha]

18.01.2024 в 10:39, buslikdrev сказал:

Нет.

какие ваши доказательства? (с)

 

можно картинке указать атрибут

loading="lazy"

[Eldaeron]

В 17.01.2024 в 23:14, AlexMax13 сказав:

т.е. вот он жалуется на картинку https://prnt.sc/rFlB0iBZ9LEK я ее добавляю в прелоад - он и дальше на нее жалуется.

треба дивитись де картинка на сайті розміщується, задати фактичні розміри, це дуже може вплинути на її LCP, бо ви вказали width=100%, height=100%, в кеш завантажується 600х600. Вам точно 600х600 там треба?

[AlexMax13]

В 18.01.2024 в 11:24, chukcha сказав:

какие ваши доказательства? (с)

 

можно картинке указать атрибут

loading="lazy"

 

там же по идее на первый экран наоборот нужно ставить чтобы картинка грузилась как можно быстрее. а это ленивая загрузка? ее ставлю на все другие фото кроме главного.

[AlexMax13]

В 18.01.2024 в 13:58, Eldaeron сказав:

треба дивитись де картинка на сайті розміщується, задати фактичні розміри, це дуже може вплинути на її LCP, бо ви вказали width=100%, height=100%, в кеш завантажується 600х600. Вам точно 600х600 там треба?

 

так і зробив. 300х300 дало приросту в ~1 секунду. показники підняло. в зелену на пк іноді залітаю, на моб у жовтій. хватає.

Але тему можете розвивати і доповнювати, щоб іншим було легче.

[chukcha]

методи lazy load бувають різні
можна спочатку показувати placeholder

 

[markimax]

В 18.01.2024 в 15:08, chukcha сказав:

методи lazy load бувають різні
можна спочатку показувати placeholder

 

Вже вище є відповіть, що усі кастомні Lazy негативно впливають на LCP блоку (не плутати з зображенням), тому що йде подвійних пере-рендерінг блоку браузером (подивіться по timeline завантаження).  loading="lazy" теж впливає негативно але не так сильно (пару балів з'їдає), бо це нативний браузерний.
Зображенню в LCP блоці не можна давати loading="lazy", бо на рендерінг блоку буде витрачатися більше часу.