Проблема с CLS

Closed
REHub - Price Comparison, Affiliate Marketing, Multi Vendor Store, Community Theme REHub - Price Comparison, Affiliate Marketing, Multi Vendor Store, Community Theme March 22, 2021
Login to reply
Pavel Karpenko
4 months ago

Решили сами

Pavel Karpenko
1 year ago

Как я уже писал ранее, проблему не возможно выявить с помощью синтетических
тестов, таких как google page speed

Проблема видна в google search console http://joxi.ru/Q2K7NKZsLPK3v2

ПС Вот здесь ребята подробно все рассказывают
https://www.youtube.com/watch?v=V-dJgppYyos

пн, 22 мар. 2021 г. в 12:56, Sizam Support Help Desk <
sizamtheme+3MmRP9ojmn1DwGvBZJ0z@mail.support-hub.io>:

Igor Sunz Support Agent
1 year ago

Мы проверим это. Учтите что проверять будет на Гугл тестах. Мы не будем
проверять на расширениях или плагинах от сторонних разработчиков

Пн, 22 марта 2021 г. в 11:10, Sizam Support Help Desk <
sizamtheme+3MmRP9ojmn1DwGvBZJ0z@mail.support-hub.io>:

Pavel Karpenko
1 year ago

В комментариях вы перестали мне отвечать

Дублирую нашу переписку, в конце финальный вопрос



Добрый день! Ускорили сайт, все отлично, практически 100 баллов, но никак не дождемся Core Web Vitals. Сайт ускорен более 45 дней назад.

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

Коротко: синтетика меряет в момент загрузки, webvitals за все время пока открыта страница у пользователя

И предложили посмотреть их эфир https://www.youtube.com/watch?v=V-dJgppYyos

Вот пример страницы https://geekhacker.ru/nayti-svoego-dvojnika-po-foto/

Для проверки используем расширение https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en

При прокрутке страницы проблема с прилипшим блоком

Такую же проблему заметили на страницах магазина, где так же используется stiky блок https://geekhacker.ru/product/kurs-ux-dizajn-s-majklom-dzhandoj-ot-skillbox/


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



Да, эти проблемы мы видим, решаем, но так же есть проблема с прилипшим блоком, эту проблему видно на странице где вовсе нет рекламы

Пример https://geekhacker.ru/product/kurs-ux-dizajn-s-majklom-dzhandoj-ot-skillbox/

Можем однозначно сказать, проблема с прилипшим блоком, убрали, для эксперимента, ошибка пропала.



у вас нет никаких ошибок. вы добавляете рекламу – будет меньше web vitals score, удаляете – больше – куда именно вы ее добавляете не так важно, но если добавлять в первый экран то будет больше поинтов убирать
https://www.google.com/search?q=ads+script+affect+web+vitals



Посмотрите страницу магазина, на которой вообще нет рекламы, при скролинге происходит сдвиг контента http://joxi.ru/zANVgR3SvPPv4A и соответственно ошибка

Вот такая страница https://geekhacker.ru/product/kurs-ux-dizajn-s-majklom-dzhandoj-ot-skillbox/

Вот записал видео https://www.loom.com/share/33cdb390a9794f418a1af0dc8dcc780a

Записал еще видео которое показывает данную проблему https://www.loom.com/share/5ef32ca004604d86ab04179356776665




скроллинг никак не влияет на CLS потому что он меряется при загрузке а не при скроллинге

и есть только один инструмент который тестирует – это инструмент гугла
https://developers.google.com/speed/pagespeed/insights/?hl=ru&url=https%3A%2F%2Fgeekhacker.ru%2Fproduct%2Fkurs-ux-dizajn-s-majklom-dzhandoj-ot-skillbox%2F

и у вас все нормально с ним https://monosnap.com/file/pelWpgA4Cy6s8SUuyfB4bktrpNypQO

gtmetrix тоже показывает отдельные значения по CLS https://gtmetrix.com/reports/geekhacker.ru/r9s1bhW3/

и у вас никакой проблемы нет
https://monosnap.com/file/W5aUeWhTdgClSUecoyGkoILAOu4rNy

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



Я вам до этого скидывал видео, которое поясняет эту проблему, синтетический тест измеряет Cumulative Layout Shift толькло при загрузке, Core Web Vitals измеряет данный параметр при скролинге страницы. По этому в вебмастере не пропадает ошибка, хотя синтетика показывает что все в порядке
Вот пример, синтетика не показывает ошибку, а реальные данные совсем другие http://joxi.ru/bmoV4PKS3YY75r https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fgeekhacker.ru%2F6-sposobov-kak-skachat-video-s-vk-na-telefon-otzyvy%2F&tab=desktop


Я не понимаю что вы хотите. Если не хотите чтобы происходил перестройка контента при скроллинге то зачем использовать элемент который перестраивает контент при скролинге? Используйте статические блоки тогда

Прилипший блок дает хорошую прибыть в Адсенсе, но портит CLS. Может быть можно исправить эту ошибку, что бы не было скачка?

ПС Вы предлагали попробовать отключить анимацию? Давайте попробуем, может не будет ошибки

ППС сейчас в консоле ошибка именно по этому параметру http://joxi.ru/J2bl8pzh07754r


Еще раз записал видео с объяснением проблемы https://www.loom.com/share/a6b47882175b432e86cde2407ef66afd

ПС Думаю эта проблема проявится не только у меня


Записал еще одно видео которое демонстрирует проблему с CLS https://www.loom.com/share/68ed3d6dd4e4451b95ae766c2e2094ff

Страница которая на видео https://geekhacker.ru/product/vvodnyj-kurs-v-gejmdizajn-i-razrabotku-igr-ot-geekbrains/

ПС Мы убирали данный блок на страницах и проблема уходила Записал по этому поводу видео, где отключенный прилипший блок решает проблему на странице https://www.loom.com/share/7306e1c6f25d4ced8c969fbee2cda1a9

У вас эта проблема так же на страницах https://regame.lookmetrix.com/product/xbox-live-gold-1-month-xbox-live-key-global/

Скажите, ее можно пофиксить или это не возможно?


Additional Info

Link on page with issue: https://regame.lookmetrix.com/product/xbox-live-gold-1-month-xbox-live-key-global/