FID, она же First Input Delay, она же Максимально Потенциальная Задержка после Первого Ввода – показатель того, сколько времени проходит с момента действия пользователя до реакции сайта на него.
Посетитель листает страницу, но контент подгружается с опозданием, а интерактивные элементы (кнопки, ссылки) срабатывают не мгновенно. Это и есть FID.
Почему FID бывает плохим
Тяжелые пакеты JavaScript являются основной причиной задержек при первом вводе. Браузеру может потребоваться много времени, чтобы разобрать и оценить их.
JavaScript – язык программирования, который отвечает за реализацию действий пользователя.
Другими словами: если присутствует много изображений или скриптов, которые загружаются в случайном порядке, это будет замедлять процесс. Хорошая новость в том, что это можно легко контролировать, хоть код и придется «подчищать» вручную.
Еще одна распространенная проблема – просто плохо оптимизированный код. Не когда его много, а когда он работает не так, как задумывалось. Здесь ситуация уже несколько сложнее, поскольку потребуется привлекать компетентного программиста.
Наконец, FID может быть плохим банально по той причине, что у устройства конечного пользователя не хватает мощности. Тут уже вообще ничего сделать нельзя – кроме как сменить девайс.
Как уменьшить показатель FID
FID во многом зависит именно что от JavaScript – избыточный или плохой код замедляет загрузку. Его оптимизация, а также отложенная или асинхронная загрузка скриптов способны заметно уменьшить задержку. Но тут важно не переусердствовать: слишком мелкое разбиение кода увеличит число запросов и даст параллельно обратный эффект.
Частые ошибки, которые провоцируют плохой FID
Ниже – перечень распространенных ошибок, которые, как правило, и вызывают плохие значения FID.
Использование чересчур больших изображений
Не стоит везде использовать большие изображения. Они не только будут тормозить загрузку, но и автоматически сжиматься браузерам, что также приведет к визуальным артефактам и багам.
Баги – это ошибки в коде или в работе программы, сайта. Однако далеко не любую ошибку можно назвать багом: термин обычно применяют, когда что-то работает, но просто некорректно. Потому что когда например, не работает и вовсе, то речь уже о синтаксической ошибке, что совсем другое.
Изображение нужно отдавать строго того размера, который пользователю необходим сейчас, в данную секунду. Решение должно приниматься с прицелом на размер дисплея устройства. Например, на мобильной версии сайта нет никакого смысла использовать картинки с разрешением в духе 3840×2160 (а то и больше).
Использование неправильного формата изображений
Оптимизированные изображения будут мало весить, но при этом сохранят качество. Современный стандарт для сайтов – формат WebP.
WebP подходит для самых разных задач – от статичных картинок до анимированных файлов и графики с прозрачностью. Он компактный и сжимает практически без потерь – в отличие от PNG или JPEG. Также он может похвастаться улучшенной цветопередачей.
Отдельно отметим, что если визуального контента на странице много, естественно, что будет неудобно каждый раз вручную проводить конвертацию из других форматов в WebP. Проблема решается, например, специальным скриптом. Или через HTML-тег – picture.
Переизбыток CSS-кода (или плохое его качество)
Для отображения контента браузер запрашивает файлы CSS.
CSS – язык описания внешнего вида документа. Он отвечает за то, как выглядят страницы: цвет фона и декоративных элементов, размер и стиль шрифтов.
Но обычно ситуация такова, что многие стили вообще не используются. По крайней мере в рамках той или иной страницы. В то же время их большое количество закономерно замедляет загрузку ресурса. Распространенный способ борьбы: удалить неиспользуемые стили, а также разбить те, что есть, на части. Или настроить приоритетную загрузку стилей, которые используются на первом экране – том, что появляется сразу после перехода на сайт.
Игнорирование серверных настроек
Для оптимизации загрузки можно настроить все так, чтобы на сервере CSS-код и код JavaScript сжимался с помощью специальных алгоритмов, а на сайте «разжимался». Не пользоваться этими возможностями – большая ошибка.
Игнорирование использования кэширования на стороне клиента
Чтобы ускорить загрузку и сэкономить трафик, стоит попробовать кэширование. Благодаря нему посетителям не придетсяся каждый раз загружать одни и те же файлы.
CDN здесь – оптимальный вариант. Это сеть, которая помогает «доставлять» контент максимально быстро.
Работает это так, что CDN автоматически определяет ближайший к пользователю сервер и загружает данные именно оттуда, что особенно полезно в двух случаях:
- Если на сайте подключены популярные библиотеки (высока вероятность, что они уже есть в кэше).
- Если аудитория – международная (контент будет подгружаться с оптимального сервера в любой точке мира).
