FID — First Input Delay — Время задержки до первого взаимодействия (клик по кнопкам/ссылкам, прокрутка страницы, тд). Это один из основных параметров Google Core Web Vitals — нового фактора оценки качества ресурса.
Возможно, в ситуации, когда вы впервые на сайте, FID не так важен (в отличие от CLS, LCP), так как вы все равно еще не успели сориентироваться, какие функции предлагает сайт. Но когда вы частый гость и зашли выполнить определенное действие (купить товар, воспользоваться поиском, позвонить кликнув на номер телефона с мобильного устройства, …), то время готовности сайта к взаимодействию является критичным.
Оптимизация
1 — Устраните JavaScript код блокирующий отрисовку. В служебной секции HEAD вашего HTML-документа должны быть только критичные для работы/отрисовки страницы сайта скрипты. Счетчики аналитики, скрипты коллтрекинга, сквозная аналитика, отложенная загрузка изображений и др. клиентские не интересуют посетителя и не должны мешать быстрому доступу к возможностям сайта.
2 — Разбивайте большие задачи на несколько подзадач. Основной поток работы браузера не должен блокироваться более чем на 50 миллисекунд. Если у вас есть большие задачи, то имеет смысл разбить их на части, чтобы нужный функционал подгружался непосредственно перед его использованием, а не при загрузке каждой страницы.
3 — Следите за размером подгружаемых библиотек. Нетрудно догадаться, что чем больше js-кода необходимо загрузить и проанализировать браузеру, тем дольше он будет блокировать основной поток отрисовки страницы и тем больше будет FID. Нам часто приходится видеть как в списках приоритетных библиотек оказываются:
- d3 (264kb) — если ваши графики находятся за пределами «первого экрана», перемещаем код ближе к footer или еще лучше загружаем непосредственно перед показом графика.
- jquery (90kb), JqueryUI — одна из самых популярных js-библиотек, но ее точно не стоит включать в первый эшелон, тем более если она нужна только для обработки единственного события (а точнее вообще ее использовать, в тех случаях, когда прекрасно можно обойтись 1-2 строчками чистого JS-кода).
- Masked input (4kb) — «маска» для поля телефон.
- Список примеров бесконечен: SWFObject, Moderniz, Moments, Underscore, Select2, Lodash, Isotope, Slick, Lightbox, Fancybox, …
4 — Сторонние (Third-party script) скрипты. Да, речь и Google Analytics, Google Tag Manager, Яндекс метрике. Эти скрипты не кешируются, загружаются с перегруженных обращениями серверов. В некоторых случаях браузер может принять решение отдать наибольший приоритет сторонним скриптам, в ущерб собственным, поэтому важно позаботиться о приоритезации заранее.
Возможно вам также будет интересно, что это не единственные инструменты анализа трафика на сайте. Существует как минимум 2 варианта решения этого вопроса:
- Так называемые self-hosted системы, например Matomo, когда скрипты загружаются с вашего сервера, что происходит в разы быстрее и сами данные аналитики хранятся на ваших серверах, без доступа третьих лиц.
- Серверные инструменты веб-аналитики, например: awstats, webalizer, analog, goAccess. Их принцип работы прост, они берут данные из журналов веб-сервера и не требуют установки на сайт никаких скриптов. Да, какие-то отчеты вам будут недоступны (карты внимания, скролла, виртуальные цели), но это не проблема, если вы ими не пользуетесь 🙂
5 — Используйте web workers. Современные браузеры дают массу возможностей разработчикам. Одна из них — фоновое выполнение задач, без ущерба основному потоку работы браузера. Они также поддерживают сетевые запросы. Ну правда ведь круто? Среди прочих сценариев использования web workers есть как раз предварительная загрузка медиа-контента и любых других ресурсов. То, что нужно!
6 — Отслеживайте неиспользуемый код. Эта рекомендация относится ко всем способам оптимизации Web Core Vitals, но в случае с javaScript она особенно актуальна, так как количество библиотек и наследуемых зависимостей постоянно растет, что неизбежно приводит к снижению производительности.
Нужна профессиональная техническая поддержка для сайта?
Звоните 8 (800) 350-81-86
Наши эксперты в области программирования оперативно решат любую задачу. Создавать уникальные технические решения с пользой для бизнеса — это то что мы умеем и внедряем регулярно.
Оставить заявку