CLS - на что обращать а на что нет

Для мобилок задайте min-height на картинки на блоки на первом экране.

Для ПК так же можно посмотреть именно минимальное значение, чтобы макет не прыгал.

Да, это мне пришло сразу в голову. Но у меня 5000 товаров = порядка 6000 картинок и беда в том, что высота гуляет от 100 до 600 точек. Я попробовал сделать среднее что-то, 250. Ну да, синтетический КЛС сразу упал почти в ноль, но...

а) для карточек товара где картинка не более 300рх

б) на КТ где картинка менее 150рх появилась плохая пустота.

Да, во вьюпорте в случае б) все равно видно нижние элементы, но выглядит некрасиво.

Пытался в этом div сделать выравнивание картинке по центру, но блин ля этого приходится делать flex и это затрагивает хренову тучу карточек товара, я очкую что где-то поплывет...

В итоге я и пришел к вопросу, который задал - стоит ли заморачиваться, я краем уха слышал, что синтетические тесты не участвуют в ранжировании, а в реальных данных у меня феншуй. И потом - это очередной гугловский идиотизм. У меня сайт легкий и быстрый, даже на медленном интернете РЕАЛЬНО не мешает этот КЛС юзеру от слова "вообще". И даже выглядит нормально и логично - пока прогружается картинка виден текст, но это реально на супермедленном 2Ж.

Там все зашибца, 99-100%. Ибо див с картинкой висит слева от всех (кроме одного) активных элементов.

Сложно говорить не видя макет конечно, но речь у гугла всегда идёт именно про первый экран, дальше там уже не сильно важно. Но сейчас идёт мода на прописывания высоты и ширины реальных картинок, чтобы браузер уже сразу ДО их загрузки знал как надо её масштабировать. Поэтому если есть в движке такая возможность, то лучше вписать размеры картинки.

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

Соответственно ранее для картинок прописывались высоты, получались они из базы запросом. 

Сейчас в базе нет такой информации, а скриптом ее получать - это я думаю крайне затратная функция, и я получу вместо КЛС - космическое время загрузки страницы. 

Вопрос не в макете. 

Поэтому я и надеюсь, что мне не приснилось про синтетические результаты. 

не получите. Получаете скриптом ( на сервере ) , записываете в базу.  Далее по правилу -  Нет в базе размеров, получаем скриптом , записываем в базу и прописываем в width и height.  у меня гугл доволен остался. да и  отрисовка приятнее стала. 

Ну хорошо, хорошо. Я - тупой. Но я никогда того и не скрывал. Что сделал:

1. Для всех статических элементов макета (кнопки, лого) установил в явном виде ШхВ.

2. Для картинок взял из базы старые значения ШхВ (совпадают с новыми на 80%) и установил min-height на div с ними.

3. Даже подобрал websafe шрифты максимально ближе к используемым.

4. В реальных данных все отлично, КЛС 0 и прочее - зелень.

5. Проверяю инспектором с установкой медленной сети - ну не едет ничего визуально.

Однако вот получаю странную картину:

ТЫЦ

Блок colls_mail дает ахрененный ЦЛС! И все бы ничего, но на этом движке у меня 6 сайтов с одинаковым контентом (языки разные). И 5 сайтов на той же странице кажут феншуй в 0.013, например:

ТЫЦ2

Отличия макета только в телефонах в шапке. Расчетная высота по инспектору 21.8 задал диву этому мин-хейт 22, не помогает.

Объясните тупому что показывает эта рамка? Я так понял что весь этот блок смещается из-за чего-то выше его по мнению тупогугла?

ПРАВКА: настоящие ссылки в пейджспиде (амперсанды не прут)

ССЫЛЬ1

ССЫЛЬ2

Вам же скрины показывают, что смещается.

Да, там мелко, но суть, что видит гугл понятна. Размер шрифта сильно разница до и после. 

НО, я лично не могу такое повторить у себя в браузере с теми же размерами и со Slow 3G

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

Ссыли не те, я там в сообщении верные дописал что должны быть в самом пейджспиже...

Но ступеньку увидел, да, отличие еще и в количестве "закладок".

Да, точно, собака, на верной странице та же беда. Хотя прописаны же websafe и я выбирал из максимально распространенных по ОС...

PS: фигня какая-то, забиваю. Ибо с учетом 

font-family: Arsenal-R, "Arial Narrow", sans-serif;

1. Ариал этот присутствует на всех ос (???)

2. Он явно уже Арсенала, то есть ступеньки ну никак не должно быть...