CLS
Мы тоже используем куки, потому что без них вообще ничего не работает
Хорошо
Бета
Написать пост
Войти
Мы в других соцсетях
Правила
Еще
09 окт 2020
Почему у вас проблемы от высокого CLS и как их исправить
CLS — одна из метрик оценки технической оптимизации сайта. Рассказываем, как устранить проблемы с CLS и соответствовать требованиям Google.
3
13
10933
Проблемы с CLS могут повлечь за собой просадку сайта в поисковой выдаче Google. Почему? Дело в том, что Cumulative Layout Shift или совокупный сдвиг вёрстки — одна из ключевых метрик оценки технической оптимизации сайтов в Google.
Суть в том, что любые элементы на странице не должны произвольно менять своё положение в процессе загрузки. Это выглядит не очень красиво и посетитель может промахнуться по кнопке, как на видео ниже.
10 полезных SEO-расширений Google Chrome для разработчиков
Чем больше суммарная площадь таких «прыгающих» элементов и чем дальше они «прыгают», тем хуже будет метрика CLS. В идеале она должна быть равна нулю.
В сентябре 2020 года наша команда разработки окончательно победила Cumulative Layout Shift — контент больше не смещается при загрузке. Некоторые проблемы с CLS всё ещё остались, но 75-й перцентиль за 7 дней нулевой:
По таблице видно, что у нас завышена задержка первого ввода (First Input Delay) на мобильных и опасный тренд по времени отрисовки контента (Largest Contentful Paint) — над этим мы поработаем. Google, однако, считает, что проблем нет уже сейчас:
Поделюсь ключевыми приёмами по работе над избавлением от сдвигов контента. В нашем случае 90% проблем решилось довольно просто и свелось к трём правилам.
Приём для решения проблем с CLS #1
Приём для решения проблем с CLS #2
Приём для решения проблем с CLS #3
***
Для диагностики удобно использовать DevTools в Google Chrome. Установите эмуляцию медленного Интернет-соединения и поставьте галку Layout Shift Regions на вкладке Rendereing. Либо используйте отладчик Performance, недавно он научился выделять области со сдвигами контента.
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.
SEO
Веб-разработка
Оптимизация
Фронтенд
2
3
13
10933
Что думаете?
3 комментария
Сначала интересные
02 янв 2022
Подскажите, пожалуйста, как побороть высокий показатель CLS на страницах по типу https://bizoon.com.ua/dogs/dog-equipment/oshejniki/ , особенно на мобильной версии? Ругается больше всего на блоки div class="product-item-container" Пробовал задавать значения ширины и высоты для этих блоков, для блока картинки, для самой картинки, но результата нет. https://pagespeed.web.dev/report?url=https%3A%2F%2Fbizoon.com.ua%2Fdogs%2Fdog-equipment%2Foshejniki%2F&hl=ru
Ответить
2
0
13 мая 2021
А как быть с flexbox/grid? Смена order на адаптиве влияет на оценку CLS
Ответить
0
0
14 мая 2021
Artem Borovikov, Здесь нет какого-то отдельного кейса: если блоки DOM-дерева перемещаются, то это CLS. Надо смотреть ваш конкретный кейс, чтобы подсказать решение. Если order меняется после действия юзера, то у вас есть 500 мс в которые CLS не засчитается. Если просто сам, по таймеру, то лучше реализовать это через анимацию.
Ответить
0
0
Реклама
Вакансии
Архитектор сетей в защищенном исполнении
Специалист по информационной безопасности
Обсуждают сейчас
Igor Ryabushkin
6 часов
Как написать чистый код и сделать жизнь проще
Елена Гринько
8 часов
Очередной фреймворк на PHP — конкурс пет-проектов
Андрей Масленников
9 часов
Браузерная MMORPG — конкурс пет-проектов
Читают сейчас
1М
+42
Задачи по Python для начинающих от Tproger и GeekBrains
1М
+38
Всё о сортировке в Python: исчерпывающий гайд
752К
+24Мы тоже используем куки, потому что без них вообще ничего не работает
Хорошо
Бета
Написать пост
Войти
Мы в других соцсетях
Правила
Еще
09 окт 2020
Почему у вас проблемы от высокого CLS и как их исправить
CLS — одна из метрик оценки технической оптимизации сайта. Рассказываем, как устранить проблемы с CLS и соответствовать требованиям Google.
3
13
10933
Проблемы с CLS могут повлечь за собой просадку сайта в поисковой выдаче Google. Почему? Дело в том, что Cumulative Layout Shift или совокупный сдвиг вёрстки — одна из ключевых метрик оценки технической оптимизации сайтов в Google.
Суть в том, что любые элементы на странице не должны произвольно менять своё положение в процессе загрузки. Это выглядит не очень красиво и посетитель может промахнуться по кнопке, как на видео ниже.
10 полезных SEO-расширений Google Chrome для разработчиков
Чем больше суммарная площадь таких «прыгающих» элементов и чем дальше они «прыгают», тем хуже будет метрика CLS. В идеале она должна быть равна нулю.
В сентябре 2020 года наша команда разработки окончательно победила Cumulative Layout Shift — контент больше не смещается при загрузке. Некоторые проблемы с CLS всё ещё остались, но 75-й перцентиль за 7 дней нулевой:
По таблице видно, что у нас завышена задержка первого ввода (First Input Delay) на мобильных и опасный тренд по времени отрисовки контента (Largest Contentful Paint) — над этим мы поработаем. Google, однако, считает, что проблем нет уже сейчас:
Поделюсь ключевыми приёмами по работе над избавлением от сдвигов контента. В нашем случае 90% проблем решилось довольно просто и свелось к трём правилам.
Приём для решения проблем с CLS #1
Приём для решения проблем с CLS #2
Приём для решения проблем с CLS #3
***
Для диагностики удобно использовать DevTools в Google Chrome. Установите эмуляцию медленного Интернет-соединения и поставьте галку Layout Shift Regions на вкладке Rendereing. Либо используйте отладчик Performance, недавно он научился выделять области со сдвигами контента.
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.
SEO
Веб-разработка
Оптимизация
Фронтенд
2
3
13
10933
Что думаете?
3 комментария
Сначала интересные
02 янв 2022
Подскажите, пожалуйста, как побороть высокий показатель CLS на страницах по типу https://bizoon.com.ua/dogs/dog-equipment/oshejniki/ , особенно на мобильной версии? Ругается больше всего на блоки div class="product-item-container" Пробовал задавать значения ширины и высоты для этих блоков, для блока картинки, для самой картинки, но результата нет. https://pagespeed.web.dev/report?url=https%3A%2F%2Fbizoon.com.ua%2Fdogs%2Fdog-equipment%2Foshejniki%2F&hl=ru
Ответить
2
0
13 мая 2021
А как быть с flexbox/grid? Смена order на адаптиве влияет на оценку CLS
Ответить
0
0
14 мая 2021
Artem Borovikov, Здесь нет какого-то отдельного кейса: если блоки DOM-дерева перемещаются, то это CLS. Надо смотреть ваш конкретный кейс, чтобы подсказать решение. Если order меняется после действия юзера, то у вас есть 500 мс в которые CLS не засчитается. Если просто сам, по таймеру, то лучше реализовать это через анимацию.
Ответить
0
0
Реклама
Вакансии
Архитектор сетей в защищенном исполнении
Специалист по информационной безопасности
Обсуждают сейчас
Igor Ryabushkin
6 часов
Как написать чистый код и сделать жизнь проще
Елена Гринько
8 часов
Очередной фреймворк на PHP — конкурс пет-проектов
Андрей Масленников
9 часов
Браузерная MMORPG — конкурс пет-проектов
Читают сейчас
1М
+42
Задачи по Python для начинающих от Tproger и GeekBrains
1М
+38
Всё о сортировке в Python: исчерпывающий гайд
752К
+24Мы тоже используем куки, потому что без них вообще ничего не работает
Хорошо
Бета
Написать пост
Войти
Мы в других соцсетях
Правила
Еще
09 окт 2020
Почему у вас проблемы от высокого CLS и как их исправить
CLS — одна из метрик оценки технической оптимизации сайта. Рассказываем, как устранить проблемы с CLS и соответствовать требованиям Google.
3
13
10933
Проблемы с CLS могут повлечь за собой просадку сайта в поисковой выдаче Google. Почему? Дело в том, что Cumulative Layout Shift или совокупный сдвиг вёрстки — одна из ключевых метрик оценки технической оптимизации сайтов в Google.
Суть в том, что любые элементы на странице не должны произвольно менять своё положение в процессе загрузки. Это выглядит не очень красиво и посетитель может промахнуться по кнопке, как на видео ниже.
10 полезных SEO-расширений Google Chrome для разработчиков
Чем больше суммарная площадь таких «прыгающих» элементов и чем дальше они «прыгают», тем хуже будет метрика CLS. В идеале она должна быть равна нулю.
В сентябре 2020 года наша команда разработки окончательно победила Cumulative Layout Shift — контент больше не смещается при загрузке. Некоторые проблемы с CLS всё ещё остались, но 75-й перцентиль за 7 дней нулевой:
По таблице видно, что у нас завышена задержка первого ввода (First Input Delay) на мобильных и опасный тренд по времени отрисовки контента (Largest Contentful Paint) — над этим мы поработаем. Google, однако, считает, что проблем нет уже сейчас:
Поделюсь ключевыми приёмами по работе над избавлением от сдвигов контента. В нашем случае 90% проблем решилось довольно просто и свелось к трём правилам.
Приём для решения проблем с CLS #1
Приём для решения проблем с CLS #2
Приём для решения проблем с CLS #3
***
Для диагностики удобно использовать DevTools в Google Chrome. Установите эмуляцию медленного Интернет-соединения и поставьте галку Layout Shift Regions на вкладке Rendereing. Либо используйте отладчик Performance, недавно он научился выделять области со сдвигами контента.
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.
SEO
Веб-разработка
Оптимизация
Фронтенд
2
3
13
10933
Что думаете?
3 комментария
Сначала интересные
02 янв 2022
Подскажите, пожалуйста, как побороть высокий показатель CLS на страницах по типу https://bizoon.com.ua/dogs/dog-equipment/oshejniki/ , особенно на мобильной версии? Ругается больше всего на блоки div class="product-item-container" Пробовал задавать значения ширины и высоты для этих блоков, для блока картинки, для самой картинки, но результата нет. https://pagespeed.web.dev/report?url=https%3A%2F%2Fbizoon.com.ua%2Fdogs%2Fdog-equipment%2Foshejniki%2F&hl=ru
Ответить
2
0
13 мая 2021
А как быть с flexbox/grid? Смена order на адаптиве влияет на оценку CLS
Ответить
0
0
14 мая 2021
Artem Borovikov, Здесь нет какого-то отдельного кейса: если блоки DOM-дерева перемещаются, то это CLS. Надо смотреть ваш конкретный кейс, чтобы подсказать решение. Если order меняется после действия юзера, то у вас есть 500 мс в которые CLS не засчитается. Если просто сам, по таймеру, то лучше реализовать это через анимацию.
Ответить
0
0
Реклама
Вакансии
Архитектор сетей в защищенном исполнении
Специалист по информационной безопасности
Обсуждают сейчас
Igor Ryabushkin
6 часов
Как написать чистый код и сделать жизнь проще
Елена Гринько
8 часов
Очередной фреймворк на PHP — конкурс пет-проектов
Андрей Масленников
9 часов
Браузерная MMORPG — конкурс пет-проектов
Читают сейчас
1М
+42
Задачи по Python для начинающих от Tproger и GeekBrains
1М
+38
Всё о сортировке в Python: исчерпывающий гайд
752К
+24Мы тоже используем куки, потому что без них вообще ничего не работает
Хорошо
Бета
Написать пост
Войти
Мы в других соцсетях
Правила
Еще
09 окт 2020
Почему у вас проблемы от высокого CLS и как их исправить
CLS — одна из метрик оценки технической оптимизации сайта. Рассказываем, как устранить проблемы с CLS и соответствовать требованиям Google.
3
13
10933
Проблемы с CLS могут повлечь за собой просадку сайта в поисковой выдаче Google. Почему? Дело в том, что Cumulative Layout Shift или совокупный сдвиг вёрстки — одна из ключевых метрик оценки технической оптимизации сайтов в Google.
Суть в том, что любые элементы на странице не должны произвольно менять своё положение в процессе загрузки. Это выглядит не очень красиво и посетитель может промахнуться по кнопке, как на видео ниже.
10 полезных SEO-расширений Google Chrome для разработчиков
Чем больше суммарная площадь таких «прыгающих» элементов и чем дальше они «прыгают», тем хуже будет метрика CLS. В идеале она должна быть равна нулю.
В сентябре 2020 года наша команда разработки окончательно победила Cumulative Layout Shift — контент больше не смещается при загрузке. Некоторые проблемы с CLS всё ещё остались, но 75-й перцентиль за 7 дней нулевой:
По таблице видно, что у нас завышена задержка первого ввода (First Input Delay) на мобильных и опасный тренд по времени отрисовки контента (Largest Contentful Paint) — над этим мы поработаем. Google, однако, считает, что проблем нет уже сейчас:
Поделюсь ключевыми приёмами по работе над избавлением от сдвигов контента. В нашем случае 90% проблем решилось довольно просто и свелось к трём правилам.
Приём для решения проблем с CLS #1
Приём для решения проблем с CLS #2
Приём для решения проблем с CLS #3
***
Для диагностики удобно использовать DevTools в Google Chrome. Установите эмуляцию медленного Интернет-соединения и поставьте галку Layout Shift Regions на вкладке Rendereing. Либо используйте отладчик Performance, недавно он научился выделять области со сдвигами контента.
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.
SEO
Веб-разработка
Оптимизация
Фронтенд
2
3
13
10933
Что думаете?
3 комментария
Сначала интересные
02 янв 2022
Подскажите, пожалуйста, как побороть высокий показатель CLS на страницах по типу https://bizoon.com.ua/dogs/dog-equipment/oshejniki/ , особенно на мобильной версии? Ругается больше всего на блоки div class="product-item-container" Пробовал задавать значения ширины и высоты для этих блоков, для блока картинки, для самой картинки, но результата нет. https://pagespeed.web.dev/report?url=https%3A%2F%2Fbizoon.com.ua%2Fdogs%2Fdog-equipment%2Foshejniki%2F&hl=ru
Ответить
2
0
13 мая 2021
А как быть с flexbox/grid? Смена order на адаптиве влияет на оценку CLS
Ответить
0
0
14 мая 2021
Artem Borovikov, Здесь нет какого-то отдельного кейса: если блоки DOM-дерева перемещаются, то это CLS. Надо смотреть ваш конкретный кейс, чтобы подсказать решение. Если order меняется после действия юзера, то у вас есть 500 мс в которые CLS не засчитается. Если просто сам, по таймеру, то лучше реализовать это через анимацию.
Ответить
0
0
Реклама
Вакансии
Архитектор сетей в защищенном исполнении
Специалист по информационной безопасности
Обсуждают сейчас
Igor Ryabushkin
6 часов
Как написать чистый код и сделать жизнь проще
Елена Гринько
8 часов
Очередной фреймворк на PHP — конкурс пет-проектов
Андрей Масленников
9 часов
Браузерная MMORPG — конкурс пет-проектов
Читают сейчас
1М
+42
Задачи по Python для начинающих от Tproger и GeekBrains
1М
+38
Всё о сортировке в Python: исчерпывающий гайд
752К
+24Мы тоже используем куки, потому что без них вообще ничего не работает
Хорошо
Бета
Написать пост
Войти
Мы в других соцсетях
Правила
Еще
09 окт 2020
Почему у вас проблемы от высокого CLS и как их исправить
CLS — одна из метрик оценки технической оптимизации сайта. Рассказываем, как устранить проблемы с CLS и соответствовать требованиям Google.
3
13
10933
Проблемы с CLS могут повлечь за собой просадку сайта в поисковой выдаче Google. Почему? Дело в том, что Cumulative Layout Shift или совокупный сдвиг вёрстки — одна из ключевых метрик оценки технической оптимизации сайтов в Google.
Суть в том, что любые элементы на странице не должны произвольно менять своё положение в процессе загрузки. Это выглядит не очень красиво и посетитель может промахнуться по кнопке, как на видео ниже.
10 полезных SEO-расширений Google Chrome для разработчиков
Чем больше суммарная площадь таких «прыгающих» элементов и чем дальше они «прыгают», тем хуже будет метрика CLS. В идеале она должна быть равна нулю.
В сентябре 2020 года наша команда разработки окончательно победила Cumulative Layout Shift — контент больше не смещается при загрузке. Некоторые проблемы с CLS всё ещё остались, но 75-й перцентиль за 7 дней нулевой:
По таблице видно, что у нас завышена задержка первого ввода (First Input Delay) на мобильных и опасный тренд по времени отрисовки контента (Largest Contentful Paint) — над этим мы поработаем. Google, однако, считает, что проблем нет уже сейчас:
Поделюсь ключевыми приёмами по работе над избавлением от сдвигов контента. В нашем случае 90% проблем решилось довольно просто и свелось к трём правилам.
Приём для решения проблем с CLS #1
Приём для решения проблем с CLS #2
Приём для решения проблем с CLS #3
***
Для диагностики удобно использовать DevTools в Google Chrome. Установите эмуляцию медленного Интернет-соединения и поставьте галку Layout Shift Regions на вкладке Rendereing. Либо используйте отладчик Performance, недавно он научился выделять области со сдвигами контента.
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.
SEO
Веб-разработка
Оптимизация
Фронтенд
2
3
13
10933
Что думаете?
3 комментария
Сначала интересные
02 янв 2022
Подскажите, пожалуйста, как побороть высокий показатель CLS на страницах по типу https://bizoon.com.ua/dogs/dog-equipment/oshejniki/ , особенно на мобильной версии? Ругается больше всего на блоки div class="product-item-container" Пробовал задавать значения ширины и высоты для этих блоков, для блока картинки, для самой картинки, но результата нет. https://pagespeed.web.dev/report?url=https%3A%2F%2Fbizoon.com.ua%2Fdogs%2Fdog-equipment%2Foshejniki%2F&hl=ru
Ответить
2
0
13 мая 2021
А как быть с flexbox/grid? Смена order на адаптиве влияет на оценку CLS
Ответить
0
0
14 мая 2021
Artem Borovikov, Здесь нет какого-то отдельного кейса: если блоки DOM-дерева перемещаются, то это CLS. Надо смотреть ваш конкретный кейс, чтобы подсказать решение. Если order меняется после действия юзера, то у вас есть 500 мс в которые CLS не засчитается. Если просто сам, по таймеру, то лучше реализовать это через анимацию.
Ответить
0
0
Реклама
Вакансии
Архитектор сетей в защищенном исполнении
Специалист по информационной безопасности
Обсуждают сейчас
Igor Ryabushkin
6 часов
Как написать чистый код и сделать жизнь проще
Елена Гринько
8 часов
Очередной фреймворк на PHP — конкурс пет-проектов
Андрей Масленников
9 часов
Браузерная MMORPG — конкурс пет-проектов
Читают сейчас
1М
+42
Задачи по Python для начинающих от Tproger и GeekBrains
1М
+38
Всё о сортировке в Python: исчерпывающий гайд
752К
+24Мы тоже используем куки, потому что без них вообще ничего не работает
Хорошо
Бета
Написать пост
Войти
Мы в других соцсетях
Правила
Еще
09 окт 2020
Почему у вас проблемы от высокого CLS и как их исправить
CLS — одна из метрик оценки технической оптимизации сайта. Рассказываем, как устранить проблемы с CLS и соответствовать требованиям Google.
3
13
10933
Проблемы с CLS могут повлечь за собой просадку сайта в поисковой выдаче Google. Почему? Дело в том, что Cumulative Layout Shift или совокупный сдвиг вёрстки — одна из ключевых метрик оценки технической оптимизации сайтов в Google.
Суть в том, что любые элементы на странице не должны произвольно менять своё положение в процессе загрузки. Это выглядит не очень красиво и посетитель может промахнуться по кнопке, как на видео ниже.
10 полезных SEO-расширений Google Chrome для разработчиков
Чем больше суммарная площадь таких «прыгающих» элементов и чем дальше они «прыгают», тем хуже будет метрика CLS. В идеале она должна быть равна нулю.
В сентябре 2020 года наша команда разработки окончательно победила Cumulative Layout Shift — контент больше не смещается при загрузке. Некоторые проблемы с CLS всё ещё остались, но 75-й перцентиль за 7 дней нулевой:
По таблице видно, что у нас завышена задержка первого ввода (First Input Delay) на мобильных и опасный тренд по времени отрисовки контента (Largest Contentful Paint) — над этим мы поработаем. Google, однако, считает, что проблем нет уже сейчас:
Поделюсь ключевыми приёмами по работе над избавлением от сдвигов контента. В нашем случае 90% проблем решилось довольно просто и свелось к трём правилам.
Приём для решения проблем с CLS #1
Приём для решения проблем с CLS #2
Приём для решения проблем с CLS #3
***
Для диагностики удобно использовать DevTools в Google Chrome. Установите эмуляцию медленного Интернет-соединения и поставьте галку Layout Shift Regions на вкладке Rendereing. Либо используйте отладчик Performance, недавно он научился выделять области со сдвигами контента.
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.
SEO
Веб-разработка
Оптимизация
Фронтенд
2
3
13
10933
Что думаете?
3 комментария
Сначала интересные
02 янв 2022
Подскажите, пожалуйста, как побороть высокий показатель CLS на страницах по типу https://bizoon.com.ua/dogs/dog-equipment/oshejniki/ , особенно на мобильной версии? Ругается больше всего на блоки div class="product-item-container" Пробовал задавать значения ширины и высоты для этих блоков, для блока картинки, для самой картинки, но результата нет. https://pagespeed.web.dev/report?url=https%3A%2F%2Fbizoon.com.ua%2Fdogs%2Fdog-equipment%2Foshejniki%2F&hl=ru
Ответить
2
0
13 мая 2021
А как быть с flexbox/grid? Смена order на адаптиве влияет на оценку CLS
Ответить
0
0
14 мая 2021
Artem Borovikov, Здесь нет какого-то отдельного кейса: если блоки DOM-дерева перемещаются, то это CLS. Надо смотреть ваш конкретный кейс, чтобы подсказать решение. Если order меняется после действия юзера, то у вас есть 500 мс в которые CLS не засчитается. Если просто сам, по таймеру, то лучше реализовать это через анимацию.
Ответить
0
0
Реклама
Вакансии
Архитектор сетей в защищенном исполнении
Специалист по информационной безопасности
Обсуждают сейчас
Igor Ryabushkin
6 часов
Как написать чистый код и сделать жизнь проще
Елена Гринько
8 часов
Очередной фреймворк на PHP — конкурс пет-проектов
Андрей Масленников
9 часов
Браузерная MMORPG — конкурс пет-проектов
Читают сейчас
1М
+42
Задачи по Python для начинающих от Tproger и GeekBrains
1М
+38
Всё о сортировке в Python: исчерпывающий гайд
752К
+24Мы тоже используем куки, потому что без них вообще ничего не работает
Хорошо
Бета
Написать пост
Войти
Мы в других соцсетях
Правила
Еще
09 окт 2020
Почему у вас проблемы от высокого CLS и как их исправить
CLS — одна из метрик оценки технической оптимизации сайта. Рассказываем, как устранить проблемы с CLS и соответствовать требованиям Google.
3
13
10933
Проблемы с CLS могут повлечь за собой просадку сайта в поисковой выдаче Google. Почему? Дело в том, что Cumulative Layout Shift или совокупный сдвиг вёрстки — одна из ключевых метрик оценки технической оптимизации сайтов в Google.
Суть в том, что любые элементы на странице не должны произвольно менять своё положение в процессе загрузки. Это выглядит не очень красиво и посетитель может промахнуться по кнопке, как на видео ниже.
10 полезных SEO-расширений Google Chrome для разработчиков
Чем больше суммарная площадь таких «прыгающих» элементов и чем дальше они «прыгают», тем хуже будет метрика CLS. В идеале она должна быть равна нулю.
В сентябре 2020 года наша команда разработки окончательно победила Cumulative Layout Shift — контент больше не смещается при загрузке. Некоторые проблемы с CLS всё ещё остались, но 75-й перцентиль за 7 дней нулевой:
По таблице видно, что у нас завышена задержка первого ввода (First Input Delay) на мобильных и опасный тренд по времени отрисовки контента (Largest Contentful Paint) — над этим мы поработаем. Google, однако, считает, что проблем нет уже сейчас:
Поделюсь ключевыми приёмами по работе над избавлением от сдвигов контента. В нашем случае 90% проблем решилось довольно просто и свелось к трём правилам.
Приём для решения проблем с CLS #1
Приём для решения проблем с CLS #2
Приём для решения проблем с CLS #3
***
Для диагностики удобно использовать DevTools в Google Chrome. Установите эмуляцию медленного Интернет-соединения и поставьте галку Layout Shift Regions на вкладке Rendereing. Либо используйте отладчик Performance, недавно он научился выделять области со сдвигами контента.
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.
SEO
Веб-разработка
Оптимизация
Фронтенд
2
3
13
10933
Что думаете?
3 комментария
Сначала интересные
02 янв 2022
Подскажите, пожалуйста, как побороть высокий показатель CLS на страницах по типу https://bizoon.com.ua/dogs/dog-equipment/oshejniki/ , особенно на мобильной версии? Ругается больше всего на блоки div class="product-item-container" Пробовал задавать значения ширины и высоты для этих блоков, для блока картинки, для самой картинки, но результата нет. https://pagespeed.web.dev/report?url=https%3A%2F%2Fbizoon.com.ua%2Fdogs%2Fdog-equipment%2Foshejniki%2F&hl=ru
Ответить
2
0
13 мая 2021
А как быть с flexbox/grid? Смена order на адаптиве влияет на оценку CLS
Ответить
0
0
14 мая 2021
Artem Borovikov, Здесь нет какого-то отдельного кейса: если блоки DOM-дерева перемещаются, то это CLS. Надо смотреть ваш конкретный кейс, чтобы подсказать решение. Если order меняется после действия юзера, то у вас есть 500 мс в которые CLS не засчитается. Если просто сам, по таймеру, то лучше реализовать это через анимацию.
Ответить
0
0
Реклама
Вакансии
Архитектор сетей в защищенном исполнении
Специалист по информационной безопасности
Обсуждают сейчас
Igor Ryabushkin
6 часов
Как написать чистый код и сделать жизнь проще
Елена Гринько
8 часов
Очередной фреймворк на PHP — конкурс пет-проектов
Андрей Масленников
9 часов
Браузерная MMORPG — конкурс пет-проектов
Читают сейчас
1М
+42
Задачи по Python для начинающих от Tproger и GeekBrains
1М
+38
Всё о сортировке в Python: исчерпывающий гайд
752К
+24Мы тоже используем куки, потому что без них вообще ничего не работает
Хорошо
Бета
Написать пост
Войти
Мы в других соцсетях
Правила
Еще
09 окт 2020
Почему у вас проблемы от высокого CLS и как их исправить
CLS — одна из метрик оценки технической оптимизации сайта. Рассказываем, как устранить проблемы с CLS и соответствовать требованиям Google.
3
13
10933
Проблемы с CLS могут повлечь за собой просадку сайта в поисковой выдаче Google. Почему? Дело в том, что Cumulative Layout Shift или совокупный сдвиг вёрстки — одна из ключевых метрик оценки технической оптимизации сайтов в Google.
Суть в том, что любые элементы на странице не должны произвольно менять своё положение в процессе загрузки. Это выглядит не очень красиво и посетитель может промахнуться по кнопке, как на видео ниже.
10 полезных SEO-расширений Google Chrome для разработчиков
Чем больше суммарная площадь таких «прыгающих» элементов и чем дальше они «прыгают», тем хуже будет метрика CLS. В идеале она должна быть равна нулю.
В сентябре 2020 года наша команда разработки окончательно победила Cumulative Layout Shift — контент больше не смещается при загрузке. Некоторые проблемы с CLS всё ещё остались, но 75-й перцентиль за 7 дней нулевой:
По таблице видно, что у нас завышена задержка первого ввода (First Input Delay) на мобильных и опасный тренд по времени отрисовки контента (Largest Contentful Paint) — над этим мы поработаем. Google, однако, считает, что проблем нет уже сейчас:
Поделюсь ключевыми приёмами по работе над избавлением от сдвигов контента. В нашем случае 90% проблем решилось довольно просто и свелось к трём правилам.
Приём для решения проблем с CLS #1
Приём для решения проблем с CLS #2
Приём для решения проблем с CLS #3
***
Для диагностики удобно использовать DevTools в Google Chrome. Установите эмуляцию медленного Интернет-соединения и поставьте галку Layout Shift Regions на вкладке Rendereing. Либо используйте отладчик Performance, недавно он научился выделять области со сдвигами контента.
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.
SEO
Веб-разработка
Оптимизация
Фронтенд
2
3
13
10933
Что думаете?
3 комментария
Сначала интересные
02 янв 2022
Подскажите, пожалуйста, как побороть высокий показатель CLS на страницах по типу https://bizoon.com.ua/dogs/dog-equipment/oshejniki/ , особенно на мобильной версии? Ругается больше всего на блоки div class="product-item-container" Пробовал задавать значения ширины и высоты для этих блоков, для блока картинки, для самой картинки, но результата нет. https://pagespeed.web.dev/report?url=https%3A%2F%2Fbizoon.com.ua%2Fdogs%2Fdog-equipment%2Foshejniki%2F&hl=ru
Ответить
2
0
13 мая 2021
А как быть с flexbox/grid? Смена order на адаптиве влияет на оценку CLS
Ответить
0
0
14 мая 2021
Artem Borovikov, Здесь нет какого-то отдельного кейса: если блоки DOM-дерева перемещаются, то это CLS. Надо смотреть ваш конкретный кейс, чтобы подсказать решение. Если order меняется после действия юзера, то у вас есть 500 мс в которые CLS не засчитается. Если просто сам, по таймеру, то лучше реализовать это через анимацию.
Ответить
0
0
Реклама
Вакансии
Архитектор сетей в защищенном исполнении
Специалист по информационной безопасности
Обсуждают сейчас
Igor Ryabushkin
6 часов
Как написать чистый код и сделать жизнь проще
Елена Гринько
8 часов
Очередной фреймворк на PHP — конкурс пет-проектов
Андрей Масленников
9 часов
Браузерная MMORPG — конкурс пет-проектов
Читают сейчас
1М
+42
Задачи по Python для начинающих от Tproger и GeekBrains
1М
+38
Всё о сортировке в Python: исчерпывающий гайд
752К
+24Мы тоже используем куки, потому что без них вообще ничего не работает
Хорошо
Бета
Написать пост
Войти
Мы в других соцсетях
Правила
Еще
09 окт 2020
Почему у вас проблемы от высокого CLS и как их исправить
CLS — одна из метрик оценки технической оптимизации сайта. Рассказываем, как устранить проблемы с CLS и соответствовать требованиям Google.
3
13
10933
Проблемы с CLS могут повлечь за собой просадку сайта в поисковой выдаче Google. Почему? Дело в том, что Cumulative Layout Shift или совокупный сдвиг вёрстки — одна из ключевых метрик оценки технической оптимизации сайтов в Google.
Суть в том, что любые элементы на странице не должны произвольно менять своё положение в процессе загрузки. Это выглядит не очень красиво и посетитель может промахнуться по кнопке, как на видео ниже.
10 полезных SEO-расширений Google Chrome для разработчиков
Чем больше суммарная площадь таких «прыгающих» элементов и чем дальше они «прыгают», тем хуже будет метрика CLS. В идеале она должна быть равна нулю.
В сентябре 2020 года наша команда разработки окончательно победила Cumulative Layout Shift — контент больше не смещается при загрузке. Некоторые проблемы с CLS всё ещё остались, но 75-й перцентиль за 7 дней нулевой:
По таблице видно, что у нас завышена задержка первого ввода (First Input Delay) на мобильных и опасный тренд по времени отрисовки контента (Largest Contentful Paint) — над этим мы поработаем. Google, однако, считает, что проблем нет уже сейчас:
Поделюсь ключевыми приёмами по работе над избавлением от сдвигов контента. В нашем случае 90% проблем решилось довольно просто и свелось к трём правилам.
Приём для решения проблем с CLS #1
Приём для решения проблем с CLS #2
Приём для решения проблем с CLS #3
***
Для диагностики удобно использовать DevTools в Google Chrome. Установите эмуляцию медленного Интернет-соединения и поставьте галку Layout Shift Regions на вкладке Rendereing. Либо используйте отладчик Performance, недавно он научился выделять области со сдвигами контента.
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.
SEO
Веб-разработка
Оптимизация
Фронтенд
2
3
13
10933
Что думаете?
3 комментария
Сначала интересные
02 янв 2022
Подскажите, пожалуйста, как побороть высокий показатель CLS на страницах по типу https://bizoon.com.ua/dogs/dog-equipment/oshejniki/ , особенно на мобильной версии? Ругается больше всего на блоки div class="product-item-container" Пробовал задавать значения ширины и высоты для этих блоков, для блока картинки, для самой картинки, но результата нет. https://pagespeed.web.dev/report?url=https%3A%2F%2Fbizoon.com.ua%2Fdogs%2Fdog-equipment%2Foshejniki%2F&hl=ru
Ответить
2
0
13 мая 2021
А как быть с flexbox/grid? Смена order на адаптиве влияет на оценку CLS
Ответить
0
0
14 мая 2021
Artem Borovikov, Здесь нет какого-то отдельного кейса: если блоки DOM-дерева перемещаются, то это CLS. Надо смотреть ваш конкретный кейс, чтобы подсказать решение. Если order меняется после действия юзера, то у вас есть 500 мс в которые CLS не засчитается. Если просто сам, по таймеру, то лучше реализовать это через анимацию.
Ответить
0
0
Реклама
Вакансии
Архитектор сетей в защищенном исполнении
Специалист по информационной безопасности
Обсуждают сейчас
Igor Ryabushkin
6 часов
Как написать чистый код и сделать жизнь проще
Елена Гринько
8 часов
Очередной фреймворк на PHP — конкурс пет-проектов
Андрей Масленников
9 часов
Браузерная MMORPG — конкурс пет-проектов
Читают сейчас
1М
+42
Задачи по Python для начинающих от Tproger и GeekBrains
1М
+38
Всё о сортировке в Python: исчерпывающий гайд
752К
+24Мы тоже используем куки, потому что без них вообще ничего не работает
Хорошо
Бета
Написать пост
Войти
Мы в других соцсетях
Правила
Еще
09 окт 2020
Почему у вас проблемы от высокого CLS и как их исправить
CLS — одна из метрик оценки технической оптимизации сайта. Рассказываем, как устранить проблемы с CLS и соответствовать требованиям Google.
3
13
10933
Проблемы с CLS могут повлечь за собой просадку сайта в поисковой выдаче Google. Почему? Дело в том, что Cumulative Layout Shift или совокупный сдвиг вёрстки — одна из ключевых метрик оценки технической оптимизации сайтов в Google.
Суть в том, что любые элементы на странице не должны произвольно менять своё положение в процессе загрузки. Это выглядит не очень красиво и посетитель может промахнуться по кнопке, как на видео ниже.
10 полезных SEO-расширений Google Chrome для разработчиков
Чем больше суммарная площадь таких «прыгающих» элементов и чем дальше они «прыгают», тем хуже будет метрика CLS. В идеале она должна быть равна нулю.
В сентябре 2020 года наша команда разработки окончательно победила Cumulative Layout Shift — контент больше не смещается при загрузке. Некоторые проблемы с CLS всё ещё остались, но 75-й перцентиль за 7 дней нулевой:
По таблице видно, что у нас завышена задержка первого ввода (First Input Delay) на мобильных и опасный тренд по времени отрисовки контента (Largest Contentful Paint) — над этим мы поработаем. Google, однако, считает, что проблем нет уже сейчас:
Поделюсь ключевыми приёмами по работе над избавлением от сдвигов контента. В нашем случае 90% проблем решилось довольно просто и свелось к трём правилам.
Приём для решения проблем с CLS #1
Приём для решения проблем с CLS #2
Приём для решения проблем с CLS #3
***
Для диагностики удобно использовать DevTools в Google Chrome. Установите эмуляцию медленного Интернет-соединения и поставьте галку Layout Shift Regions на вкладке Rendereing. Либо используйте отладчик Performance, недавно он научился выделять области со сдвигами контента.
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.
SEO
Веб-разработка
Оптимизация
Фронтенд
2
3
13
10933
Что думаете?
3 комментария
Сначала интересные
02 янв 2022
Подскажите, пожалуйста, как побороть высокий показатель CLS на страницах по типу https://bizoon.com.ua/dogs/dog-equipment/oshejniki/ , особенно на мобильной версии? Ругается больше всего на блоки div class="product-item-container" Пробовал задавать значения ширины и высоты для этих блоков, для блока картинки, для самой картинки, но результата нет. https://pagespeed.web.dev/report?url=https%3A%2F%2Fbizoon.com.ua%2Fdogs%2Fdog-equipment%2Foshejniki%2F&hl=ru
Ответить
2
0
13 мая 2021
А как быть с flexbox/grid? Смена order на адаптиве влияет на оценку CLS
Ответить
0
0
14 мая 2021
Artem Borovikov, Здесь нет какого-то отдельного кейса: если блоки DOM-дерева перемещаются, то это CLS. Надо смотреть ваш конкретный кейс, чтобы подсказать решение. Если order меняется после действия юзера, то у вас есть 500 мс в которые CLS не засчитается. Если просто сам, по таймеру, то лучше реализовать это через анимацию.
Ответить
0
0
Реклама
Вакансии
Архитектор сетей в защищенном исполнении
Специалист по информационной безопасности
Обсуждают сейчас
Igor Ryabushkin
6 часов
Как написать чистый код и сделать жизнь проще
Елена Гринько
8 часов
Очередной фреймворк на PHP — конкурс пет-проектов
Андрей Масленников
9 часов
Браузерная MMORPG — конкурс пет-проектов
Читают сейчас
1М
+42
Задачи по Python для начинающих от Tproger и GeekBrains
1М
+38
Всё о сортировке в Python: исчерпывающий гайд
752К
+24Мы тоже используем куки, потому что без них вообще ничего не работает
Хорошо
Бета
Написать пост
Войти
Мы в других соцсетях
Правила
Еще
09 окт 2020
Почему у вас проблемы от высокого CLS и как их исправить
CLS — одна из метрик оценки технической оптимизации сайта. Рассказываем, как устранить проблемы с CLS и соответствовать требованиям Google.
3
13
10933
Проблемы с CLS могут повлечь за собой просадку сайта в поисковой выдаче Google. Почему? Дело в том, что Cumulative Layout Shift или совокупный сдвиг вёрстки — одна из ключевых метрик оценки технической оптимизации сайтов в Google.
Суть в том, что любые элементы на странице не должны произвольно менять своё положение в процессе загрузки. Это выглядит не очень красиво и посетитель может промахнуться по кнопке, как на видео ниже.
10 полезных SEO-расширений Google Chrome для разработчиков
Чем больше суммарная площадь таких «прыгающих» элементов и чем дальше они «прыгают», тем хуже будет метрика CLS. В идеале она должна быть равна нулю.
В сентябре 2020 года наша команда разработки окончательно победила Cumulative Layout Shift — контент больше не смещается при загрузке. Некоторые проблемы с CLS всё ещё остались, но 75-й перцентиль за 7 дней нулевой:
По таблице видно, что у нас завышена задержка первого ввода (First Input Delay) на мобильных и опасный тренд по времени отрисовки контента (Largest Contentful Paint) — над этим мы поработаем. Google, однако, считает, что проблем нет уже сейчас:
Поделюсь ключевыми приёмами по работе над избавлением от сдвигов контента. В нашем случае 90% проблем решилось довольно просто и свелось к трём правилам.
Приём для решения проблем с CLS #1
Приём для решения проблем с CLS #2
Приём для решения проблем с CLS #3
***
Для диагностики удобно использовать DevTools в Google Chrome. Установите эмуляцию медленного Интернет-соединения и поставьте галку Layout Shift Regions на вкладке Rendereing. Либо используйте отладчик Performance, недавно он научился выделять области со сдвигами контента.
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.
SEO
Веб-разработка
Оптимизация
Фронтенд
2
3
13
10933
Что думаете?
3 комментария
Сначала интересные
02 янв 2022
Подскажите, пожалуйста, как побороть высокий показатель CLS на страницах по типу https://bizoon.com.ua/dogs/dog-equipment/oshejniki/ , особенно на мобильной версии? Ругается больше всего на блоки div class="product-item-container" Пробовал задавать значения ширины и высоты для этих блоков, для блока картинки, для самой картинки, но результата нет. https://pagespeed.web.dev/report?url=https%3A%2F%2Fbizoon.com.ua%2Fdogs%2Fdog-equipment%2Foshejniki%2F&hl=ru
Ответить
2
0
13 мая 2021
А как быть с flexbox/grid? Смена order на адаптиве влияет на оценку CLS
Ответить
0
0
14 мая 2021
Artem Borovikov, Здесь нет какого-то отдельного кейса: если блоки DOM-дерева перемещаются, то это CLS. Надо смотреть ваш конкретный кейс, чтобы подсказать решение. Если order меняется после действия юзера, то у вас есть 500 мс в которые CLS не засчитается. Если просто сам, по таймеру, то лучше реализовать это через анимацию.
Ответить
0
0
Реклама
Вакансии
Архитектор сетей в защищенном исполнении
Специалист по информационной безопасности
Обсуждают сейчас
Igor Ryabushkin
6 часов
Как написать чистый код и сделать жизнь проще
Елена Гринько
8 часов
Очередной фреймворк на PHP — конкурс пет-проектов
Андрей Масленников
9 часов
Браузерная MMORPG — конкурс пет-проектов
Читают сейчас
1М
+42
Задачи по Python для начинающих от Tproger и GeekBrains
1М
+38
Всё о сортировке в Python: исчерпывающий гайд
752К
+24Мы тоже используем куки, потому что без них вообще ничего не работает
Хорошо
Бета
Написать пост
Войти
Мы в других соцсетях
Правила
Еще
09 окт 2020
Почему у вас проблемы от высокого CLS и как их исправить
CLS — одна из метрик оценки технической оптимизации сайта. Рассказываем, как устранить проблемы с CLS и соответствовать требованиям Google.
3
13
10933
Проблемы с CLS могут повлечь за собой просадку сайта в поисковой выдаче Google. Почему? Дело в том, что Cumulative Layout Shift или совокупный сдвиг вёрстки — одна из ключевых метрик оценки технической оптимизации сайтов в Google.
Суть в том, что любые элементы на странице не должны произвольно менять своё положение в процессе загрузки. Это выглядит не очень красиво и посетитель может промахнуться по кнопке, как на видео ниже.
10 полезных SEO-расширений Google Chrome для разработчиков
Чем больше суммарная площадь таких «прыгающих» элементов и чем дальше они «прыгают», тем хуже будет метрика CLS. В идеале она должна быть равна нулю.
В сентябре 2020 года наша команда разработки окончательно победила Cumulative Layout Shift — контент больше не смещается при загрузке. Некоторые проблемы с CLS всё ещё остались, но 75-й перцентиль за 7 дней нулевой:
По таблице видно, что у нас завышена задержка первого ввода (First Input Delay) на мобильных и опасный тренд по времени отрисовки контента (Largest Contentful Paint) — над этим мы поработаем. Google, однако, считает, что проблем нет уже сейчас:
Поделюсь ключевыми приёмами по работе над избавлением от сдвигов контента. В нашем случае 90% проблем решилось довольно просто и свелось к трём правилам.
Приём для решения проблем с CLS #1
Приём для решения проблем с CLS #2
Приём для решения проблем с CLS #3
***
Для диагностики удобно использовать DevTools в Google Chrome. Установите эмуляцию медленного Интернет-соединения и поставьте галку Layout Shift Regions на вкладке Rendereing. Либо используйте отладчик Performance, недавно он научился выделять области со сдвигами контента.
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.
SEO
Веб-разработка
Оптимизация
Фронтенд
2
3
13
10933
Что думаете?
3 комментария
Сначала интересные
02 янв 2022
Подскажите, пожалуйста, как побороть высокий показатель CLS на страницах по типу https://bizoon.com.ua/dogs/dog-equipment/oshejniki/ , особенно на мобильной версии? Ругается больше всего на блоки div class="product-item-container" Пробовал задавать значения ширины и высоты для этих блоков, для блока картинки, для самой картинки, но результата нет. https://pagespeed.web.dev/report?url=https%3A%2F%2Fbizoon.com.ua%2Fdogs%2Fdog-equipment%2Foshejniki%2F&hl=ru
Ответить
2
0
13 мая 2021
А как быть с flexbox/grid? Смена order на адаптиве влияет на оценку CLS
Ответить
0
0
14 мая 2021
Artem Borovikov, Здесь нет какого-то отдельного кейса: если блоки DOM-дерева перемещаются, то это CLS. Надо смотреть ваш конкретный кейс, чтобы подсказать решение. Если order меняется после действия юзера, то у вас есть 500 мс в которые CLS не засчитается. Если просто сам, по таймеру, то лучше реализовать это через анимацию.
Ответить
0
0
Реклама
Вакансии
Архитектор сетей в защищенном исполнении
Специалист по информационной безопасности
Обсуждают сейчас
Igor Ryabushkin
6 часов
Как написать чистый код и сделать жизнь проще
Елена Гринько
8 часов
Очередной фреймворк на PHP — конкурс пет-проектов
Андрей Масленников
9 часов
Браузерная MMORPG — конкурс пет-проектов
Читают сейчас
1М
+42
Задачи по Python для начинающих от Tproger и GeekBrains
1М
+38
Всё о сортировке в Python: исчерпывающий гайд
752К
+24Мы тоже используем куки, потому что без них вообще ничего не работает
Хорошо
Бета
Написать пост
Войти
Мы в других соцсетях
Правила
Еще
09 окт 2020
Почему у вас проблемы от высокого CLS и как их исправить
CLS — одна из метрик оценки технической оптимизации сайта. Рассказываем, как устранить проблемы с CLS и соответствовать требованиям Google.
3
13
10933
Проблемы с CLS могут повлечь за собой просадку сайта в поисковой выдаче Google. Почему? Дело в том, что Cumulative Layout Shift или совокупный сдвиг вёрстки — одна из ключевых метрик оценки технической оптимизации сайтов в Google.
Суть в том, что любые элементы на странице не должны произвольно менять своё положение в процессе загрузки. Это выглядит не очень красиво и посетитель может промахнуться по кнопке, как на видео ниже.
10 полезных SEO-расширений Google Chrome для разработчиков
Чем больше суммарная площадь таких «прыгающих» элементов и чем дальше они «прыгают», тем хуже будет метрика CLS. В идеале она должна быть равна нулю.
В сентябре 2020 года наша команда разработки окончательно победила Cumulative Layout Shift — контент больше не смещается при загрузке. Некоторые проблемы с CLS всё ещё остались, но 75-й перцентиль за 7 дней нулевой:
По таблице видно, что у нас завышена задержка первого ввода (First Input Delay) на мобильных и опасный тренд по времени отрисовки контента (Largest Contentful Paint) — над этим мы поработаем. Google, однако, считает, что проблем нет уже сейчас:
Поделюсь ключевыми приёмами по работе над избавлением от сдвигов контента. В нашем случае 90% проблем решилось довольно просто и свелось к трём правилам.
Приём для решения проблем с CLS #1
Приём для решения проблем с CLS #2
Приём для решения проблем с CLS #3
***
Для диагностики удобно использовать DevTools в Google Chrome. Установите эмуляцию медленного Интернет-соединения и поставьте галку Layout Shift Regions на вкладке Rendereing. Либо используйте отладчик Performance, недавно он научился выделять области со сдвигами контента.
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.
SEO
Веб-разработка
Оптимизация
Фронтенд
2
3
13
10933
Что думаете?
3 комментария
Сначала интересные
02 янв 2022
Подскажите, пожалуйста, как побороть высокий показатель CLS на страницах по типу https://bizoon.com.ua/dogs/dog-equipment/oshejniki/ , особенно на мобильной версии? Ругается больше всего на блоки div class="product-item-container" Пробовал задавать значения ширины и высоты для этих блоков, для блока картинки, для самой картинки, но результата нет. https://pagespeed.web.dev/report?url=https%3A%2F%2Fbizoon.com.ua%2Fdogs%2Fdog-equipment%2Foshejniki%2F&hl=ru
Ответить
2
0
13 мая 2021
А как быть с flexbox/grid? Смена order на адаптиве влияет на оценку CLS
Ответить
0
0
14 мая 2021
Artem Borovikov, Здесь нет какого-то отдельного кейса: если блоки DOM-дерева перемещаются, то это CLS. Надо смотреть ваш конкретный кейс, чтобы подсказать решение. Если order меняется после действия юзера, то у вас есть 500 мс в которые CLS не засчитается. Если просто сам, по таймеру, то лучше реализовать это через анимацию.
Ответить
0
0
Реклама
Вакансии
Архитектор сетей в защищенном исполнении
Специалист по информационной безопасности
Обсуждают сейчас
Igor Ryabushkin
6 часов
Как написать чистый код и сделать жизнь проще
Елена Гринько
8 часов
Очередной фреймворк на PHP — конкурс пет-проектов
Андрей Масленников
9 часов
Браузерная MMORPG — конкурс пет-проектов
Читают сейчас
1М
+42
Задачи по Python для начинающих от Tproger и GeekBrains
1М
+38
Всё о сортировке в Python: исчерпывающий гайд
752К
+24