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

В этом посте мы расскажем вам обо всём, что вам нужно знать о том, как делать меньше HTTP-запросов в WordPress.

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

Затем мы поделимся некоторыми советами и стратегиями, которые вы можете реализовать, чтобы уменьшить количество запросов на ваш сайт. Эти стратегии не только помогут вам с сообщением «Меньше HTTP-запросов» в GTmetrix, так и с сообщением «Избегать цепочки критических запросов» в Google PageSpeed ​​Insights.

Что такое HTTP-запросы?

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

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

Например, он может сказать: «Эй, сервер, мне нужен этот файл coolimage.png» или «Эй, сервер, мне также нужна таблица стилей CSS для этого плагина контактной формы«. Затем сервер отвечает на эти запросы указанными файлами.

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

HTTP, сокращение от Hypertext Transfer Protocol, — это то, как эти компьютеры (браузер посетителя и ваш веб-сервер) обмениваются данными.

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

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

Почему так важно уменьшить количество HTTP-запросов?

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

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

Таким образом, если веб-сайт должен сделать 70 HTTP-запросов, прежде чем он сможет отобразить страницу, это займёт больше времени, чем если бы он должен был сделать 40 HTTP-запросов.

Кроме того, некоторые HTTP-запросы будут «блокировать» другие HTTP-запросы, что означает, что браузер не может начать загрузку определённых HTTP-запросов, пока не закончит загрузку HTTP-запросов перед этим.

Итог: чем меньше HTTP-запросов, тем быстрее загружается ваш сайт.

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

Выше вы узнали, что при прочих равных, уменьшение количества HTTP-запросов ускорит ваш сайт. Однако все HTTP-запросы не всегда «равны». Некоторые HTTP-запросы больше других. Некоторые из них медленнее других.

Например, запрос огромного файла изображения размером 3 МБ займёт намного больше времени, чем запрос крошечного изображения размером 20 КБ.

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

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

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

После того, как вы подключите свой URL-адрес, вверху вы увидите базовое сводное поле. Это показывает, сколько HTTP-запросов имеет ваш сайт, но не разбивает отдельные запросы:

Чтобы проанализировать ваши индивидуальные запросы, перейдите на вкладку «Водопад» ниже.

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

Вы можете видеть, что не все HTTP-запросы равны. Например, изображение размером 839,3 КБ занимает 1,12 с, а изображение 57,6 КБ — всего 87,5 мс:

Вы также можете найти HTTP-запросы от различных плагинов WordPress, которые вы используете, выполнив поиск по имени папки этого плагина на своём сервере. Например, вы можете видеть, что WooCommerce добавляет семь собственных HTTP-запросов:

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

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

На высоком уровне есть две широкие стратегии выполнения меньшего количества HTTP-запросов:

• Удалите HTTP-запросы. По возможности следует полностью удалить все ненужные HTTP-запросы. Например, если у вас есть плагин, который не добавляет ценности вашему сайту и загружает собственные CSS и JavaScript, просто полностью удалите этот плагин, чтобы избавиться от всех его HTTP-запросов.
• Комбинируйте HTTP-запросы. Если у вас есть HTTP-запросы, которые вам абсолютно необходимо загрузить, вы можете объединить их в один файл. Например, вместо шести небольших файлов CSS вы можете объединить их в один более крупный файл CSS, который по-прежнему будет загружаться быстрее, потому что браузеру нужно делать меньше запросов (это не всегда верно для HTTP / 2, который мы обсудите ниже).

Мы начнём с тактики, направленной на удаление HTTP-запросов, а затем разберёмся, как объединить оставшиеся HTTP-запросы. Основная идея — удалить всё, что можно, а затем объединить всё, что осталось.

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

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

Если вы наведёте курсор на имя файла, вы увидите, от какого плагина он исходит. Например, здесь вы можете увидеть запрос от плагина слайдера, который вы можете использовать.

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

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

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

2. Замените тяжёлые плагины на более лёгкие

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

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

Например, популярный плагин AddThis добавляет шесть собственных HTTP-запросов (включая некоторые внешние запросы — подробнее о них через секунду):

Вы можете значительно сократить этот жир, используя более оптимизированные альтернативы, такие как NovaShare или Grow by MediaVine.

3. Условно загружайте скрипты, которые не нужны на всём сайте

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

Например, возьмём популярный плагин Contact Form 7. Вероятно, вам понадобится этот плагин только на нескольких страницах (например, на странице «Свяжитесь с нами»). Однако Contact Form 7 загружает свои скрипты на каждую страницу вашего сайта. Так, например, контактная форма 7 по-прежнему добавляет некоторые HTTP-запросы к вашим сообщениям в блоге, даже если в ваших сообщениях в блоге нет контактных форм.

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

Продвинутая тактика здесь — условно загружать плагины только там, где они нужны. Например, вы можете позволить контактной форме 7 загружаться на странице «Связаться с нами», но отключить её везде.

Если вы не разработчик, вы можете использовать плагины, такие как Asset CleanUp или Perfmatters, чтобы сделать это без кода. С Perfmatters вам сначала нужно включить диспетчер сценариев. Затем вы можете открыть диспетчер сценариев, чтобы просмотреть все сценарии, загружаемые на страницу, и отключить всё, которые не нужны:

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

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

4. Удалите ненужные изображения (и оптимизируйте остальные)

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

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

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

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

5. Используйте отложенную загрузку изображений и видео

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

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

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

6. Ограничьте использование пользовательских шрифтов и / или используйте системные шрифты (то же самое для иконочных шрифтов)

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

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

