Как улучшить задержку первого ввода (FID) в WordPress

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

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

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

Введение в первую задержку ввода

Задержка первого ввода (FID) – это время загрузки, с которым посетитель сталкивается после первого взаимодействия с вашим сайтом. По сути, когда кто-то щелкает ссылку или нажимает кнопку, ему приходится ждать ответа своего браузера. Если ваш сайт имеет высокий балл FID, посетители ждут дольше.

FID — одна из основных метрик Core Web Vitals. Этот отчет, созданный Google, измеряет эффективность веб-страниц.

Вот три основных показателя производительности, которые включены в отчет Core Web Vitals:

• Самая большая отрисовка содержимого (LCP) : измеряет время, которое требуется вашему веб-сайту для загрузки после того, как пользователь запрашивает URL-адрес.
• Задержка первого ввода (FID) : это время, которое требуется вашему веб-сайту для ответа после того, как посетитель взаимодействует со страницей.
• Совокупный сдвиг макета (CLS) : измеряет все сдвиги макета, которые происходят во время загрузки страницы.

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

Вот некоторые преимущества улучшения вашего балла FID:

• Увеличение среднего времени пребывания ваших посетителей на странице
• Снижение показателя отказов
• Увеличение конверсий

Возможные причины плохой оценки FID

Когда вы запускаете тест Core Web Vitals, отчет дает вам оценку первой задержки ввода. Приемлемый FID составляет 100 миллисекунд или меньше.

Плохая оценка FID — это все, что превышает 300 мс. Это может быть вызвано несколькими различными факторами.

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

Наличие слишком большого количества плагинов на основе JavaScript может негативно повлиять на время загрузки. Точно так же некоторые темы могут иметь сложные файлы, вызывающие ту же проблему.

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

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

Теперь, когда вы знаете, что такое задержка первого ввода, пришло время протестировать ваш веб-сайт.

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

1. Статистика PageSpeed

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

После того, как вы введете URL-адрес своего веб-сайта, PageSpeed ​​Insights предоставит вам подробный анализ производительности. В верхней части страницы вы можете увидеть, прошел ли ваш сайт оценку Core Web Vitals.

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

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

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

2. Консоль поиска Google

Подобно PageSpeed ​​Insights, Google Search Console — это бесплатный инструмент, который можно использовать для оценки производительности сайта. С помощью этой службы вы можете просматривать данные о трафике для своего сайта и устранять определенные проблемы, такие как задержка первого ввода.

Чтобы начать использовать Google Search Console, вам необходимо подтвердить право собственности на веб-сайт. Есть несколько способов сделать это, но мы опишем метод загрузки HTML-файла. Начните с ввода вашего домена или префикса URL.

Затем загрузите созданный для вас HTML-файл. Вам нужно будет загрузить этот файл в корневой каталог вашего сайта, прежде чем вы сможете использовать функции Google Search Console.

После проверки вы сможете получить доступ к панели управления. Здесь вы можете перейти на вкладку Core Web Vitals .

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

Консоль поиска Google может дать вам аналогичные показатели по вашей оценке FID. Вы получите оценку « Плохо », « Требуется улучшение » или «Хорошо » на основе реальных данных об использовании.

3. Маяк

Lighthouse — это инструмент веб-разработки, который можно использовать для проверки производительности любой веб-страницы. Хотя он не измеряет напрямую задержку первого входа, он дает общее время блокировки (TBT). Вы можете использовать это как прокси для FID.

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

Чтобы просмотреть отчет Lighthouse на своем веб-сайте, вам нужно щелкнуть правой кнопкой мыши на веб-странице. Затем выберите «Проверить ».

В верхней части сгенерированного кода найдите значок с двойной стрелкой. Затем нажмите на него и выберите Маяк .

На следующей странице вы увидите опцию создания отчета. Когда вы нажмете на нее, Lighthouse проведет аудит вашего сайта.

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

Затем прокрутите вниз, пока не увидите Метрики . В этом разделе вы увидите общее время блокировки .

Хотя TBT и FID похожи, важно отметить, что FID — это полевой показатель. Поскольку он основан на пользователях в режиме реального времени, его нельзя измерить в лабораторных условиях.

Lighthouse — это лабораторный инструмент, поэтому его метрика «Общее время блокировки» не будет оценивать реальную интерактивность. К счастью, улучшение показателя TBT также может улучшить задержку первого ввода.

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

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

Давайте посмотрим, как уменьшить задержку первого ввода в WordPress.

1. Установите плагин оптимизации

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

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

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

Затем вы можете настроить его параметры, чтобы оптимизировать файлы для быстрой загрузки. Оптимизируя CSS, откладывая JavaScript и внедряя ленивую загрузку, вы можете улучшить свой показатель FID.

Jetpack Boost — бесплатный плагин. Если у вас уже установлен Jetpack на вашем веб-сайте WordPress, вы можете активировать Jetpack Boost с панели инструментов.

2. Отложите JavaScript, блокирующий рендеринг

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

В этом случае вы можете отложить выполнение JavaScript. Это скажет браузеру отображать наиболее релевантный контент в первую очередь.

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

Затем прокрутите вниз до раздела « Возможности ». Здесь вы увидите предложения по улучшению производительности вашего веб-сайта. Найдите, где написано «Устранить ресурсы, блокирующие рендеринг» .

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

Как только вы решите отложить второстепенный JavaScript на своем веб-сайте, вы можете использовать плагин, чтобы упростить этот процесс. С Jetpack Boost вы можете сделать это всего за один шаг.

