Несмотря на наличие высококачественного контента и бесчисленных обратных ссылок, сайт может не попасть первое место в выдаче, если он не обеспечивает положительного опыта взаимодействия пользователя со страницей. В мае 2020 года Google анонсировала Web Vitals - набор показателей для измерения скорости и пользовательского опыта веб-сайтов. В рамках этих веб-показателей существует подмножество показателей, называемых Core Web Vitals – основные интернет-показатели. Это набор ориентированных на пользователя метрик, каждая из которых представляет отдельный аспект пользовательского опыта.
С мая 2021 году Google будет использовать эти новые показатели для ранжирования сайтов.
Что такое Core Web Vitals?
Core Web Vitals - это набор сигналов, который измеряет качество загрузки, интерактивность и визуальную стабильность содержимого страницы.
Основные компоненты Core Web Vitals:
- LCP (Отрисовка самого крупного контента): измеряет время, необходимое странице для загрузки ее основного содержимого. LCP должен быть ниже 2,5 секунд.
- FID (Задержка первого ввода) – измеряет отзывчивость страниц, т.е. учитывает время, затраченное пользователями для совершения первого действия на вашей странице (заполнение поля, например). FID должен быть ниже 100 мс.
- CLS (Совокупное смещение макета) – определяет визуальную стабильность видимого содержимого страницы. CLS должен быть ниже 0,1 с.
Оценить параметры Core Web Vitals можно с помощью инструмента Page Speed Insights.
В таблице ниже приведены показатели хороших, нуждающихся в улучшении и плохих параметров Core Web Vitals:
|
Показатель |
Хорошо |
Можно улучшить |
Плохо |
|
FID |
до 0, 100 мс |
100 - 300 мс |
более 300 мс |
|
LCP |
до 0, 2500 |
2500 – 4000 мс |
более 4000 мс |
|
CLS |
до 0,1 |
0.1 - 0.25 |
более 0.25 |
Вот шесть шагов по улучшению показателей Core Web Vitals.
1. Оптимизация скорости загрузки изображений
Для любого сайта большие изображения часто являются самым тяжелым контентом. По данным сайта HTTP Archive, изображения составляют в среднем 21% от общего веса веб-страницы. Оптимизация изображений обеспечивает лучший пользовательский опыт, более быстрое время загрузки страниц и дополнительные возможности ранжирования.
Вот несколько способов оптимизации изображений:
- Используйте CDN: CDN – это сеть серверов, которая специализируется на оптимизации, преобразовании и доставке изображений. Серверы CDN географически расположены так, чтобы максимально сократить время ответа сайта пользователю.
- Используйте формат WebP: формат изображений, одобренный Google и обеспечивающий сжатие изображений как с потерями, так и без потерь. Он может уменьшить размер изображения до 34% по сравнению с изображениями JPEG и PNG.
- Ленивая загрузка LazyLoad позволяет отложить загрузку картинок для повышения производительности и экономии системных ресурсов. При загрузке страницы отображается изображение-заглушка, которое заменяется полноразмерным при прокрутке.
2. Оптимизация JavaScript и CSS
Уменьшение размера файлов JavaScript и таблиц стилей CSS значительно влияет на время загрузки страницы.
Вот три способа оптимизации JavaScript и CSS для более быстрых веб-сайтов.
- Сократите ресурсы: вы можете вручную минимизировать файлы JS и CSS, удалив пробелы, комментарии и символы новых строк. Однако большой сайт с длинными файлами потребует установки плагинов. Два мощных плагина для пользователей WordPress - это Fast Velocity Minify и Autoptimize.
- Уменьшите блокировку рендеринга: сценарии JavaScript и CSS, блокирующие рендеринг, замедляют работу ваших веб-страниц. Для начала используйте PageSpeed Insights, чтобы определить, какие сценарии вызывают проблемы. Далее, используйте плагины, такие как WP Rocket, JCH Optimize или Speed Booster Pack, чтобы удалить блокирующие рендеринг JavaScript и CSS.
- Поместите CSS вверху в <head>, а JS внизу: это позволяет браузеру загружать файл CSS до загрузки остальной части страницы. Если вы сделаете наоборот, пользователи будут видеть пустую страницу до тех пор, пока JavaScript не завершит загрузку.
3. Оптимизируйте ключевые страницы сайта для мобильных устройств
Согласно данным портала Statista.com в 3 квартале 2020 года мобильные устройства генерировали 50,81% глобального трафика веб-сайтов.
Вот два основных способа оценить удобство использования вашего сайта на мобильных устройствах.
- Mobile Usability Report - отчет об удобстве использования мобильных устройств в Google Search Console. В этом отчете будут отмечены такие проблемы, как несоответствие содержимого экрану и слишком мелкий текст, а также показан список URL-адресов для каждой проблемы.
- Google Mobile-Friendly Test - хороший способ выборочной проверки отдельных страниц на мобильность. Сайт часто не проходит тест на мобильность, когда ссылки расположены слишком близко друг к другу, текст слишком мелкий и неудобен для чтения, а mobile viewport не настроен.
4. Оптимизируйте безопасность вашего сайта
Google уделяет большое внимание безопасности и удалению потенциально опасных сайтов из результатов поиска. Основные проблемы безопасности возникают у сайтов, содержащих вредоносный или сомнительный контент. Это могут быть вирусы, шпионские программы, фишинг или ложная информация. Страницы с проблемами безопасности отображаются с предупреждающей меткой в результатах поиска, когда пользователь пытается их посетить.
Один из лучших способов проверить, есть ли на вашем сайте проблемы, которые могут подвергнуть риску ваших пользователей - это использовать отчет о проблемах безопасности в Google Search Console. Он также содержит инструкции о том, как устранить проблему.
5. Оптимизируйте шрифты
Шрифты - это большие файлы, для загрузки которых требуется время. Задержка загрузки шрифтов приводит к задержке отображения текста. Это увеличивает показатель LCP. Чтобы устранить эту проблему, вы можете выполнить следующие действия:
- Загружайте только нужные компоненты шрифта, а не все наборы символов подряд.
- Избегайте невидимого текста во время загрузки шрифта: вы можете использовать font-display - это свойство CSS, которое сообщает браузеру, что текст, использующий этот шрифт, должен немедленно отображаться с использованием системного шрифта.
- Предварительная загрузка веб-шрифта: с её помощью можно сообщиить браузеру, что важно загрузить шрифт в первую очередь. Используйте <link rel="preload">, чтобы инициировать запрос на WebFont в начале пути отрисовки веб-страницы.
6. Укажите размеры изображений и видео
Убедитесь что для всех элементов изображений или видео указана их ширина и высота. Вы можете просто установить ширину и браузер автоматически рассчитает высоту. Никаких изменений макета не произойдет, так как браузер вычисляет соотношение сторон изображения прежде чем оно загрузится.
Итог
Важно своевременно начать подготовку вашего сайта к предстоящим изменениям. Используйте вышеприведенные шесть шагов, чтобы улучшить эти основные показатели Core Web Vitals чтобы предложить вашим посетителям лучший опыт взаимодействия с сайтом.