Что такое задержка первого ввода (FID)? Как уменьшить его в WordPress

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

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

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

Оглавление:

• Что такое задержка первого ввода?
• Как измерить задержку первого ввода для вашего веб-сайта
• Способы уменьшить показатели задержки первого ввода в WordPress

Что такое задержка первого ввода (и почему это важный показатель)

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

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

Например, если вы щелкнете по ссылке, ваш браузер может не сразу обработать запрос. Если вы нажмете кнопку, на первый взгляд она может ничего не сделать. Это может произойти практически с любым интерактивным элементом на вашем сайте, и ваша цель — максимально уменьшить задержку первого ввода.

В идеале задержка первого ввода вашего сайта должна быть менее 100 миллисекунд. Это стандарт, который Google считает приемлемым для веб-сайтов:

Мы упоминаем Google именно потому, что FID — это одна из трех метрик, которые он использует для оценки положительного или отрицательного опыта пользователей на веб-сайте. Эти три показателя называются Core Web Vitals, и они также включают следующие два показателя:

1. Самая большая отрисовка содержимого (LCP): эта метрика измеряет, сколько времени требуется для загрузки самого большого элемента на странице.
2. Кумулятивное смещение макета (CLS): измеряет, насколько страница визуально «смещается» при загрузке. Если элементы слишком сильно перемещаются во время загрузки, у вас будет плохая оценка CLS. У нас есть руководство по исправлению Cumulative Layout Shift для WordPress.

Есть две основные причины, по которым Core Web Vitals так важны. Во-первых, они позволяют оценить, насколько хорошо оптимизирован ваш сайт. Если у вашего веб-сайта высокие оценки, это означает, что он быстро загружается, визуально стабилен, и пользователям не нужно слишком долго ждать, чтобы взаимодействовать с ним.

Вторая причина важности Core Web Vitals заключается в том, что они влияют на поисковую оптимизацию вашего сайта (SEO). Google использует эти показатели в качестве небольшого сигнала при определении рейтинга. На самом деле гигант поисковых систем ясно дал понять, что Core Web Vitals имеет значение, когда дело доходит до SEO, хотя и не в такой степени, как контент и обратные ссылки.

Как измерить задержку первого ввода для вашего веб-сайта

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

Самый простой способ измерить задержку первого ввода для вашего веб-сайта — использовать PageSpeed ​​Insights. Однако PageSpeed ​​Insights покажет время задержки первого ввода только в том случае, если на вашем сайте достаточно трафика, чтобы его можно было включить в отчет об опыте использования Chrome.

Давайте сначала поговорим о том, как работает PageSpeed ​​Insights, а затем мы поделимся некоторыми альтернативами, которые вы можете попробовать, если PageSpeed ​​Insights не предлагает показатели задержки первого ввода для вашего сайта:

Чтобы использовать PageSpeed ​​Insights, введите URL-адрес страницы, которую вы хотите протестировать. PageSpeed ​​Insights потребуется несколько минут, чтобы проанализировать его, а затем он вернет отчет, который выглядит следующим образом:

В целом, этот веб-сайт не имеет лучших показателей Core Web Vital. Однако вы можете видеть, что он очень хорошо работает с метрикой «Задержка первого ввода» со средним временем менее 100 мс.

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

В этой ситуации у вас есть два варианта:

1. Простой : вы можете использовать метрику « Общее время блокировки» из раздела « Лабораторные данные » в качестве приблизительного прокси для времени задержки первого ввода. Это не идеальное представление, но метрика «Общее время блокировки» очень похожа на «Задержку первого ввода». Как правило, если вы улучшите общее время блокировки, вы также увидите аналогичные улучшения для времени задержки первого ввода.
2. Расширенный : вы можете использовать реальный инструмент мониторинга производительности пользователя, такой как Request Metrics. С помощью этих инструментов вам нужно будет добавить скрипт отслеживания на свой сайт, чтобы собирать реальные пользовательские данные.

Ниже вы можете увидеть, где найти метрику «Общее время блокировки» в PageSpeed ​​Insights:

Теперь, когда вы знаете, как измерять FID и другие показатели Core Web Vitals, давайте поговорим о том, как их улучшить.

Способы уменьшить показатели задержки первого ввода в WordPress

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

1. Удалите ненужные скрипты с вашего сайта

