Google подталкивает веб-мастеров к реализации всех мер, необходимых для повышения скорости загрузки страниц. Скорость загрузки страницы вашего веб-сайта измеряется на основе нескольких параметров, как вы можете видеть в инструменте Google PageSpeed Insights. Совокупное смещение макета (CLS) — один из критериев измерения скорости Core Web Vital. Это важный фактор не только для повышения скорости, но и для лучшего взаимодействия с пользователем. В этой статье мы расскажем о различных причинах проблем с CLS и о том, как исправить кумулятивную ошибку смещения макета в WordPress.
Что такое кумулятивный сдвиг макета?
Прежде чем читать дальше, необходимо понять, что такое CLS. Проще говоря, это изменение макета контента, которое ухудшает взаимодействие с пользователем. Например, вы собираетесь нажать кнопку на странице, и вдруг вверху загружается изображение баннера, которое нажимает кнопку вниз. В конечном итоге вы непреднамеренно щелкнете по изображению, что может привести к переходу на другую страницу. Это очень плохой пользовательский опыт, и у Google есть хорошее объяснение в этой статье, которую вы можете прочитать дальше.
Связанный: Как включить ленивую загрузку изображений в Google Chrome?
Проверка кумулятивной ошибки смещения макета
Откройте инструмент Google PageSpeed Insights (PSI) и проверьте скорость своей веб-страницы. Вы можете проверить полевые данные или сводку по происхождению, чтобы убедиться, что на вашем сайте существует кумулятивная проблема смещения макета. Вы можете навести указатель мыши на индикатор выполнения, чтобы узнать совокупный процент загрузки, при котором существует проблема на странице/сайте.
Чтобы найти элементы, вызывающие проблемы, прокрутите вниз до раздела диагностики и проверьте «Избегайте больших сдвигов макета». Здесь Google покажет список элементов, вызывающих изменение макета на тестируемой странице.
Проверьте подробности в Google Search Console
Вы можете просмотреть URL-адреса страниц с проблемой CLS в своей учетной записи Google Search Console. После входа в свою учетную запись перейдите в раздел «Core Web Vitals» в разделе «Улучшения». Вы можете найти отчеты как для мобильных устройств, так и для настольных компьютеров, чтобы просмотреть страницы с «Проблема CLS: более 0,25 (мобильный) / (рабочий стол)».
Нажмите на проблему, чтобы просмотреть образец URL-адреса на вашем сайте, затронутом проблемой CLS, и среднее время CLS. Google будет рассматривать CLS как проблему в соответствии с таблицей ниже:
| Хороший | Требуется улучшение | Бедный |
| от 0,1 до 0,25 с | >0,25 с |
Таким образом, вы должны стремиться сократить время CLS менее чем на 0,25 секунды, чтобы сделать этот зеленый/желтый в инструменте PSI и удалить ошибки из вашей учетной записи Search Console.
Исправить кумулятивную ошибку смещения макета в WordPress
Вот некоторые из факторов, которые могут вызвать кумулятивную задержку смены макета на сайте WordPress. Давайте подробно объясним каждую проблему и возможные решения.
1. Оптимизация доставки CSS
Как вы видите на приведенном выше снимке экрана «Избегайте больших сдвигов макета», первый элемент — «