То же самое и с иконочными шрифтами, такими как Font Awesome и IcoMoon. Иконочные шрифты могут быть полезны, но вам, вероятно, не нужно загружать несколько библиотек иконок. Лучше выбрать только одну библиотеку шрифтов для значков и придерживаться её.

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

7. Отключите эмодзи WordPress.

По умолчанию WordPress добавляет собственный HTTP-запрос для эмодзи. Хотя это всего лишь один HTTP-запрос размером 5,1 КБ, этот файл уже давно является проблемой для поклонников производительности WordPress. Здесь, в Kinsta, мы любим производительность WordPress, поэтому у нас есть полное руководство по отключению эмодзи WordPress.

Самый простой вариант — просто установить и активировать бесплатный плагин Disable Emojis (GDPR friendly). Однако вы можете прочитать наше полное руководство для некоторых других вариантов.

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

8. Уменьшите / исключите сторонние HTTP-запросы.

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

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

Несколько примеров:

• Google Analytics — сценарий отслеживания размещён на серверах Google, но браузеры посетителей по-прежнему должны загружать этот файл.
• Встроенные видеоролики YouTube — вы увидите множество HTTP-запросов к серверам YouTube.
• Сторонние рекламные службы — вы увидите множество сторонних запросов, связанных с показом вашей рекламы.
• Google Fonts (в CDN Google) — вы увидите сторонние запросы к серверам Google для загрузки файлов ваших шрифтов.

Вы можете применить ту же тактику к этим сторонним HTTP-запросам.

Например, если плагин добавляет свои собственные сторонние запросы (как это делает плагин AddThis выше), вы можете удалить его и использовать что-то более оптимизированное.

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

Для необходимых сторонних скриптов, таких как Google Analytics или Facebook Pixel, вы можете поэкспериментировать с размещением этих скриптов локально.

WP Rocket имеет встроенные надстройки для локального размещения Google Analytics и Facebook Pixel, или вы можете использовать такой плагин, как CAOS (Complete Analytics Optimization Suite).

9. Комбинируйте изображения с CSS-спрайтами

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

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

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

• SEO — поскольку вы объединяете изображения в один файл изображения, вы не можете ранжировать отдельные изображения в поиске Google.
• Доступность — поскольку вы не можете добавлять замещающий текст к изображениям, люди с программами чтения с экрана не смогут понять изображения, загруженные с помощью спрайтов CSS (хотя есть некоторые тактики, чтобы исправить это).

Если вы всё ещё не уверены в этой теме, вот пример файла спрайта Amazon CSS — вы можете увидеть, как он включает в себя множество вариантов логотипа, а также некоторые значки. Amazon использует CSS, чтобы гарантировать, что только соответствующая «часть» этого файла изображения отображается в каждом месте:

К сожалению, нет плагина WordPress «установил и забыл» для CSS-спрайтов. Тем не менее, вы можете найти инструменты, которые помогут, например этот CSS Sprite Tool :

1. Загрузите в инструмент изображения, которые хотите объединить.
2. Затем инструмент предоставит вам комбинированный файл изображения вместе с некоторым кодом CSS для каждого загруженного вами изображения.
3. Загрузите объединённый файл изображения на свой сайт WordPress.
4. Используйте код CSS для отображения изображения в вашем контенте. Предоставленный CSS автоматически выберет только правильную часть объединённого файла изображения.

10. Объедините файлы CSS и JavaScript

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

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

Многие плагины кэширования WordPress включают функции для объединения файлов CSS и JavaScript. Например, WP Rocket, который вы можете использовать в Kinsta, позволяет вам включить оба с помощью нескольких щелчков мыши.

Перейдите на вкладку Оптимизация файлов в настройках WP Rocket. Затем включите минификацию, а затем объедините файлы:

Вы также можете использовать Autoptimize для объединения файлов CSS и JavaScript. Чтобы объединить файлы, перейдите в «Настройки» → «Автоматическая оптимизация» и выберите следующие параметры:

• Агрегатные JS-файлы
• Агрегатные CSS-файлы

Преимущества сочетания файлов менее очевидны с HTTP / 2, который использует ваш сайт, если вы размещаете его в Kinsta. HTTP / 2 разработан, чтобы быть более эффективным при передаче нескольких небольших файлов, что означает меньшую разницу между одним большим файлом CSS / JS и несколькими небольшими файлами.

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

Однако многие инструменты тестирования производительности, такие как GTmetrix, по-прежнему не распознают HTTP / 2, поэтому GTmetrix может по-прежнему отображать сообщение «Сделайте меньше HTTP-запросов» и снижает ваш результат. Однако помните — оценки не так важны, как реальное время загрузки страницы.

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

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

Это также может помочь с сообщением «избегать цепочки критических запросов» в Google PageSpeed ​​Insights / Lighthouse.

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

Лучшие плагины WordPress для уменьшения количества HTTP-запросов

Если вы ищете несколько плагинов WordPress «всё в одном», чтобы делать меньше HTTP-запросов, мы рекомендуем два плагина из приведённого выше руководства:

• Ракета WP.
• Perfmatters.

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

Заключение

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

Если вы используете WordPress, ваша тема обязательно добавит свои собственные HTTP-запросы, а многие плагины также добавят свои собственные HTTP-запросы. У вас также будут HTTP-запросы от любых изображений, которые вы используете, и сторонних скриптов, которые вы добавляете (например, инструментов аналитики ).

Чем больше и / или больше HTTP-запросов, тем медленнее будет веб-сайт. Вот почему вы обычно будете видеть такие сообщения, как «сделайте меньше HTTP-запросов» или «оптимизируйте HTTP-запросы» или «избегайте цепочки критических запросов», когда вы используете инструменты тестирования скорости, такие как GTmetrix или PageSpeed ​​Insights.