Одна из основных причин, по которой ваш веб-сайт WordPress может загружаться слишком долго, заключается в том, что ему необходимо выполнить большой список скриптов. Под скриптами мы подразумеваем JavaScript и CSS, среди прочих возможных вариантов. Если вы используете «сложную» тему WordPress или широкий набор плагинов, есть вероятность, что у вас может быть слишком много скриптов, работающих в фоновом режиме.

Выяснить, какие скрипты полезны, а какие нет, может быть непросто, но здесь на помощь приходит PageSpeed ​​Insights. Если вы запустите тест для любой из страниц вашего сайта, отчет PageSpeed ​​Insights также будет включать раздел « Возможности »:

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

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

2. Откладывайте некритичный код во время загрузки

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

Если эти сценарии не являются «критическими», вы можете просто указать своему браузеру оставить их до последнего, чтобы они не замедляли работу всех остальных. Это то, что мы называем «откладыванием некритического кода».

Ваша первая остановка при выяснении того, какие сценарии вы можете отложить, должна быть PageSpeed ​​Insights. Как только вы создадите отчет для страницы, PageSpeed ​​Insights будет включать рекомендации о том, как улучшить ее оценки.

Среди этих рекомендаций вы найдете вариант « Устранить ресурсы, блокирующие рендеринг » . Если вы нажмете на него, он покажет вам список скриптов, которые вы можете отложить:

Есть два способа обработки скриптов, блокирующих рендеринг, в WordPress. Первый метод предполагает использование async . Это позволяет браузерам продолжать загружать ваш веб-сайт, пока они анализируют указанный вами скрипт. Кроме того, вы можете отложить код, чтобы он загружался после того, как браузеры отобразят остальную часть HTML-документа.

Чтобы настроить это на WordPress, вы можете использовать бесплатный плагин Async JavaScript. Или многие плагины производительности WordPress включают функции для отложенного кода. Если вы готовы платить за плагин премиум-класса, в WP Rocket есть функции для автоматической отсрочки некритичных CSS и JavaScript.

3. Используйте инструменты минимизации CSS и JavaScript

Хотя мы все за удаление неиспользуемых CSS и JavaScript, есть некоторые скрипты, которые вы не захотите удалять. Например, вы не хотели бы отказываться от таблицы стилей CSS на какой-либо странице, если только вы не хотите, чтобы веб-сайт выглядел так, как будто он был вырван из прошлого века.

Для тех скриптов, которые вы не можете удалить, лучше всего их минимизировать. Это означает удаление пробелов и ненужных символов из кода для уменьшения размера каждого скрипта. Существует несколько инструментов, которые автоматически минимизируют скрипты в WordPress, например Autoptimize и Fast Velocity Minify:

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

4. Используйте сеть доставки контента (CDN)

Использование CDN — отличный способ повысить производительность вашего сайта. С CDN вы получаете доступ к сети центров обработки данных по всему миру, которые могут кэшировать контент вашего сайта. Когда посетитель пытается получить доступ к вашему веб-сайту, CDN обрабатывает этот запрос и предоставляет его кешированную версию.

В большинстве случаев использование CDN улучшит время загрузки вашего сайта и показатели FID. Интеграция WordPress с CDN проста, и самая большая проблема, вероятно, заключается в том, чтобы решить, какой сервис использовать.

Если вы ищете бесплатные варианты CDN, мы рекомендуем выбрать один из следующих вариантов:

1. Cloudflare: это одна из самых популярных CDN на рынке. Его легко интегрировать с WordPress, и он предлагает бесплатный план.
2. Jetpack: Плагин Jetpack предлагает функцию Site Accelerator , которая использует серверы WordPress.com для кэширования статических элементов с вашего сайта. Хотя для Jetpack требуется учетная запись WordPress.com, вы также можете использовать ее на собственных сайтах WordPress.

Однако для лучшей производительности вы можете рассмотреть CDN премиум-класса, например KeyCDN, StackPath или Bunny CDN.

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

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

Если вы ищете способы улучшить свой показатель FID в WordPress, вот что вам нужно сделать:

1. Удалите ненужные скрипты с вашего сайта.
2. Отложите некритические CSS и JavaScript во время загрузки.
3. Используйте инструменты минимизации CSS и JavaScript, такие как Autoptimize и Fast Velocity Minify.
4. Используйте CDN, например Cloudflare или Jetpack.

У вас есть вопросы о том, как уменьшить баллы FID в WordPress? Давайте поговорим о них в разделе комментариев ниже!