Данный алгоритм является частью фактора ранжирования - Page Experience (Удобство страницы), который направлен на отслеживание качества пользовательского опыта на сайте. Core Web Vitals является одним из составных частей данного фактора. В состав данной группы сигналов также относятся:
-
Mobile Friendly
-
HTTPS
-
Better Ads Standards
-
User Expirence
Содержание:
-
Как подготовить сайт к Core Web Vitals
-
Почему так важно ускорить скорость загрузки страниц сайта
-
Основные сигналы Core Web Vitals
-
Как измерить показатели
-
Как оптимизировать сайт для быстрой загрузки — сигналы Web Vitals
-
Выводы
Почему так важно ускорить скорость загрузки страниц сайта
С развитием технологий, интернета и мобильных телефонов, люди так же адаптировались к изменениям и все больше “серфят” интернет именно с мобильных устройств. Специфика мобильного серфинга такова, что пользователь не готов долго ждать загрузки страницы или пользоваться неудобным интерфейсом и сразу покидает её. Современный пользователь очень избалован и это вполне обоснованно жесточайшей конкуренцией за клиента. Понимая это, Google решил подстегнуть владельцев сайтов к улучшению своих площадок и создал фактор ранжирования Page Experience. Core Web Vitals это первый столп, на котором стоит “Удобство страницы”.
Вот вам простая статистика, в пользу оптимизации ваших ресурсов:
|
Доля населения Украины, использующие мобильные устройства для выхода в интернет |
За 2019 год, было проведено исследования по распределению трафика на устройства. Доля составила 66% всего населения |
|
Быстрые vs медленные сайты |
Медленные сайты покидают на 70% чаще |
|
Процент потери конверсий за 1 секунду провисаний |
7% утраченных конверсий |
|
Возврат пользователей на сайт |
79% недовольных скоростью загрузки, не зайдут снова. 44% оставят негативный отзыв |
|
Скорость загрузки более 5 секунд |
Сокращение трафика на 50% |
|
Скорость работы сайта и ранжирование в поисковой выдаче |
Так как скорость загрузки, является официальным фактором ранжирования, то сайты с низкой скоростью ранжируются намного ниже своих конкурентов с хорошей скоростью. А как мы помним первая позиция имеет CTR в 28.5%. Вторая в 15.7% и далее по ниспадающей. |
Основные сигналы Core Web Vitals
-
LCP (Largest Contentful Paint) - оценивает время, за которое самый крупный контент на странице, отрисовывается для пользователя. Это может быть, баннер или другое изображение.
-
FID (First Input Delay) - оценивает время за которое пользователь может начать взаимодействовать со страницей. Например, нажать на кнопку или ссылку. Если пользователь, нажимая на что, не видит изменений, то это считается плохим пользовательским опытом.
-
CLS (Cumulative Layout Shift) - оценивает совокупное смещение макета во время загрузки страницы. Простым языком, насколько быстро элементы на странице перестанут “скакать” по экрану. В идеале, такие скачки должны быть незаметны для пользователя.
Как измерить показатели
Для проверки показателей существует большое количество инструментов и сервисов. Но я рекомендую пользоваться официальными и проверенными инструментами от самих Google:
Page Speed Insight - собирает данные из Lighthouse и CrUX и формирует из них содержательный отчет с рекомендациями по оптимизации. Оценивает конкретную страницу.
Chrome DevTools (Lighthouse) - в консоль разработчик браузера Chrome встроена возможность проверять страницы на показатели скорости загрузки. Оценивает состояние всего сайта, а не отдельно взятых страниц.
Google Search Console - не самый содержательный отчет, но зато показывает проблемные страницы на сайте.
Как оптимизировать сайт для быстрой загрузки — сигналы Web Vitals
Следует понимать, что для каждого конкретного сайта, будут свои конкретные проблемы и их решения. Вы можете опираться на рекомендации самих отчетов в инструментах. Я же приведу наиболее встречающиеся “болячки” и способы их решения:
-
CSS важный элемент страницы, который должен быть загружен, как можно быстрее. При этом зачастую большая часть CSS не используется. Иногда доходит до того, что не используется более 80% стилей!
Решение: Все используемые стили вставить в код инлайном, неиспользуемые загружать асинхронно.
-
Предварительная загрузка - это декларативный запрос на выборку, который сообщает браузеру запросить ресурс как можно скорее. Браузер устанавливает более подходящий уровень приоритета для ресурса, чтобы попытаться загрузить его раньше, не задерживая событие window.onload.
Необходимо использовать <link rel = preload>, чтобы расставить приоритеты при выборе ресурсов, которые в данный момент запрашиваются позже при загрузке страницы.
-
Для главной страницы это изображение баннера
-
Для карточек товара — основная фотография
-
Устранить ресурсы блокирующие отображение - Если ресурсы блокируют первую отрисовку страницы. Рекомендую встроить критическую часть данных JS/CSS в код HTML и отложить загрузку остальных ресурсов.
-
Необходимо минифицировать все CSS файлы.
-
Отложить неиспользуемые CSS файлы. Для этого используйте отчет Coverage в Chrome DevTools
-
Неиспользуемые CSS-стили необходимо или удалить полностью, или вынести в отдельный файл, если эти инструкции используются на других страницах
-
Для любого CSS, который не нужен для первичной отрисовки страницы используйте loadCSS, которая применит /rel="preload" и onload.
<link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'">/ -
Все CSS стили, которые нужны для первичной отрисовки страницы необходимо внедрить в коде самой страницы (inline) в head
-
Необходимо минифицировать все JS-файлы
-
Отложить загрузку неиспользуемых JS-файлов
-
-
Использовать атрибуты ширины и высоты изображения - Необходимо всегда включать атрибуты ширины и размера в изображения и видео элементы на сайте. Такой подход гарантирует, что браузер может выделять правильный объем пространства в документе во время загрузки изображения. При этом нужно в CSS-файле для всех изображений указывать ожидаемое соотношение сторон
-
Шрифты - В первую очередь плохой показатель CLS может возникать по причине FOUT (отображение стандартного текста до момента загрузки кастомного). Чтобы избежать этого явления необходимо:
-
Использовать font:display в стилях для шрифтов, например font-display: swap;
-
Параллельно использовать preload для шрифтов link rel="preload" as="font">
-
-
Пассивные прослушиватели событий - Чтобы повысить производительность при прокрутке страницы, используйте флаг “passive” для прослушивателей событий прикосновения и колеса мыши.
-
Задайте правила эффективного использования кеша для статических объектов - Благодаря долгому времени хранения кеша страница может быстрее загружаться при повторных посещениях.
Выводы
Не откладывайте оптимизацию скорости загрузки сайта в долгий ящик. Уже сейчас вы можете начать улучшать скорость работы сайта и получить с этого огромную пользу для вашего ресурса и ваших пользователей.
