Как исправить такое смещение макета по CLS?

Question

[Евгений Мокрышев]

Здравствуйте, проверяю во всех сторонних сервисах всегда в зелёной зоне, проверяю в
PageSpeed Insights, через 3-4 проверки на пятую выдаёт, такую вот ошибку (прикреплю скриншот). При глобальной проверки из красной зоны не выходит. Что делать не понимаю ? Помогите, спасибо).

Comments

[DIVSIDE]

Забить большой и жирный болт на PageSpeed Insights, т.к даже сам гугл (чей это сервис) показывал свой сайт не в лучшем свете. Этот сервис не объективен

Answer 1

[Сергей Арсентьев]

я бы сделал так:
1) проверил чтобы все картинки имели размер - например логотип без явного размера в html
2) убрал бы с миниатюры первого поста lazyloading

если ничего не поможет - попробуйте напихать несколько абзацев текста перед постами и смещения быть не должно.

Comments

[Евгений Мокрышев]

Ну на сколько я понимаю логотип даёт 0,002 смещения, ни о чём. У меня вопрос, что за первое такое смещение ? Я сколько пытаюсь понять не могу и никто ответить не может(((.

[Сергей Арсентьев]

Евгений Мокрышев,
первое смещение - это как я написал:

2) убрал бы с миниатюры первого поста lazyloading
если ничего не поможет - попробуйте напихать несколько абзацев текста перед постами и смещения быть не должно.

там смысл в том, что у вас грузится сайт, но картинка в отложке, поэтому сначала google показывает текст, а потом когда загружается фотка, то этот текст смещается вверх.

скрин - https://icecream.me/uploads/6a6d3ae52833c5ffdc2240...
скрин - https://icecream.me/uploads/25184811aff4b38a1a9597...
проверка - https://pagespeed.web.dev/analysis/https-giffs-ru/...

проверить так это или нет проще всего добавив статического текста перед постами.
закидываете 1000 символов для теста и перезапускаете page speed - если проблема ушла, то значит в этом и дело, если нет - то копайте дальше.

Ну на сколько я понимаю логотип даёт 0,002 смещения, ни о чём.

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

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

P.S. Ну и если вам просто нужно больше попугаев в google, то порой удивительные результаты именно для PageSpeed дает плагин WP Rocket, если ничего не поможет, попробуйте его.

[Евгений Мокрышев]

WP Rocket стоит, для lazyload плагин smush pro, я не понимаю как в нём убрать с миниатюры первого поста lazyloading. Может подсказать ?

[Сергей Арсентьев]

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

[Евгений Мокрышев]

Сергей Арсентьев, Я вот сейчас в нём отключил lazyload для front page (первой страницы) посмотрите пожалуйста стало лучше ?

[Сергей Арсентьев]

Евгений Мокрышев, ну у меня сейчас смещение = 0
https://icecream.me/uploads/c7ab8848f845128a2e2635...

ссылка на проверку https://pagespeed.web.dev/analysis/https-giffs-ru/...
и скорость увеличилсь до 71 балла - то есть на 10 попугаев.

и нету lazy в картинках - место под них сразу забронировано при формировании html
icecream.me/2688c6f155c27d52561faf034d8b0d19

Answer 2

[leeroyjenkins176]

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

Comments

[Евгений Мокрышев]

Отключил, дело не в них теперь вот так...



Это может быть связано с мобильным кэшированием, у меня WP Rocket ?

[leeroyjenkins176]

Сейчас cls 0 для пк и мобильных. Вы главную проверяете?

[Евгений Мокрышев]

leeroyjenkins176, Нет, любые страницы.... Для главной я lazyload отключил, в этом может дело ?

[leeroyjenkins176]

Евгений Мокрышев, ну если у вас сейчас тоже показывает cls 0, то вероятно проблема в плагине. Если есть возможность, используйте нативный атрибут loading="lazy"

[Евгений Мокрышев]

leeroyjenkins176, у меня ещё одна мысль появилась, в этой теме есть фиксация шапки, может это в мобильном выдавать вот такую строчку ? про Fixed content