Влияние HTTP-запросов на производительность WordPress

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

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

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

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

Анализ HTTP-запроса

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

Здесь вы можете видеть четыре HTTP-запроса.

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

Как утверждает правило производительности Yahoo:

«80% времени ответа приходится на фронтэнд. Большая часть этого времени тратится на загрузку всех компонентов страницы: изображений, стилевых таблиц, скриптов, флэша и т.д. Сокращение числа компонентов поочередно снижает количество HTTP-запросов, требуемых для представления страницы. Это и есть ключ к ускорению работы страниц»

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

Подсчет числа HTTP-запросов

Используя расширения Firebug для Firefox, а также инструмент Inspect Element для Google Chrome и Opera, вы можете легко определить число запросов для веб-страницы.

Давайте проверим число HTTP-запросов для нашего WordPress-блога.

Используя Firefox

• Убедитесь в том, что у вас установлено расширение Firebug.
• Загрузите свой WordPress-блог и нажмите F12, чтобы открыть консоль Firebug
• Перейдите к Net Panel. Если она отключена, включите ее.
• Обновите свой WordPress-сайт, чтобы Net Panel получила и записала HTTP-запросы
• Вы должны увидеть число HTTP-запросов, как на изображении ниже.

Используя Chrome и Opera

В отличие от Firefox, вам не нужно ставить расширение в Chrome и Opera, чтобы проверить HTTP-запросы, поскольку в этих браузерах есть встроенный инструмент Inspect Element.

Шаги ниже верны как для Chrome, так и для Opera:

• Загрузите свой WordPress-блог
• Сделайте правый щелчок и выберите Inspect Element
• Перейдите в Network Panel и обновите свой WordPress-сайт
• Вы увидите число HTTP-запросов, как на изображении ниже.

Знаете ли вы, что установка большинства WordPress-плагинов увеличивает количество компонентов веб-страницы, то есть увеличивает число HTTP-запросов?

Как плагины и темы увеличивают число HTTP-запросов

Большинство плагинов, устанавливаемых нами, увеличивают число HTTP-запросов, чего мы даже не осознаем.

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

В качестве рабочего примера давайте рассмотрим WP Subscriber Form, чтобы понять, как именно плагины увеличивают число HTTP-запросов.

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

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

<link rel="stylesheet" type="text/css" href="http://example.dev/wp-content/plugins/wp-subscriber-form/subscriber-form.css" />

Как и в случае с плагинами, WordPress-темы содержат в себе массу CSS и JS-компонентов. Типичная тема состоит из встроенных шрифтов, CSS и JS-компонентов, которые увеличивают количество запросов.

Связь между минимизацией и HTTP-запросами

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

Размер CSS и JS компонентов может быть снижен посредством минимизации (удаления всех лишних символов и пробелов из исходного кода).

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

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

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

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

Производительность WordPress может быть заметно улучшена при помощи объединения и минимизации CSS и JS-файлов темы.

Существует несколько WordPress-плагинов, таких как WP Minify и Better WordPress Minify, которые позволяют объединить JS и CSS в отдельные файлы, сократив тем самым количество HTTP-запросов.

Если вы используете W3 Total Cache, то вам не нужно устанавливать плагины, перечисленные выше, поскольку у данного плагина уже есть опции по минимизации и объединению CSS и JavaScript.

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

Источник: code.tutsplus.com