Core Web Vitals от Google 👇 В мае 2021 Google планирует внедрить...
84
Core Web Vitals от Google 👇
В мае 2021 Google планирует внедрить новые сигналы оценки качества страниц.
Largest Contentful Paint (LCP) — скорость загрузки страницы и визуальных элементов. Хороший показатель – до 2,5 с.
First Input Delay (FID) — насколько быстро сайт доступен к взаимодействию после загрузки. Оптимальный показатель до 100 мс.
Cumulative Layout Shift (CLS) — скорость визуальной стабилизации, насколько быстро всё становится на свои места. Оптимальный показатель меньше 0,1.
Что нужно знать?
Показатели будут рассчитываться на основе просмотров в Chrome, то есть не обязательно только для индексируемых страниц. Для учёта планируется брать 75% страниц ресурса. Метрики вряд ли станут основным фактором ранжирования, но могут стать основными показателями для оценки пользовательского опыта.
Что сделать?
- выгрузить из систем статистики наиболее посещаемые страницы ресурса
- сгруппировать их по типам (листинг, статья, товар, профиль и так далее)
- проверить и проработать каждый тип страниц.
Что проработать?
Джун-левел:
- для изображений в шаблонах страниц задать атрибуты width и height. Для всех, включая лого, иконки соцсетей и т.п.
- на внешние ссылки добавить атрибуты rel="noopener" или rel="noreferrer"
- проверить размер шрифтов и увеличить видимые тексты минимум до 12px (или 1em)
Мидл-левел:
- сделать всё джуновское
- статически резервировать места под блоки, отрисовываемые js (сразу указываем для нужного блока width и height)
- минимизировать (убрать ненужное) и минифицировать (сжать всё остальное) css и js файлы
- добавить встроенный критический css в <head>
- для некритических css использовать <link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'">
- в css для шрифтов использовать атрибут font-display: optional
- отложить css и js ниже по DOM, использовать для js атрибуты async или defer
Сеньор-левел:
- всё вышеперечисленное
- использовать web worker для запуска js в фоне
- использовать динамический импорт js
В помощь:
- справка по Core Web Vitals: https://web.dev/vitals/
- проверка исторических данных CWV: https://treo.sh/sitespeed
- web worker: https://developer.mozilla.org/en-US/docs/Web/API/Worker
- импорт js: https://caniuse.com/#feat=es6-module-dynamic-import
- минификация: https://ruhighload.com/%D0%9C%D0%B8%D0%BD%D0%B8%D1%84%D0%B8%D0%BA%D0%B0%D1%86%D0%B8%D1%8F+js%2Fcss%2Fhtml
Источник новости https://t.me/ecom_seo/22...

