#перфоманс #Лаборатория_веб_платформы
На ранжирование страниц в в Гугл-поиске влияет не только качество контента, но и хороший 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.