SEOFAQ Telegram, маркетинг и SEO Канал SEOFAQT в мессенджере Telegram

Все чатыCore Web Vitals от Google 👇 В мае 2021 Google планирует внедрить...


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...