Как сделать меньше HTTP-запросов в WordPress (11 советов)

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

К счастью, их можно уменьшить, о чем и пойдет речь в этом посте.

Введение в HTTP-запросы

Всякий раз, когда пользователь посещает ваш веб-сайт, его браузер должен загружать ресурсы с вашего сервера. Для связи с ним браузер отправляет запросы по протоколу HTTP (протокол передачи гипертекста).

Веб-сайты содержат различные формы данных, а файлы HTML, CSS, изображения и видео хранятся на сервере — для отображения этого контента в браузере требуются HTTP-запросы.

Вот шаги, которые необходимо предпринять, когда кто-то просматривает Интернет:

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

Почему вы можете захотеть, чтобы ваш сайт WordPress делал меньше HTTP-запросов

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

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

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

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

Сократив количество HTTP-запросов на своем веб-сайте, вы улучшите свои показатели Core Web Vitals, особенно ваш показатель Largest Content Paint (LCP). В свою очередь, это может улучшить взаимодействие с пользователем (UX), поскольку посетители увидят контент быстрее.

Как протестировать HTTP-запросы вашего сайта

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

Для этого вы можете использовать инструмент аналитики производительности, такой как GTmetrix. Начните с ввода URL-адреса вашего веб-сайта и нажмите «Проверить свой сайт »:

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

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

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

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

Если вы хотите получить наибольшую отдачу от своих усилий, постарайтесь сосредоточиться на устранении самых больших и самых медленных HTTP-запросов.

Вы также должны сосредоточиться на удалении сторонних HTTP-запросов ( ресурсов, которые ваш сайт загружает с чужого сервера, таких как скрипты Google Analytics ). Эти сторонние запросы требуют дополнительных DNS-запросов и имеют другие недостатки производительности.

Как сделать меньше HTTP-запросов в WordPress и ускорить работу сайта (11 советов)

После того, как вы протестировали свой веб-сайт, пришло время уменьшить его HTTP-запросы.

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

1. УДАЛИТЬ НЕНУЖНЫЕ ПЛАГИНЫ
2. ОТЛОЖИТЬ JAVASCRIPT, БЛОКИРУЮЩИЙ ВИЗУАЛИЗАЦИЯ, И/ИЛИ ЗАДЕРЖАТЬ ВЫПОЛНЕНИЕ JAVASCRIPT.
3. УСЛОВНО ЗАГРУЗИТЬ СКРИПТЫ
4. МИНИМИЗАЦИЯ ЗАПРОСОВ ТРЕТЬИХ ЛИЦ
5. ОПТИМИЗИРУЙТЕ ВАШИ ИЗОБРАЖЕНИЯ
6. ВНЕДРЕНИЕ ЛЕНИВОЙ ЗАГРУЗКИ
7. ИСПОЛЬЗУЙТЕ СИСТЕМНЫЙ СТЕК ШРИФТОВ
8. КОМБИНИРОВАНИЕ CSS И JAVASCRIPT
9. ИСПОЛЬЗУЙТЕ CSS-СПРАЙТЫ ДЛЯ ОБЪЕДИНЕНИЯ ИЗОБРАЖЕНИЙ
10. УМЕНЬШИТЕ КОД ВАШЕГО САЙТА
11. ОТКЛЮЧИТЬ ЭМОДЖИС

1. Удалите ненужные плагины

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

Чтобы проанализировать ваши запросы на плагины, выполните поиск «плагины» в отчете GTmetrix Waterfall. Это будет отображать только HTTP-запросы, исходящие из вашей папки wp-content/plugins :

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

2. Отложите JavaScript, блокирующий рендеринг, и/или задержите выполнение JavaScript.

Если вы хотите делать меньше HTTP-запросов и оптимизировать свои HTTP-запросы, сосредоточьтесь на JavaScript — еще одна отличная тактика.

Есть два основных способа оптимизировать загрузку JavaScript вашего сайта:

1. Отложите JavaScript, блокирующий рендеринг
2. Задержка выполнения JavaScript

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

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

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

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

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

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

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

Чтобы реализовать атрибут defer, вам просто нужно открыть файл functions.php и найти тег <script> для ресурса. Здесь вставьте атрибут отсрочки:

 <script src="resource.js" defer></script>

Вот как выглядит асинхронный атрибут:

 <script src="resource.js" async></script>

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

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

Если вы хотите сделать меньше HTTP-запросов для начальной загрузки страницы, другой популярный прием — отложить некоторые/все выполнение JavaScript вашего сайта до взаимодействия с пользователем.

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

Перемещая эти HTTP-запросы на более поздние этапы посещения, вы можете делать меньше HTTP-запросов для начальной загрузки и значительно ускорить метрики, ориентированные на взаимодействие с пользователем, такие как Largest Contentful Paint.

Чтобы настроить это, вы можете использовать один из этих плагинов производительности:

• WP Ракета
• FlyingPress
• Производительность

Вот как это выглядит в FlyingPress — вы можете либо задержать все свои сценарии, кроме выбранных, либо только выбранные:

3. Условно загружать скрипты

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

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

В качестве бесплатного варианта вы также можете рассмотреть плагин Asset CleanUp.

Условно загрузите свои плагины, а затем снова запустите свой веб-сайт через GTmetrix. Если вы по-прежнему замечаете избыток HTTP-запросов, пришло время перейти к следующему методу.

