Совокупный (кумулятивный) сдвиг макета, или сокращенно CLS, — одна из трех метрик в проекте Google Core Web Vitals. Помимо того, что она в целом является хорошим показателем пользовательского опыта на сайте, с мая 2021 года Гугл рассматривает Core Web Vitals в качестве важного фактора ранжирования.
Хотя есть несколько элементов, которые определяют комфорт использования сайта, плохой CLS также влияет на SEO. Поэтому вы должны знать, это такое и как его улучшить WP-ресурса.
В этой статье я расскажу о кумулятивном сдвиге макета в ВордПресс и о том, как увеличить показатели CLS.
- Что такое кумулятивный сдвиг макета в WordPress?
- Какой показатель совокупного сдвига макета является хорошим в 2024 году?
- Как определить свой суммарный балл за сдвиг макета?
- Измерение CLS в лаборатории
- Измерение CLS в обычных условиях
- Как улучшить кумулятивный сдвиг макета в WordPress?
- Всегда устанавливайте размеры изображений
- Всегда устанавливайте размеры для вложений/кадров
- Зарезервируйте место для рекламы
- Устранение проблем с загрузкой шрифтов
- Будьте осторожны с динамически внедряемым контентом
- Используйте свойство CSS Transform в анимации
- Задержка JavaScript
- Заключение
- FAQ
Что такое кумулятивный сдвиг макета в WordPress?
Приходилось ли вам читать статью на сайте издателя (например, новости), а ее содержание все время уходило вниз по мере загрузки новых объявлений? Это не просто раздражает — это идеальный пример совокупного сдвига макета.
CLS — процесс, когда содержимое сайта «смещается» по мере загрузки. Вы наверняка сталкивались с этим, и это очень раздражает, поэтому Гугл призывает веб-мастеров обращать внимание на данную метрику и улучшать ее.
Кумулятивный сдвиг макета также является одним из трех индикаторов в инициативе Google Core Web Vitals.
Какой показатель совокупного сдвига макета является хорошим в 2024 году?
Чтобы понять, каков показатель CLS вашего сайта, Google предоставляет диапазон из трех возможных значений:
- Хорошо — менее 0,1.
- Требует улучшения — от 0,1 до 0,25.
- Плохо — выше 0,25.
Как определить свой суммарный балл за сдвиг макета?
Вот два важнейших способа измерения кумулятивного показателя сдвига макета.
Измерение CLS в лаборатории
Здесь рассмотрим два способа измерения CLS в лабораторных условиях.
Chrome DevTools
Большинство браузеров позволяют измерять CLS-балл веб-страницы и представлять его в прямоугольном формате. Вот как можно рассчитать его с помощью Chrome DevTools.
Перейдите в меню браузера и выберите пункт More Tools (Другие инструменты) в разделе Developer tools (Инструменты разработчика). Другой вариант — нажать Ctrl+Shift+I и выбрать панель производительности.
Посмотрите на опцию «Показатели работы веб-сайта» и нажмите кнопку перезагрузки или Ctrl Shift E, чтобы записать нужную страницу.
Задержитесь на несколько секунд и перейдите на вкладку «Сдвиг макета» рядом с «Опытом». Теперь можете просмотреть суммарный балл на вкладке «Итоги».
Еще одним лабораторным инструментом для проверки оценки CLS является Lighthouse. Давайте разберемся в нем подробнее.
Lighthouse
Lighthouse очень удобен в использовании. Вы можете получить доступ к инструменту из Google Chrome.
Чтобы воспользоваться им, зайдите в настройки браузера Хром. Перейдите в раздел «Другие инструменты», а затем выберите пункт «Инструменты разработчика».
Теперь нужно развернуть меню, нажав на «>>» и выбрав Lighthouse. Затем кликните на Analyze page load, чтобы сгенерировать отчет. Здесь можете просмотреть подробную информацию о различных важных показателях.
Измерение CLS в обычных условиях
CLS — одна из самых важных частей Core Web Vitals, отчета, который показывает производительность веб-страницы. Существует огромное количество инструментов, позволяющих измерить кумулятивный сдвиг макета вашего сайта. Далее рассмотрим два самых важных.
PageSpeed Insights
Одним из самых известных инструментов, помогающих измерить CLS, является PageSpeed Insights. Чтобы узнать производительность страницы, достаточно ввести URL-адрес и нажать на кнопку «Анализировать».
Инструмент отобразит всю оценку Core Web Vitals и проверит, соответствует ли сайт стандартам Google. По умолчанию сначала вы увидите отчет на мобильных устройствах.
Просто нажмите на десктоп, чтобы узнать оценку CLS на компьютерах. Здесь вы поймете, как различаются показатели на разных устройствах.
Чтобы увидеть отчет в деталях, нажмите на развернутый вид.
Google Search Console
Этот инструмент поможет вам сформировать отчет о главных показателях сайта, связанных с его состоянием, на основе результатов поиска.
Он позволяет просматривать данные CLS, LCP, FID и другими параметрами на мобильных устройствах и десктопах.
IMAGE
Чтобы просмотреть сводку в IMAGE, необходимо подтвердить свой URL. Когда вы попытаетесь проверить адрес, инструмент предоставит отчет, в котором перечислены все факторы, снижающие производительность сайта. Важно устранить их как можно скорее.
Как улучшить кумулятивный сдвиг макета в WordPress?
К сожалению, в отличие от улучшения LCP на ВордПресс, исправление CLS может быть немного техническим. Многие из этих правок связаны с работой в коде. Здесь трудно обойтись без программирования, но я постараюсь включить решения для плагинов, где это возможно. Давайте рассмотрим некоторые из наиболее известных способов оптимизации совокупного сдвига макета на сайтах WordPress.
Всегда устанавливайте размеры изображений
Если не установите размеры изображений в коде сайта, то картинки могут привести к смещению остального контента при загрузке.
К счастью, если добавляете их через редактор, WP автоматически сделает это (и кастомизирует адаптивные варианты с помощью атрибута srcset). Однако если вручную загружаете изображения на сайт кодом, то необходимо указать их размеры. Вы должны увидеть атрибуты height и width в HTML-файле картинки.
Например:
<img src=”https://domain.com/wp-content/uploads/2017/02/wordpress-smtp-tutorial-1-1024×874.png” alt=”SendGrid API keys” width=”1024″ height=”874″>Всегда устанавливайте размеры для вложений/кадров
Как и в случае с изображениями, вам нужно обязательно задать размеры для всех используемых/встраиваемых фреймов.
Если вставляете видео с YouTube или карту Google Maps, укажите высоту и ширину. Также рассмотрите возможность загрузки плагина перед вставкой. Это является хорошей практикой для повышения производительности.
Вы можете найти множество решений, позволяющих заменить интеграцию YouTube изображением-плейсхолдером (пока пользователь не нажмет на кнопку, чтобы воспроизвести видео). Некоторые хорошие варианты — WP Rocket или бесплатный плагин Lazy Load от команды WP Rocket.
Зарезервируйте место для рекламы
Объявления — это еще один тип встраивания. Но они заслуживают отдельного упоминания, потому что являются одним из самых больших факторов, способствующих CLS. Как мы уже говорили, вы бывали на сайте, где содержимое постоянно двигалось из-за несвоевременной загрузки рекламы.
Решение — зарезервировать место для объявлений в коде сайта. Это позволит улучшить совокупный показатель смещения макета веб-ресурса.
Например, вы хотите разместить в сайдбаре объявление с параметрами 160×600 в виде скайскрейпера. Вместо того, чтобы просто добавить код напрямую, вставьте его внутри с размерами рекламы. Таким образом, место будет зарезервировано, даже если содержимое объявления еще не загрузилось. Когда рекламный контент откроется, он не будет вызывать смещения.
Следует быть осторожным с публикацией объявлений в верхней части области просмотра посетителя. Именно такое размещение с наибольшей вероятностью вызовет смещение макета.
Устранение проблем с загрузкой шрифтов
Одна из основных проблем, связанных со смещением макета, — это загрузка кастомных шрифтов. Например, если используете шрифты из Google Fonts или Adobe Fonts, они могут вызывать данную проблему двумя способами:
- Вспышка невидимого текста (FOIT).
- Вспышка нестилизованного текста (FOUT).
По сути, проблема заключается в том, что браузер посетителя может попытаться отобразить контент до загрузки кастомного шрифта. Когда начертание откроется, он обновит стилистику текста. Это может привести к его смещению при переходе от, скажем, нестилизованного содержимого к кастомному шрифту.
Есть несколько способов решить эту проблему и улучшить CLS сайта.
Один из вариантов — предварительная загрузка важных файлов шрифтов. Это заставит браузеры посетителей немедленно открыть его, устраняя вероятность FOIT/FOUT. Однако следите, чтобы предварительно отображались только самые важные ресурсы (например, шрифт для контента над разворотом).
Слишком частое использование предварительной загрузки приведет к замедлению работы сайта.
Возможно задать список шрифтов для данного решения с помощью бесплатного плагина Autoptimize.
Для начертаний Google Fonts вы можете разместить файл локально и загружать его таким образом. Возможно кастомизировать это с помощью бесплатного плагина OMGF. Он включает хорошую функцию автоматической предварительной загрузки шрифтов, расположенных выше по тексту.
Если действительно хотите избежать неполадок, рассмотрите возможность использования системного стека начертаний. Это не только решит проблемы с загрузкой шрифтов, но и уменьшит количество HTTP-запросов, а также ускорит работу сайта. Некоторые темы, например GeneratePress, позволяют очень просто использовать системный стек.
Однако недостатком является то, что у вас гораздо меньше гибкости в отношении стиля/дизайна.
Будьте осторожны с динамически внедряемым контентом
Если вы динамически вставляете контент для таких вещей, как формы email opt-in, сопутствующий материал, уведомления GDPR и т. д., то нужно быть особенно осторожными, чтобы избежать смещения макета.
Хорошая практика заключается в том, чтобы никогда не вводить его поверх существующего содержимого, за исключением случаев, когда он появляется в результате взаимодействия с пользователем (например, если человек нажимает на кнопку).
Если вы динамически вставляете какой-то CTA-элемент, постарайтесь поместить его под записью блога, а не сверху или посередине.
Используйте свойство CSS Transform в анимации
Если составили отчет о производительности веб-страницы и обнаружили некомпозиционные анимации, это также может привести к смещению макета.
Google рекомендует использовать свойство CSS transform. Это позволит анимировать элементы на сайте, не задумываясь о смещении макета. Вот два момента, которые необходимо учитывать:
- Вместо того чтобы менять свойства высоты и ширины веб-страницы, используйте transform: scale().
- Чтобы изменить положение элементов, не исправляйте top, right, bottom или left. Вместо этого применяйте transform: translate().
В итоге использование данного свойства CSS поможет оптимизировать совокупный показатель смещения макета WordPress-сайта.
Задержка JavaScript
Задержка JavaScript откладывает сдвиги макета, происходящие из-за JS-файлов. Это приводит к оптимизации CLS.
На рынке существует множество плагинов, которые можно использовать для задержки JavaScript на сайте. Одни из самых популярных — WP Rocket, Flying Scripts, LiteSpeed Cache и др.
Обычно задерживается сторонний код и плагины, которые загружаются ниже сгиба, например, комментарии или инструменты обмена в соцсетях.
Лучшее, что вы можете сделать, — это зайти в PageSpeed Insights, посмотреть отчет и при необходимости удалить JS-файлы.
Заключение
С помощью советов, приведенных в этой статье, вы сможете улучшить показатель CLS на своем WP-сайте и попасть в сферу внимания Google.
Конечно, кумулятивный сдвиг макета — это всего лишь одна из трех метрик в Core Web Vitals. Вам нужно обратить внимание и на другие.
