Задержка первого ввода (FID): что это такое и как оптимизировать для этого ваш веб-сайт

Обеспечение быстрого обслуживания посетителей имеет решающее значение для успеха вашего сайта. Однако есть несколько способов оценить, насколько хорошо он это делает. Одним из них является задержка первого ввода (FID), которая измеряет количество времени в миллисекундах (мс) между тем, когда пользователь впервые взаимодействует с вашим сайтом, и тем, когда его браузер реагирует на это действие.

В этом посте мы объясним, что такое FID и как его измерить. Мы также обсудим, что такое хороший показатель FID, и расскажем, как его можно оптимизировать. Наконец, мы завершим некоторые часто задаваемые вопросы. Давайте начнем!

Подпишитесь на наш канал Youtube

Что такое задержка первого входа (FID)?

Как мы уже упоминали, FID (также иногда называемый «задержкой ввода») - это измерение времени в мс между моментом взаимодействия посетителя с вашим сайтом и ответом его браузера. Это важный показатель, включенный в отчет о пользовательском опыте Chrome. Кроме того, это один из основных веб-сайтов. Это показатели, которые Google использует для определения качества UX вашего сайта (и, в свою очередь, рейтинга его страницы).

В этом контексте ввод или взаимодействие может относиться к широкому диапазону действий. Например, это может быть щелчок по ссылке, нажатие кнопки или установка флажка. Однако FID не применяется, когда пользователь прокручивает или увеличивает масштаб страницы, поскольку для этого не требуется новый ответ между браузером и вашим веб-сайтом.

На этот показатель могут повлиять несколько различных факторов. Скорость и вычислительная мощность устройства пользователя могут иметь влияние. Вы не можете это контролировать. Однако вы можете контролировать размер и сложность веб-страницы. В частности, вы можете контролировать, сколько JavaScript использует ваш сайт. Например, если у вас много изображений или скриптов, которые загружаются в случайном порядке, это может замедлить весь процесс и задержать ответ пользователя.

Даже если на вашем сайте есть надежные FCP и LCP, задержка первого входа может быть достаточно длинной, чтобы они отскакивали. Им может показаться, что ваш сайт не отвечает и работает медленно.

Вкратце, FID используется для определения скорости реакции страницы во время загрузки. Возможно, очевидно, что чем быстрее будет этот процесс, тем лучше. Поэтому важно знать, как измерить FID вашего сайта и как улучшить свой результат.

Как измерить FID

Прежде чем вы начнете оптимизировать свой рейтинг FID, важно знать, где он сейчас находится. В идеале, чтобы обеспечить надежный пользовательский интерфейс (UX), вам нужно, чтобы ваш показатель FID был менее 100 мс.

Оценка 100 мс или меньше считается хорошей , тогда как оценка от 100 до 300 мс требует улучшения. Показатель FID выше 300 мс - это плохо .

Чтобы измерить свой FID, вы можете использовать Google PageSpeed ​​Insights:

Это бесплатный инструмент от Google, который проверяет производительность вашего сайта разными способами. С его помощью вы можете наблюдать множество ключевых показателей, включая FID.

Обратите внимание, что иногда бывает сложно измерить FID. Это потому, что для этого требуется ввод пользователя. Однако, если у вас недавно было взаимодействие с пользователем на вашем сайте, вы сможете найти этот показатель с помощью PageSpeed ​​Insights.

Для начала введите URL-адрес вашего сайта в текстовое поле и нажмите кнопку « Анализировать» . Как только инструмент закончит анализ вашей страницы, он покажет вам результаты и выставит вашему сайту общую оценку:

Вы можете найти показатель « Задержка первого ввода» (FID) в разделе « Данные поля ». В разделе « Возможности », расположенном чуть ниже, вы можете найти предложения по оптимизации вашей страницы и ваших оценок.

Мы также хотим отметить, что Google обозначает эти оценки как полевые данные . Это означает, что информация основана на реальном взаимодействии с пользователем, а не на смоделированных тестах (которые называются лабораторными данными или обнаруживаются с помощью лабораторных инструментов ). FID довольно субъективен и тесно связан с реальным взаимодействием пользователя, поэтому важно убедиться, что вы используете полевые данные. Моделирование может объяснить лишь очень многое.