В панели инструментов WordPress перейдите к Jetpack → Boost . Затем найдите параметр « Отложить необязательный JavaScript ».

Наконец, включите эту функцию. При реализации переключатель станет зеленым. Теперь попробуйте снова запустить свой веб-сайт через PageSpeed ​​Insights, чтобы увидеть, улучшилась ли ваша оценка FID.

3. Отложите некритичный CSS

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

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

Затем вы можете использовать плагин Jetpack Boost для оптимизации вашего CSS. В панели инструментов WordPress перейдите к Jetpack → Boost . Затем найдите параметр Оптимизировать загрузку CSS .

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

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

4. Удалите ненужный JavaScript

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

Для отображения вашего веб-сайта необходимо много скриптов, но есть вероятность, что у вас есть ненужные CSS и JavaScript. Если вы не знаете, как определить разницу, вы можете вернуться к PageSpeed ​​Insights.

Как и в случае с первыми тремя способами, прокрутите до раздела « Возможности ». На этот раз ищите неиспользуемый JavaScript и CSS.

Рядом с каждым неиспользуемым скриптом будет URL-адрес, показывающий, откуда он взят. В этом примере Google Analytics и Диспетчер тегов Google создавали ненужный JavaScript.

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

Кроме того, вы можете использовать плагин, например Asset CleanUp, для удаления неиспользуемых CSS и JavaScript. Этот инструмент может устранить ресурсы, блокирующие рендеринг, чтобы уменьшить количество HTTP-запросов вашего сайта.

После того, как вы установили и активировали Asset Cleanup на своем сайте, перейдите в Asset CleanUp → CSS/JS Manager на панели инструментов. На этой странице вы можете выбрать различные элементы вашего веб-сайта, чтобы просмотреть их CSS и JavaScript.

Например, вы можете нажать на Домашнюю страницу , и на ней отобразятся все загруженные файлы.

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

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

Как только вы удалите неиспользуемые скрипты, нажмите «Обновить ». После этого вы можете очистить кеш, чтобы немедленно применить эти изменения.

5. Минимизируйте CSS и JavaScript

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

Самый простой способ сделать это — установить плагин Autoptimize. Это бесплатный инструмент, который может автоматически минимизировать ваши файлы CSS и JavaScript после простой настройки.

После установки перейдите в Настройки → Автооптимизация . В разделе « Параметры JavaScript » вы можете установить флажок « Оптимизировать код JavaScript» .

Затем вам нужно будет сделать то же самое для параметров CSS . Настроив эти параметры, инструмент автоматически минимизирует существующие CSS и JavaScript на вашем веб-сайте.

Когда закончите, сохраните изменения. У вас также есть возможность очистить кеш после этого процесса.

6. Задержка выполнения JavaScript

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

Для этого вы можете использовать такой плагин, как Flying Scripts. С помощью этого инструмента вы можете отложить выполнение файлов JavaScript до тех пор, пока на вашем сайте не появится активность посетителей.

После активации Flying Scripts перейдите в Настройки → Flying Scripts . Откроется страница настроек плагина, где вы сможете начать реализацию задержек JavaScript.

Начните с написания ключевых слов, которые идентифицируют сценарии, которые вы хотите отложить. Например, вы можете использовать «gtag» для скрипта Диспетчера тегов Google.

Затем вы можете реализовать тайм-аут. По сути, это будет выполнять JavaScript, когда в течение определенного периода времени не было активности. Вы можете установить таймер до десяти секунд. Когда вы закончите, нажмите Сохранить изменения.

7. Внедрите сеть доставки контента

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

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

К счастью, сайты, использующие Jetpack, уже поставляются с бесплатной CDN. Если вы перейдете к Jetpack → Настройки → Производительность , вы можете включить Site Accelerator.

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

Часто задаваемые вопросы о задержке первого ввода

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

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

Вы можете легко измерить показатель «Задержка первого ввода» вашего веб-сайта с помощью инструмента для Core Web Vitals. PageSpeed ​​Insights — это простой в использовании вариант. Все, что вам нужно сделать, это ввести URL-адрес вашего сайта, и инструмент создаст подробный отчет о производительности вашего сайта.

Google Search Console работает очень похоже. После того, как вы подтвердите, что являетесь владельцем веб-сайта, вы сможете просмотреть отчет FID на основе реальных данных о посетителях.

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

Что такое хороший показатель FID?

Проще говоря, ваш сайт попадет в одну из трех категорий:

• Хорошо : 100 миллисекунд или меньше
• Требуется улучшение : варьируется от 100 мс до 300 мс.
• Плохо : более 300 мс

После того, как вы измерите свою оценку FID, любые результаты более 100 миллисекунд потребуют некоторой корректировки.

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

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

Хотя вы можете использовать разные инструменты для этого процесса, Jetpack Boost может помочь вам реализовать сразу несколько решений. Используя этот плагин, вы можете оптимизировать структуру CSS и отложить ненужный JavaScript.

Улучшите свое первое впечатление

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

Ваш веб-сайт может иметь плохую оценку FID из-за тяжелого и неэффективного кодирования JavaScript и CSS. К счастью, вы можете легко определить эти проблемы с помощью такого инструмента, как Google PageSpeed ​​Insights. Затем вы можете установить плагин, такой как Jetpack Boost, для минимизации или отсрочки CSS и JavaScript.