Как уменьшить HTTP-запросы на сайте WordPress + как их анализировать и исправлять

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

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

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

Вот все, что я расскажу:

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

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

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

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

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

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

Понимаете идею? Каждый HTTP-запрос – это запрос другой информации, чтобы помочь браузеру создать страницу.

Вы можете иметь как внутренние, так и внешние HTTP-запросы. Например, браузер может запросить изображение с сервера вашего сайта WordPress и скрипт отслеживания с внешнего сервера, такого как Google Analytics.

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

Например, простому сайту портфолио WordPress нужно только 18 запросов, в то время как веб-сайт New York Times имеет 231 запрос, в значительной степени из-за огромного количества скриптов отслеживания.

Почему HTTP-запросы имеют значение для сайтов WordPress?

Вы, вероятно, можете увидеть, где это происходит …

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

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

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

Так что, если вы хотите более конкретную версию, это что-то вроде …

• Исключите ненужные HTTP-запросы, чтобы иметь как можно меньше запросов
• Обратите особое внимание на медленные HTTP-запросы, поскольку они оказывают большее влияние

Как анализировать HTTP-запросы в WordPress

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

• Сколько всего запросов на вашем сайте
• Каждый индивидуальный запрос
• Насколько велик каждый запрос
• Сколько времени занимал каждый запрос

Большинство инструментов тестирования производительности могут помочь вам выполнить анализ водопада, в том числе:

• Инструменты разработчика Chrome
• GTmetrix
• Инструменты Pingdom
• WebPagetest

Я собираюсь использовать GTmetrix для этих примеров, потому что мне нравится его интерфейс, но основная идея одинакова во всех инструментах.

Для начала перейдите в GTmetrix и вставьте URL, который вы хотите проанализировать. GTmetrix даст вам общее представление о количестве HTTP-запросов в разделе « Сведения о странице », но вы хотите, чтобы вкладка « Водопад » была более глубокой:

Вот как выглядит диаграмма водопада :

И вот что означают столбцы:

• URL – это конкретный файл, который был запрошен. Вы можете отфильтровать его, чтобы найти HTTP-запросы, добавленные определенными плагинами или темами WordPress.
• Домен – это позволяет узнать, был ли запрос на сервер вашего сайта WordPress или на внешний домен.
• Размер – это размер файла, который был запрошен.
• Временная шкала – это время загрузки файла, а также место загрузки файла на временной шкале загрузки вашей страницы. Некоторые файлы будут загружены в начале, а другие – в конце. Это самый сложный раздел, потому что там, где загрузка файла также важна – дело не только в том, сколько времени это займет.

Для более глубокого взгляда, у GTmetrix есть действительно хорошее руководство «Водопад для начинающих» .

Просматривая URL-адреса, вы можете начать понимать, что происходит на вашем сайте WordPress.

Например, если вы введете «wp-content / plugins» в поле поиска, вы увидите HTTP-запросы, которые плагины добавили на ваш сайт. В частности, плагин Lightweight Social Fonts добавляет запрос шрифта 22,9 КБ для «fontello.woff», который занимает 337 мс:

Точно так же вы можете переключиться в папку «Темы», чтобы увидеть 4 запроса из темы GeneratePress, что чертовски мало, потому что GeneratePress так хорошо оптимизирован :

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

Например, стоит ли плагин, на который вы смотрите, 5 дополнительных HTTP-запросов, которые занимают 500 мс? Это может быть, если это необходимо … но не может быть, если это то, без чего вы могли бы жить.

5 советов по уменьшению WordPress HTTP-запросов

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

1. Ограничьте изображения, когда это возможно

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

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

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

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

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

Многие плагины производительности WordPress могут помочь вам объединить файлы, включая WP Rocket ( наш обзор ). Или вы можете использовать Autoptimize как отдельный инструмент минификации / объединения.

3. Не позволяйте плагинам загружаться в пустую, если это не требуется

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

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

По сути, это означает, что некоторые плагины добавят 1+ HTTP-запросов на каждую страницу вашего сайта без причин – это не хорошо!

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

4. Удалите / замените неоптимизированные плагины

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

Итак, если вы видите плагин с тоннами медленно загружаемых HTTP-запросов при анализе водопадов, стоит подумать о том, сможете ли вы:

• Полностью удалите его с вашего сайта, если эта функциональность не нужна для функционирования вашего сайта.
• Замените его на более легкий вариант.

5. Рассмотрим ленивую загрузку

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

Ленивая загрузка – это метод, позволяющий отложить загрузку определенных активов «ниже сгиба» (например, изображений) до тех пор, пока пользователь не начнет прокрутку вниз.

Уменьшите WordPress HTTP-запросы сегодня

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

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

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

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

Любые вопросы? Дайте нам знать об этом в комментариях!