Как оптимизировать оценку FID

Теперь, когда вы понимаете, что такое оценка FID и как ее можно измерить, пришло время посмотреть, как на самом деле можно ее улучшить. Ниже приведены несколько советов и стратегий, которые можно использовать для уменьшения времени задержки первого входа.

Оптимизируйте и минимизируйте свой код CSS и JavaScript

Один из лучших способов оптимизировать оценку FID - это сжать и оптимизировать код CSS и JavaScript. Это может уменьшить размер файла и, в свою очередь, улучшить скорость отклика. Удаляя ненужные символы, пробелы и разрывы строк, вы уменьшаете размер файла, что, в свою очередь, увеличивает скорость страницы и сокращает количество процессов, которые браузер должен обрабатывать. Таким образом, у вас более низкий FID.

Пользователи Divi также должны знать, что тема автоматически минимизирует HTML, JavaScript и CSS с самого начала. Простая активация темы сжимает весь этот код, так что ваш FID находится в лучшем положении, чем раньше.

Если вы не являетесь пользователем Divi, у вас есть несколько вариантов минимизации кода. Быстрый и простой способ сделать это - использовать онлайн-инструмент, такой как Minify Code. Скопируйте полноразмерный код, вставьте его на сайт, сайт его минимизирует, а затем вы скопируете / вставите результаты обратно на свой сайт.

Вы также можете минимизировать свой код вручную с помощью редактора кода, хотя это может быть немного сложнее. Однако, если у вас есть опыт работы с кодом, этот метод может дать вам больше контроля.

Еще одна стратегия - использовать такой плагин, как Autoptimize или W3 Total Cache (или любое количество других).

Это может быть жизнеспособным решением для пользователей WordPress, если у вас нет опыта работы с кодом и вы хотите автоматически внедрить эту модификацию на свой сайт. Кроме того, оба этих плагина предлагают множество функций, ориентированных на оптимизацию, таких как кэширование изображений и контента.

Разбейте длинные задачи JavaScript на более мелкие

Длинные задачи, как правило, блокируют основной поток и могут привести к раздутию JavaScript, что ухудшит отзывчивость вашего сайта. Чтобы этого не происходило и в процессе улучшать свою оценку FID, вы можете попробовать разбить эти задачи на более мелкие, асинхронные.

Один из наиболее эффективных способов добиться этого - разделение кода. Вкратце, это метод, используемый для разделения и загрузки только меньших и необходимых фрагментов кода, а не одного большого файла сразу. Вы можете сделать это с помощью такого инструмента, как Webpack.

Пользователи Divi также получают преимущество в этой области, поскольку большое обновление производительности разбивает большую библиотеку JavaScript тем и загружает их только по мере необходимости. Это должно уменьшить FID почти на всех сайтах Divi. Темы WordPress, как правило, поставляются со своими собственными библиотеками JS, и пользователи могут не иметь опыта или разрешений, чтобы самостоятельно разделить код и оптимизировать его. Мы хотели, чтобы это не проблема Divi.

Снижение воздействия стороннего кода и некритических скриптов

Если у вас слишком много сторонних скриптов, это может задержать выполнение собственных данных вашего сайта. Следовательно, чтобы оптимизировать оценку FID, также разумно уменьшить влияние стороннего кода и удалить все некритичные сторонние скрипты. И отложить те, которые вы не можете удалить.

Решая, какие сценарии наиболее важны, спросите себя, какие из них играют важную роль в UX сайта. Например, вы можете удалить или отложить некоторые ненужные объявления или всплывающие окна. Ваши пользователи должны видеть это электронное письмо в первую очередь, или вы можете отложить его до тех пор, пока они не начнут каким-либо образом взаимодействовать с сайтом?

Вы также можете заглянуть в раздел « Возможности» своих отчетов PageSpeed ​​Insights для получения дополнительной информации о сокращении неиспользуемого JavaScript и CSS:

Если вы щелкните, чтобы развернуть любой из этих разделов, в нем будут перечислены определенные файлы и задачи, которые могут блокировать ваш основной поток. Вы также можете найти неиспользуемые JavaScript и CSS с помощью Chrome DevTools.

