На ранжирование страниц в в Гугл-поиске влияет не только качество контента, но и хороший UX. По мнению Гугла его можно оценить по трём метрикам:

• время загрузки сайта;
• время до возможности взаимодействовать с интерактивнымм элементами на сайте;
• визуальная «стабильность» интерфейса сайта.

Эти метрики объединили под общим названием Web Vitals. Теперь про каждую подробнее.

Время загрузки сайта (LCP, Largest Contentful Paint)

Дословно — время до отрисовки самого большого видимого контентного куска. Это может быть картинка, видео или текст. То есть это время с момента перехода на страницу и до ощущения, что всё загрузилось и до возможности начать взаимодействие со страницей.

Хорошо, когда это время 2,5 секунды или меньше; 2,5-4 секунды — норм, но надо улучшать; больше 4 секунд — плохо, пользователь не дождётся и уйдёт.

На эту метрику влияют:

➡️ Размер загружаемых ресурсов

• нужно сжимать картинки и остальную статику саму по себе (минификация) и на сервере (gzip, brotli);
• нужно уменьшать размер блочащих рендер ресурсов — JS и CSS — разделять их на мелкие бандлы по страницам, а реиспользуемый код выносить в небольшие отдельные модули.

➡️ Способ загрузки ресурсов

• картинки нужно загружать «лениво», то есть только в момент, когда они становятся непосредственно видимы;
• сторонние скрипты (аналитика, реклама, виджеты) нужно загружать асинхронно, вне основного потока.

Время до интерактивности (FID, First Input Delay)

Это когда при взаимодействии с интерактивными элементами сайта не возникает большой задержки. Например, при клике на элементы формы, ссылки, выпадашки.

Если задержки меньше 100 милисекунд, то человеком это воспринимается нормально; 100-300мс — может казаться тормознутым; больше 300мс — явно тормозит, плохо.

На эту метрику влияет всё, что может «забивать» основной поток работы браузерного движка:

• долгие таски в JS-коде;
• неоптимальное использование операций, вызывающие перерасчёт лейаута страницы (список операций);
• большое количество DOM-нод на странице.

Визуальная «стабильность» интерфейса (CLS, Cumulative Layout Shift)

Дословно — сдвиги лейаута при загрузке. Если при загрузке страница «прыгает», элементы перескакивают с места не место, загружающиеся элементы сдвигают контент, то это плохо влияет на пользовательский опыт.

➡️ Чаще всего сдвиги могут вызывать подгружающиеся картинки, видео, реклама. Фиксится заданием фиксированных размеров картинкам и контейнерам, в которые вставляет реклама.

➡️ Если сдвиги происходят после отрабатывания скриптов, то тоже можно поставить «подпорки» в CSS, которые не допустят сдвигов.

➡️ Если контент сдвигается при подгрузке и применении кастомного шрифта, то можно изменить способ показа шрифта на font-display: optional, то есть скрывать текст и задерживать «мигание» до 100мс, пока не загрузится шрифт. Также можно использовать формат шрифтов woff2, вырезать ненужные символы и предзагружать шрифты.

⚡️ Как измерять в продакшене

В сервисе PageSpeed Insight или webpagetest.

💻 Как измерять при разработке

Локально можно воспользоваться сервисом Lighthouse или расширением Web Vitals для Хрома. Также посдсветка Web Vitals появилась во вкладке “Performance” в Dev Tools 88-й версии Хрома.

Так как метрика First Input Delay (FID) не может быть достоверно измерена локально, то её можно «проксировать» другой метрикой — Total Blocking Time (TBT). Это время с начала отрисовки страницы до момента её полной готовности к взаимодействию. Улучшение TBT приведёт к улучшению реальной пользовательской FID.