Вот и заключительный день нашей недели Core Web Vitals. Напомню, мы рассмотрели LCP, FID, и CLS. Даже в рамках двух постов в день получилось очень поверхностно, потому что когда писали статью, она не влезала даже в 3 поста Telegram.
Давайте кратко пробежимся по оставшимся трем, которые собирает Google и выводит в Google Pagespeed Insights. Это
FCP,
INP и
TTFB. На самом деле это большая тема, и про улучшения каждого из показателей мы сделаем еще не один пост, так как и методы меняются и поведения браузеров и новые метрики также появляются.
FCP - отрисовка первого контента, это время между событием TTFB и началом отрисовки контента на странице.
до 1.8 секунд
от 1.8 до 3 секунд
более 3 секунд
Для улучшения показателя нужно снижать блокировку отрисовки. Стили делим на Critical и обычные, и inline грузим только критические, остальные подключаем асинхронно, js откладываем при помощи defer или другими методами.
INP - новый показатель, работает по тому же принципу, что и CLS, и считает данные за все время проведенное пользователем на странице, а не только при загрузке.
до 200 мс
от 200 до 300 мс
более 500 мс
Для улучшения показателя добавляем стильные скелетоны при клике на кнопку без ожидания ответа сервера. И оптимизируем сам Javscript. Разбиваем задачи на более мелкие и упрощаем. Отказываемся от поддержки устаревших браузеров.
TTFB - Время до получения первого байта от сервера. Зависит от времени выполнения скриптов, сети и нагрузки магистралей. Больше всего зависимость от времени выполнения скриптов на сервере. Чем проще задачи - тем быстрее.
до 500 мс
от 500 до 1000 мс
более 1000 мс
Для улучшения нет универсальных средств, самое простое - переехать на более быстрый хостинг, или купить сервер помощнее. Про кэширование мы писали ранее, и скоро вернемся к серии публикаций про TTFB.
На следующей неделе рассмотрим несколько практических методов для улучшения показателей производительности. Хороших выходных!
Пишите, была ли вам полезна информация этой недели?