Во многих случаях эти ресурсы «блокировки рендеринга» останавливают загрузку страницы так же быстро, что также влияет на ваш FID. Их удаление и / или отсрочка может не только улучшить интерактивность вашего сайта, но также улучшить воспринимаемую отзывчивость и скорость.

Divi имеет переключатели для откладывания некритических сценариев, подобных этому. В параметрах темы вы можете выбрать отсрочку сценариев jQuery и принять встроенную отсрочку CSS, которая в сочетании с функцией Critical CSS темы удаляет все CSS, блокирующие рендеринг. Вы также можете переключить Google Fonts и отсрочку стилей редактора Gutenberg. Все это рассматривается как «блокировка рендеринга», поэтому участники Elegant Themes почти сразу увидят улучшенный результат FID.

Задержка первого входа (FID) Часто задаваемые вопросы

На данный момент у вас, вероятно, есть твердое представление о том, что такое FID и его значение для UX вашего веб-сайта, а также о том, как его улучшить. Имея это в виду, мы действительно хотим убедиться, что мы рассмотрели все ключевые моменты. Итак, давайте рассмотрим некоторые часто задаваемые вопросы о FID.

Как FID вписывается в общую производительность моего веб-сайта?

По сути, FID измеряет первое взаимодействие посетителей с вашим сайтом. Это одновременно количественный и воспринимаемый показатель, поскольку он влияет на первое впечатление пользователя о вашем сайте. Вы можете объективно увидеть, когда сайт реагирует на ввод пользователя, но, основываясь на взаимодействии пользователя с сайтом, вы также можете увидеть, когда они это воспринимают.

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

Кроме того, FID играет важную роль в том, как Google оценивает ваш веб-сайт в качестве ключевого элемента сети (наряду с самой большой отрисовкой контента (LCP) и совокупным сдвигом макета (CLS)). Таким образом, помимо удобства пользователей, это также может повлиять на поисковую оптимизацию вашего сайта (SEO). Многие из тех же стратегий по улучшению FID также значительно снизят общую производительность вашего сайта.

Как я могу измерить свой FID?

Есть несколько различных способов измерить свой балл FID. Самый быстрый и простой способ - запустить ваш сайт через Google PageSpeed ​​Insights. В отчете будет подробно рассмотрен ряд важных показателей, включая FID. Он также предложит несколько советов о том, как вы можете улучшить свой результат.

Кроме того, вы можете использовать несколько других инструментов для доступа к вашему счету FID. В их число входят отчет о пользовательском опыте Chrome, отчет Core Web Vitals в Google Search Console и библиотека JavaScript Web Vitals. Вы также можете найти такие инструменты, как GT Metrix и Pingdom's Speed ​​Test.

Как мне улучшить свою оценку FID?

Улучшение вашего FID может помочь улучшить как UX, так и SEO вашего сайта. Обычно плохой результат FID можно объяснить несколькими факторами, в том числе:

• Тяжелый JavaScript
• Неиспользуемые скрипты
• Длинные задачи JavaScript
• Длинные файлы сценариев

Чтобы повысить свой результат, вы можете предпринять несколько шагов. К ним относятся минимизация кода вашего сайта, удаление или задержка неиспользуемых сторонних скриптов и разделение длинных задач JavaScript (и файлов CSS) на более мелкие.

Заключение

У вас есть только один шанс произвести положительное первое впечатление на посетителей вашего сайта. Вот почему важно убедиться, что вы используете все возможности, чтобы оптимизировать свой рейтинг FID. Обязательно убедитесь, что первые взаимодействия ваших посетителей будут быстрыми.

Помните, что идеальная оценка FID составляет 100 мс или меньше. Если вам нужно улучшить свои и сократить это время, несколько стратегий, которые мы обсудили выше (например, отсрочка неиспользуемого JavaScript, оптимизация кода CSS и JavaScript, а также отсрочка / удаление ресурсов, блокирующих рендеринг), без сомнения, сократят ваше время до они должны быть.

У вас есть вопросы о FID? Дайте нам знать в комментариях ниже!

Лучшее изображение через wan wei / shutterstock