4. Минимизируйте сторонние запросы

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

Вот несколько примеров сторонних скриптов:

• Встроенные видео YouTube
• Скрипты отслеживания Google Analytics
• Гугл шрифты
• Сторонние объявления

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

Для таких сервисов, как Google Analytics и Google Fonts, вы также можете рассмотреть возможность их локального размещения с помощью таких плагинов:

• OMGF — размещайте шрифты Google локально.
• CAOS — локальное размещение Google Analytics.

5. Оптимизируйте свои изображения

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

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

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

• Обслуживание адаптивных изображений, оптимизированных для каждого устройства пользователя.
• Сжатие изображений.
• Изменение размера изображений.
• Преобразование изображений в оптимальные форматы.
• Обслуживание изображений через встроенную сеть доставки контента (CDN).

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

6. Реализуйте ленивую загрузку

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

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

В WordPress 5.5 добавлена ​​встроенная отложенная загрузка изображений с использованием встроенной отложенной загрузки браузера.

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

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

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

Вы также можете дополнительно настроить ленивую загрузку в настройках плагина.

7. Используйте стек системных шрифтов

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

По этой причине лучше ограничить количество используемых вами пользовательских шрифтов.

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

Некоторые темы, такие как Neve, GeneratePress или Astra, позволяют вернуться к системным шрифтам. Однако вы также можете изменить стек шрифтов с помощью CSS.

8. Комбинируйте CSS и JavaScript

Еще один способ уменьшить количество HTTP-запросов для файлов CSS и JavaScript — объединить отдельные файлы CSS и JavaScript в одну таблицу стилей или файл.

С плагином Autoptimize вы сможете легко агрегировать файлы сайта всего за несколько шагов:

В разделе «Настройки» > «Автооптимизация» включите плагин для оптимизации кода JavaScript и CSS. Затем установите галочки рядом с Агрегировать JS-файлы и Агрегировать CSS-файлы :

Это скомпилирует ваш CSS в один файл, а JavaScript в другой. Вместо того, чтобы отправлять много запросов для нескольких файлов, Autoptimize позволяет вашему сайту делать меньше HTTP-запросов.

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

Если ваш хост использует HTTP/2 или более позднюю версию (что в настоящее время использует большинство хостов), на самом деле может быть лучше не объединять файлы, поскольку HTTP/2 поддерживает мультиплексирование (что означает, что он может загружать несколько файлов с сервера без нескольких запросов к серверу).

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

9. Используйте спрайты CSS для объединения изображений

На типичном сайте WordPress каждое изображение представляет собой отдельный файл. Если на странице несколько фотографий, браузер отправляет несколько HTTP-запросов. Однако спрайт CSS объединит эти изображения в один файл.

CSS Sprites Tool — это бесплатное программное обеспечение для создания и настройки CSS-спрайтов. Для начала перетащите изображения в окно загрузки:

Создав спрайт CSS, добавьте его в медиатеку WordPress. Затем вы можете использовать сгенерированный код HTML и CSS для размещения каждого изображения на своем веб-сайте.

10. Минимизируйте код вашего сайта

Минимизация файлов вашего сайта не поможет вам делать меньше HTTP-запросов, но поможет оптимизировать неизбежные HTTP-запросы для кода HTML, CSS и JavaScript вашего сайта.

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

Самый простой способ минимизировать код вашего сайта WordPress — использовать плагин, такой как плагин Autoptimize, о котором мы упоминали ранее.

Большинство плагинов для кэширования WordPress также включают функции минимизации кода, включая WP Rocket, FlyingPress, WP Fastest Cache и другие.

Или, если вы используете CDN Cloudflare, вы также можете попросить Cloudflare минимизировать ваш код.

После минимизации файлов вашего сайта HTTP-запросы будут выполняться быстрее. С более легким кодом вы ускорите работу своего веб-сайта и сведете к минимуму громоздкие запросы.

11. Отключить смайлики

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

Для самого простого варианта вы можете просто установить легкий плагин Disable Emojis.

В качестве альтернативы вы можете добавить этот код в файл functions.php вашей дочерней темы или в плагин менеджера кода, такой как Code Snippets:

 /** * Disable the emojis */ function disable_emojis() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' ); add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 ); } add_action( 'init', 'disable_emojis' ); /** * Filter function used to remove the tinymce emoji plugin. * * @param array $plugins * @return array Difference betwen the two arrays */ function disable_emojis_tinymce( $plugins ) { if ( is_array( $plugins ) ) { return array_diff( $plugins, array( 'wpemoji' ) ); } else { return array(); } } /** * Remove emoji CDN hostname from DNS prefetching hints. * * @param array $urls URLs to print for resource hints. * @param string $relation_type The relation type the URLs are printed for. * @return array Difference between the two arrays. */ function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) { if ( 'dns-prefetch' == $relation_type ) { /** This filter is documented in wp-includes/formatting.php */ $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://sworg/images/core/emoji/2/svg/' ); $urls = array_diff( $urls, array( $emoji_svg_url ) ); } return $urls; }

После выполнения всех этих советов у вас должен быть сайт с меньшим количеством HTTP-запросов!

Делайте меньше HTTP-запросов на своем сайте 🎯

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

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

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

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

У вас есть вопросы по уменьшению количества HTTP-запросов в WordPress? Спросите нас в разделе комментариев ниже!