Несколько лет назад мы искали лучшие способы ускорить работу сайта WPBeginner. Именно тогда мы обнаружили, что сокращение HTTP-запросов оказывает большое влияние на скорость загрузки.
Каждый раз, когда кто-то посещает ваш веб-сайт, его браузер отправляет запросы на ваш сервер, прося загрузить все файлы, необходимые для отображения страницы, включая изображения, таблицы стилей и скрипты. К сожалению, каждый из этих HTTP-запросов увеличивает время загрузки.
Когда запросов слишком много, вашему серверу приходится работать интенсивнее, и это замедляет работу вашего сайта. Это также может повредить SEO вашего сайта и пользовательскому опыту.
В этой статье мы предоставим практические методы сокращения HTTP-запросов в WordPress и повышения производительности вашего сайта.
Содержание
- 1 Зачем сокращать HTTP-запросы в WordPress?
- 2 Как идентифицировать HTTP-запросы
- 3 1. Объедините файлы CSS и JavaScript
- 4 2. Отложенная загрузка изображений и видео
- 5 3. Используйте систему доставки контента (CDN)
- 6 4. Используйте кеширование браузера
- 7 5. Минимизируйте использование внешних ресурсов.
- 8 6. Бонус: включите сжатие Gzip.
- 9 Руководства экспертов по улучшению производительности WordPress
Зачем сокращать HTTP-запросы в WordPress?
Каждая страница вашего сайта WordPress обычно содержит несколько элементов. Они могут включать изображения, файлы CSS и JavaScript, встраивание видео и многое другое.
Когда кто-то посещает веб-страницу, его браузеру необходимо загрузить каждый элемент отдельно для отображения страницы. Если на вашем веб-сайте много изображений или других ресурсов, это может привести к медленной загрузке.
Помимо файлов, размещенных на вашем сервере, ваш веб-сайт также может загружать ресурсы из внешних источников, таких как скрипты Google Analytics, виджеты социальных сетей или рекламные пиксели.
Хотя эти элементы улучшают функциональность вашего веб-сайта и удобство для пользователей, они также могут замедлить время загрузки, если они не оптимизированы.
Медленные веб-сайты могут раздражать посетителей, заставляя их уходить еще до полной загрузки страницы. Согласно исследованию Strange Loop, задержка в одну секунду может привести к снижению конверсии на 7%, количеству просмотров страниц на 11% и снижению удовлетворенности клиентов на 16%.
![Исследование скорости Strangeloop Исследование скорости Strangeloop](https://www.wpbeginner.com/wp-content/uploads/2024/11/image-1.png)
Сокращение HTTP-запросов в WordPress — отличный способ улучшить производительность вашего веб-сайта и один из ключевых способов повышения скорости загрузки страниц на WPBeginner.
Как идентифицировать HTTP-запросы
Прежде чем мы покажем вам, как уменьшить количество HTTP-запросов в WordPress, давайте рассмотрим, как их можно идентифицировать.
Вы можете легко просмотреть HTTP-запросы, сделанные вашим веб-сайтом, с помощью инструментов разработчика вашего браузера. Это покажет вам список файлов, которые необходимо загрузить для просмотра веб-страницы.
Например, в Google Chrome вы можете открыть инструменты разработчика, перейдя в Просмотр » Разработчик » Проверить. Вы также можете щелкнуть страницу правой кнопкой мыши и выбрать в меню «Проверить».
Затем перейдите на вкладку «Сеть». Перезагрузите страницу, и вы увидите список всех загруженных ресурсов, включая внутренние и внешние HTTP-запросы.
![Идентификация HTTP-запросов с помощью инструментов разработчика вашего браузера Идентификация HTTP-запросов с помощью инструментов разработчика вашего браузера](https://www.wpbeginner.com/wp-content/uploads/2024/11/httprequests-inspect-network.png)
Чтобы просмотреть только внешние HTTP-запросы, вы можете использовать фильтр «Сторонние запросы». Если вы просто хотите просмотреть определенные типы файлов, которые могут повлиять на время загрузки, например JS (JavaScript) или CSS, просто используйте кнопки вверху, чтобы отфильтровать список.
Остерегайтесь файлов, которые медленно загружаются. Вы можете посмотреть столбец «Время», чтобы узнать, сколько времени требуется для загрузки каждого из этих ресурсов. Затем вы можете щелкнуть заголовок этого столбца, чтобы отсортировать список по времени, а при повторном нажатии на него файлы, загружающиеся медленнее всего, будут помещены вверху.
Когда вы посмотрите на четвертый столбец «Инициатор», вы иногда увидите имя плагина или темы, загрузившей файл. Запишите все плагины или темы, которые запрашивают медленную загрузку файлов.
Вы можете использовать сторонние инструменты, такие как Пингдом чтобы получить более подробный отчет. Для получения дополнительной информации ознакомьтесь с нашим руководством по отслеживанию запросов сторонних доменов в WordPress.
С учетом вышесказанного, вот некоторые из лучших способов уменьшить количество HTTP-запросов в WordPress, что приводит к ускорению загрузки, улучшению пользовательского опыта и повышению рейтинга в поисковых системах:
Давайте начнем!
1. Объедините файлы CSS и JavaScript
Лучший способ уменьшить количество HTTP-запросов, отправляемых на ваш сайт, — это уменьшить количество файлов, к которым необходимо получить доступ. Вы можете объединить несколько файлов, чтобы уменьшить количество HTTP-запросов без потери функциональности.
Например, вместо того, чтобы иметь несколько файлов CSS для разных частей дизайна вашего веб-сайта, вы можете объединить их в один файл. Этот единственный файл будет содержать весь необходимый код стилизации, и браузеру нужно будет сделать только один запрос вместо многих.
Аналогичным образом вы можете объединить несколько файлов JavaScript в один, уменьшив количество запросов, необходимых для загрузки интерактивных элементов вашего веб-сайта.
Несколько плагинов WordPress могут автоматизировать этот процесс. Популярные варианты включают WP Rocket (премиум) и Автооптимизировать (бесплатно).
Подробную информацию о том, как использовать эти плагины, можно найти в нашем руководстве о том, как исправить блокировку рендеринга JavaScript и CSS в WordPress.
![Минимизация CSS, JavaScript и iFrame в WP Rocket Минимизация CSS, JavaScript и iFrame в WP Rocket](https://www.wpbeginner.com/wp-content/uploads/2024/11/image.png)
Эти плагины не только объединяют ваши файлы, но и минимизируют их. Это удаляет из кода ненужные символы, такие как пробелы и комментарии, уменьшая размер файлов, не влияя на их функциональность. Это еще больше повышает скорость загрузки за счет уменьшения объема данных, которые необходимо загрузить.
2. Отложенная загрузка изображений и видео
Отложенная загрузка — еще один хороший способ улучшить скорость загрузки вашего сайта, особенно если ваши страницы содержат много изображений или видео.
Обычно WordPress загружает все медиафайлы перед отображением веб-страницы, даже если эти изображения или видео находятся дальше по странице и не видны пользователю сразу. Это может значительно увеличить время начальной загрузки страницы.
Отложенная загрузка оптимизирует этот процесс, откладывая загрузку изображений и видео до тех пор, пока они не начнут прокручиваться в поле зрения пользователя.
![Включение Lazyload в WP Rocket Включение Lazyload в WP Rocket](https://www.wpbeginner.com/wp-content/uploads/2024/11/image-3.png)
Эти полезные руководства помогут вам научиться настроить отложенную загрузку на вашем веб-сайте WordPress:
3. Используйте систему доставки контента (CDN)
Использование сети доставки контента (CDN) — еще одна эффективная стратегия повышения скорости загрузки вашего веб-сайта WordPress, особенно для пользователей, расположенных далеко от вашего веб-сервера.
В отличие от предыдущих методов, CDN не уменьшает количество HTTP-запросов. Вместо этого он оптимизирует обработку этих запросов.
Обычно файлы вашего веб-сайта хранятся на одном веб-сервере, и пользователям со всего мира приходится запрашивать файлы из этого одного места. CDN хранит копии файлов вашего сайта на быстрых серверах, расположенных по всему миру, и они доставляются в браузер пользователя с ближайшего к нему сервера.
![Как работает CDN Как работает CDN](https://www.wpbeginner.com/wp-content/uploads/2011/04/cdn-server-map.png)
Возможно, вам будет интересно увидеть наше экспертное сравнение лучших сервисов WordPress CDN, чтобы узнать, какой вариант лучше всего подходит для вашего веб-сайта.
В WPBeginner мы используем Cloudflare для улучшения скорости загрузки страниц, и вы можете следовать нашему пошаговому руководству о том, как настроить бесплатный CDN Cloudflare в WordPress.
4. Используйте кеширование браузера
Вы также можете использовать кеширование браузера, чтобы уменьшить количество HTTP-запросов на ваш веб-сайт, особенно если у вас есть постоянные пользователи, которые часто посещают ваш сайт.
Когда пользователь впервые посещает ваш сайт, его браузер загружает все необходимые ресурсы, такие как изображения, таблицы стилей и файлы JavaScript. Кэширование браузера позволяет браузеру хранить копии этих файлов локально на компьютере пользователя.
В следующий раз, когда они посещают ваш веб-сайт, браузер проверяет свой локальный кеш, прежде чем отправлять HTTP-запросы на ваш сервер. Если в кеше обнаружена копия файла с неистекшим сроком действия, браузер использует локальный файл вместо того, чтобы загружать его повторно.
Это значительно сокращает количество HTTP-запросов, отправляемых на ваш сервер, что приводит к ускорению загрузки для вернувшихся посетителей.
Однако если содержимое вашего веб-сайта часто обновляется, важно установить соответствующие сроки истечения срока действия для кэшированных ресурсов. Это гарантирует, что ваши пользователи в конечном итоге получат последние версии ваших файлов.
Вы можете контролировать продолжительность кэширования ресурсов, добавляя заголовки Expires в WordPress. Эти заголовки сообщают браузеру, когда кэшированный файл следует считать устаревшим и его необходимо повторно загрузить с вашего сервера.
5. Минимизируйте использование внешних ресурсов.
Многие плагины и темы WordPress загружают ресурсы, такие как скрипты, таблицы стилей и изображения, с внешних веб-сайтов, таких как Google Analytics, Facebook и поставщиков шрифтов.
Эти внешние HTTP-запросы могут повлиять на скорость загрузки вашего веб-сайта, поскольку браузеру необходимо подключаться к нескольким серверам для получения всех необходимых компонентов.
Даже если эти внешние ресурсы оптимизированы по скорости, использование слишком большого их количества может замедлить производительность вашего сайта.
Чтобы уменьшить количество этих внешних HTTP-запросов, вы можете начать с деактивации и удаления плагинов и тем, которые вам на самом деле не нужны.
Вам также следует подумать о поиске альтернатив для любых плагинов или тем, которые запрашивают медленную загрузку файлов. Возможно, вы заметили некоторые моменты, когда идентификация HTTP-запросов ранее.
И при выборе плагинов WordPress помните о внешних ресурсах, которые они загружают. Вам следует выбрать плагины, которые отдают приоритет производительности и избегают тех, которые загружают чрезмерные внешние скрипты или стили.
Для более детального контроля над плагинами рассмотрите возможность использования инструмента управления плагинами, такого как Plugin Organizer. Это позволяет выборочно загружать плагины только на те страницы, где они необходимы.
![Установка для элементов управления организатора плагинов значения «Не вход в систему» Установка для элементов управления организатора плагинов значения «Не вход в систему»](https://www.wpbeginner.com/wp-content/uploads/2024/11/image-2.png)
Наконец, пользовательские веб-шрифты часто загружаются от внешних поставщиков, таких как Google Fonts, и могут существенно способствовать HTTP-запросам. Вам следует ограничить количество используемых вами семейств шрифтов и их насыщенность или использовать системные шрифты, которые уже установлены на компьютерах пользователей.
В WPBeginner мы перешли на системные шрифты в 2021 году, улучшив время загрузки страниц, особенно для пользователей с более медленным подключением к Интернету. Вы можете научиться делать то же самое в нашем руководстве по отключению Google Fonts на вашем веб-сайте WordPress.
6. Бонус: включите сжатие Gzip.
И последний совет: включите сжатие GZIP, чтобы уменьшить размер файлов на вашем веб-сервере.
Хотя это не уменьшает количество HTTP-запросов напрямую, оно ускоряет процесс и ускоряет передачу файлов вашего веб-сайта.
Руководства экспертов по улучшению производительности WordPress
Мы надеемся, что этот урок помог вам научиться сокращать HTTP-запросы в WordPress. Вы также можете ознакомиться с другими руководствами по улучшению производительности WordPress:
Если вам понравилась эта статья, то подписывайтесь на нашу рассылку YouTube-канал для видеоуроков по WordPress. Вы также можете найти нас на Твиттер и Фейсбук.