Уже давно была одна стойкая, раздражающая проблема, которую сложно было правильно измерить, пока Google не вывел её в топ-приоритетов: Cumulative Layout Shift (CLS) - «кумулятивное смещение макета». Проще говоря, это когда вы пытаетесь кликнуть на кнопку, а страница внезапно «дёргается», и вы попадаете не туда.
В 2020 году CLS стал одним из ключевых Core Web Vitals. Для пользователя это - фрустрация и ошибки. Для поисковика - сигнал о плохом пользовательском опыте. Для нас, как для продуктовой компании, продающей софт для оптимизации ПК, иметь сайты с высоким CLS было бы лицемерием. Мы должны быть эталоном.
И вот как мы решили вопрос со снижением CLS до почти нуля на 2 наших главных ресурсах - auslogics.com и сайте дочернего бренда.
Что заставляло макет «прыгать»?
Аудит с помощью Lighthouse и веб-инспектора выявил 3 главных виновников:
- Изображения и видео без размеров. Логично, что когда в коде для картинки или видео не указаны атрибуты width и height, браузер не знает, сколько места зарезервировать под них. Сначала он отрисовывает страницу без них, а когда они загружаются - резко сдвигает весь контент вниз, чтобы освободить место.
- Динамически встраиваемый контент. Рекламные баннеры, виджеты обратной связи, iframe с формами подписки, которые загружаются асинхронно. Они появляются непредсказуемо и отталкивают всё под собой.
- Веб-шрифты, вызывающие FOIT/FOUT. Пока загружается красивый фирменный шрифт, браузер либо не показывает текст вообще (Flash of Invisible Text), либо показывает его запасным шрифтом, а потом резко переключается. Эта смена шрифта может изменить высоту строк и сдвинуть элементы.
Система жёстких правил для фронтенда
Мы внедрили в рабочий процесс команды разработки и контент-менеджеров ряд обязательных правил.
Контроль за размерами всех медиа-элементов.
Для всех без исключения изображений в статьях, на главной, в каталогах продуктов теперь обязательно указываются width и height в HTML. Более того, мы перешли на использование современного атрибута CSS aspect-ratio. Например: style=»aspect-ratio: 16/9;». Это позволяет браузеру рассчитать высоту, зная только ширину и пропорцию, даже если само изображение ещё не загрузилось.
Для всех видео и iframe (например, YouTube-видео в блоге) мы также фиксируем размеры контейнера.
Резервирование места для динамического контента.
Мы проанализировали все сторонние виджеты. Для каждого мы заранее создали в вёрстке контейнер фиксированной высоты. Даже если виджет (например, чат-бот) загрузится с задержкой, он не сдвинет уже отрисованный контент, а просто появится в отведённой для него «нише».
Для рекламных баннеров договорились с партнёрами о стандартных размерах и также резервируем под них блоки.
Оптимизация работы со шрифтами.
Мы применили стратегию font-display: swap; в CSS. Это директива браузеру: «Сразу покажи текст системным шрифтом, а как загрузится кастомный - плавно замени». Это не убирает сдвиг полностью, но делает его менее резким.
Пошли дальше и для ключевых заголовков начали использовать самый прогрессивный метод - предзагрузку критических веб-шрифтов с помощью <link rel=»preload»>. Это гарантирует, что шрифт для H1 будет готов почти одновременно с HTML.
Культура «стабильности выше всего» в команде.
Каждое изменение на сайте - новая статья, обновление виджета, A/B-тест - теперь проходит обязательную проверку на «дёргание». Для этого мы создали простой чек-лист в Confluence и внедрили автоматические тесты в пайплайн разработки, которые замеряют CLS перед деплоем.
Результаты
Через месяц системной работы мы увидели в Search Console:
- CLS для ключевых страниц auslogics.com и сайта дочернего бренда компании стабильно ниже 0.1 (зелёная зона, «хорошо»). На многих страницах - практически 0.
- Страницы перестали «жить своей жизнью» после загрузки. Они отрисовываются раз и навсегда. Кликать по кнопкам «Скачать» стало предсказуемо и приятно.
- Когда мы рассказываем пользователям, как наш софт оптимизирует их ПК, мы с чистой совестью можем говорить, что наши собственные сайты - образец технического совершенства. Не говорим, правда, зато и вопросов у пользователей не возникает.
Главное:
Борьба за CLS - это не просто техническая «чекбокс-задача». Это кульминация философии, которую мы продвигали с первого дня: уважение к вниманию и времени пользователя. Мы убрали не просто миллисекунды, мы убрали разочарование и неуверенность.
Эта суперзадача показала, что настоящая производительность - куда больше, чем просто скорость и адаптивность. Это прежде всего стабильность и предсказуемость. И это именно те качества, которые мы хотим ассоциировать с нашими продуктами и нашим брендом. Победа над «прыгающим» контентом стала для нас не просто SEO-успехом, а важным шагом в построении безупречного цифрового опыта.
