Перевод статьи Даниэля Роэ от 25 февраля 2021 г.
Готовы ли вы к добавлению основных интернет-показателей к сигналам поиска, сообщающим об удобстве страницы? С тех пор как Google анонсировал очередные нововведения, я нашел множество ресурсов и инструментов, предназначенных для улучшения основных интернет-показателей (Core Web Vitals — CWV). Тем не менее лишь очень немногие инструменты предоставляют подробную информацию о том, как определить и улучшить один из трех сигналов основных интернет-показателей. Речь идет о визуальной стабильности (Visual Stability), также известной как кумулятивный сдвиг макета (Cumulative Layout Shift — CLS). Как объясняет Google, «сдвиг макета происходит каждый раз, когда видимый элемент меняет свое положение от одного отображаемого кадра к следующему». CLS измеряет совокупный эффект всех неожиданных сдвигов макета на конкретной странице.
Типичный пример, который используется для демонстрации CLS и того, как улучшить данный показатель, — это реклама. Поскольку рекламные объявления часто подаются со сторонних сайтов, они загружаются после блоков контента страницы и элементов навигации и при отображении сдвигают контент вниз или в сторону. Однако, если на вашем сайте отсутствуют блоки контента для рекламы, это вовсе не повод расслабляться, когда дело касается CLS! Давайте разберемся, как определить элементы, ухудшающие показатель CLS, и как исправить сдвиги макета.
Поиск страниц с плохим CLS
Определение сдвигов макета
Существует несколько вариантов поиска страниц с плохим CLS, которые основаны как на данных имитации загрузки страницы, так и на наблюдениях реальных пользователей (их еще называют данными наблюдений). Здесь важно уяснить разницу.
Данные имитации загрузки страницы доступны в Lighthouse, Page Speed Insights (PSI) и Chrome DevTools. В этой статье все примеры созданы с помощью PSI и Chrome DevTools. Однако обычно я предпочитаю запускать массовые отчеты по страницам, используя PSI API с нашим скриптом приложений Google Sheets или Screaming Frog.
Данные наблюдений доступны в отчете Chrome User Experience (CrUX). Эти данные служат источником для основных интернет-показателей в Google Search Console, и их можно обнаружить в разделе «Данные наблюдений» в Page Speed Insights, а также используя удобное расширение Chrome Core SERP Vitals от defaced.dev. Для получения этих данных исследуемая страница должна иметь «достаточное количество отдельных образцов, которые обеспечивают репрезентативное анонимное представление о производительности URL-адреса» за последние 28 дней. Так заявляет Google. Джон Мюллер из Google рекомендует использовать данные имитации загрузки страницы для более быстрого мониторинга.. Несмотря на то что для поиска страниц с проблемным CLS я буду использовать расширение Core SERP Vitals, мне потребуются данные имитации загрузки страницы, чтобы обнаружить немедленные изменения. Ниже на снимке экрана видно, что данные могут значительно отличаться.
Используя расширение Chrome Core SERP Vitals (и осуществляя поиск моего любимого горячего напитка), я разыскал несколько возможных кандидатов для решения проблемы сдвига макета. Последний результат на картинке имеет показатель CLS, равный 1.0.
Рисунок 1. Расширение Chrome Core SERP Vitals
Расширение использует данные наблюдений, однако нужно взглянуть и на данные имитации загрузки страницы, чтобы убедиться в эффективности наших усилий. Я введу URL-адрес в инструменте PSI, чтобы увидеть данные имитации загрузки страницы.
Рисунок 2. Данные имитации загрузки страницы
Core SERP Vitals использует мобильные данные, которые, как мы видим, соответствуют показателю 1 в разделе данных наблюдений отчета PSI. Хотя показатель имитации загрузки страницы не так высок, как показатель данных наблюдений, результат выше 0,25 все еще считается «плохим».
Рисунок 3. Показатель имитации загрузки страницы
Запуск отчета о производительности в Chrome DevTools
Теперь, когда у нас есть конкретная страница для оценки сдвига макета, давайте откроем Chrome DevTools.
Загрузите URL-адрес в браузере Chrome. Нажмите правую кнопку мыши и выберите «Просмотреть код». В DevTools откроется вкладка Elements. Поскольку мы используем мобильные данные, нужно выбрать в DevTools имитацию мобильного устройства. Для этого нажмите на значок слева от меню инструментов с изображением планшета и смартфона.
Рисунок 4. Вкладка Elements
В верхней части реальной веб-страницы выберите iPhone X, чтобы увеличить рамку отображения. Рамка помогает нам обнаружить сдвиг, поэтому увеличенное окно просмотра упростит нашу задачу.
Рисунок 5. Выбор iPhone Xs
Теперь перейдем на вкладку Performance в DevTools. Убедитесь, что выбран параметр Screenshots.
Рисунок 6. Вкладка Performance
Параметр Web Vitals был добавлен в DevTools в Chrome 88, но данные о сдвиге макета в Chrome 84 предоставляют нам более подробную информацию. Вы увидите, что отчет Performance с несколькими разделами может выглядеть немного пугающе, поэтому я не буду дополнительно использовать параметр Web Vitals. Также я бы рекомендовал открывать DevTools в отдельном окне. Для этого выберите значок с тремя точками справа от панели инструментов DevTools.
Начните новую запись данных о производительности, нажав кнопку перезагрузки или Ctrl + Shift + E (в Windows). Запись займет несколько секунд, чтобы перезагрузить и сформировать отчет. Появится всплывающее окно с указанием текущего процесса и оставшегося времени. По завершении вкладка Performance будет выглядеть очень красочно и, как я уже говорил, немного пугающе.
Рисунок 7. Отчет
Интерпретация отчета о производительности
Сначала давайте рассмотрим раздел Experience, в котором сдвиги макета показаны красными блоками. При выборе конкретного блока вкладка Summary в нижней части окна Performance отображает подробную информацию о сдвиге макета.
Рисунок 8. Раздел Experience
О первом сдвиге макета беспокоиться не нужно. Помните, что CLS — это сумма показателей, основанная на неожиданных сдвигах. Первый сдвиг макета указывает, что его причиной стал пользовательский ввод. Такие ожидаемые сдвиги не учитываются в CLS.
Рисунок 9. Первый сдвиг
А вот второй сдвиг макета является неожиданным, поскольку переменная had recent input («недавний ввод») имеет значение No. Так как этот сдвиг добавляет только 0,004 к показателю CLS, он не представляет большой проблемы. Другое дело, если бы таких сдвигов было множество, поскольку, как мы помним, CLS — это совокупный результат.
Рисунок 10. Второй сдвиг
Однако последний блок сдвига макета требует особого внимания. Мы видим, что он добавляет 0,23 к показателю CLS, что соответствует диапазону needs improvement («нуждается в улучшении») от 0,1 до 0,25. Давайте выберем элемент Related Node и просмотрим его на вкладке Elements в DevTools. Это поможет нам отследить перемещение элемента.
Рисунок 11. Элемент Related Node
Теперь, когда мы знаем, что имел место сдвиг слогана Embracing the simplicity of natural living and real food, можно проверить кадры на вкладке Performance и увидеть, что именно произошло.
Переместите слайдер скриншота, чтобы «увеличить» этот раздел сдвига макета на вкладке Performance. Начните увеличение раздела непосредственно перед блоком сдвига макета. Если у вашей мыши есть колесико, вы также можете использовать его для увеличения. Затем вы можете провести курсором по кадрам в верхней части профиля Performance, чтобы увидеть, как произошел сдвиг слогана. Подсказка: если Related Node в сдвиге макета находится «ниже сгиба», вы можете прокрутить вниз до нужного элемента и повторно запустить профиль Performance, чтобы зафиксировать его в кадрах.
Благодаря скриншотам мы видим, что во время сдвига макета блок кнопок отодвигает слоган вверх.
Исправление сдвигов макета
Чтобы исправить сдвиг макета, необходимо понять, что происходит с блоком кнопок. Это можно проверить на вкладке Elements.
Рисунок 12. Вкладка Elements
Поскольку высота не указана на вкладке Computed, этот параметр не применяется к элементу напрямую, а определяется высотой кнопок.
Вместо того чтобы полагаться на загрузки отдельных кнопок для определения высоты элемента, я добавлю минимальную высоту, чтобы понять, как это повлияет на загрузку и сдвиг макета.
Чтобы жестко закодировать это изменение, нужно извлечь полный HTML-код веб-сайта в редактор и локально обновить его. Затем требуется разместить локальные файлы на общедоступном сервере, чтобы сделать их доступными для PSI и проверить влияние изменений на показатель CLS. В этом нам поможет сервис ngrok. Если вы хотите узнать, как работать в ngrok, у Google есть хорошее руководство. Также вы должны иметь навыки работы с командной строкой, поэтому ознакомьтесь с моими советами.
Итак, давайте посмотрим на обновленную веб-страницу. На вкладке Styles видно, что теперь минимальная высота элемента div.wprm-recipe-snippets составляет 200 пикселей.
Рисунок 13. Минимальная высота элемента div.wprm-recipe-snippets
Как это влияет на сдвиг макета? Мы видим, что сдвиг элемента span.tagline больше не происходит.
А что говорит имитация загрузки страницы?
Рисунок 14. Имитация загрузки страницы wprm-recipe-snippets
Мы улучшили показатель CLS с 0,255 до 0,031, изменив всего одну декларацию CSS! Примечание: другие показатели производительности будут сильно отличаться от исходного отчета PSI, поскольку он получен с локального сервера.
Многие, вероятно, подумают, что мне просто повезло, или этот метод работает только для определенных типов веб-сайтов. Чтобы развеять все сомнения, я применил аналогичный процесс к сайту электронной коммерции.
Рисунок 15. Сайт электронной коммерции
Первоначальный показатель CLS при имитации загрузки этой страницы составил 0,83.
Используя описанный метод проверки сдвигов макета в отчете Performance, я обнаружил, что на данной странице сдвиг вызывает рейтинг в виде звезд, что показано на видео ниже.
Я добавил минимальную высоту для элементов класса stamped-product-reviews-badge.
Рисунок 16. Минимальная высота для элементов класса stamped-product-reviews-badge
И опять мы смогли исправить сдвиг макета, изменив лишь одну декларацию CSS. Показатель CLS улучшился с 0,83 до 0,029!
Рисунок 17. Улучшение показателя CLS
Хотя в этих двух примерах мы использовали установку минимальной высоты элементов, другой распространенной причиной сдвигов макета являются веб-шрифты, которые могут изменять высоту или ширину блоков контента. У одного нашего клиента плохие показатели CLS на сайте электронной коммерции были вызваны именно загрузкой веб-шрифтов. Среди улучшений, которые мы внесли для исправления CLS, были:
- Замена иконочных шрифтов на SVG
- Обновление отображения шрифтов с помощью font-display. Обратите внимание: если вы разрешите отображение невидимого текста (FOIT), то в разделе PSI «Диагностика» появится соответствующее уведомление. Однако раздел «Диагностика» не влияет напрямую на оценку производительности.
Даже если у вас нет навыков программирования, чтобы исправить эти сдвиги макета, обязательно познакомьтесь поближе с отчетом Performance. Если я за пару дней улучшил показатели двух незнакомых сайтов, представьте, каких успехов вы сможете добиться до мая, когда новые изменения вступят в силу! Кстати сказать, пока я проводил исследования и готовил эту публикацию, сайты из наших примеров уже обновили проблемные элементы. Если они смогли, значит, сможете и вы!
P.s. Подписывайтесь на наш телеграм-канал t.me/seoantteam, чтобы первыми узнавать о выходе новых полезных материалов.
