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

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

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

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

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

Запрос, посылаемый браузером серверу при помощи HTTP, называется «HTTP-запрос».

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

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

HTML-код

Как видите, данная страница содержит в себе 4 HTTP-запроса.

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

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

80% времени отклика среднего веб-сайта зависит от работы фронтенда. Большая часть этого времени уходит на загрузку всех компонентов страницы: графики, стилей, скриптов, Flash-анимации и т. д.

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

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

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

Число запросов, содержащихся в одной странице, несложно подсчитать с помощью расширения для браузера Firefox, которое называется Firebug, или встроенного в браузеры Opera и Google Chrome инструмента «Inspect Element».

Используем Firefox

Убедитесь, что Firebug установлен:

  • Откройте ваш блог на WordPress и нажмите F12, чтобы открыть консоль Firebug;
  • Перейдите на вкладку «Сеть». Если она запрещена, разрешите её;
  • Обновите страницу вашего сайта, чтобы Firebug захватил и записал все HTTP-запросы;
  • Вы увидите общее количество запросов в нижней части вкладки:
количество запросов

Используем Google Chrome или Opera

В отличие от Firefox, в Opera или Google Chrome нам не потребуется устанавливать какие-либо расширения. Мы можем использовать инструменты, встроенные в эти браузеры.

Следующие шаги можно использовать в обоих браузерах:

  • Откройте ваш сайт на Wordpress;
  • Щёлкните правой кнопкой мыши на странице и выберите пункт «Исследовать элемент»;
  • Перейдите на вкладку «Сеть» и обновите страницу сайта;
  • Вы увидите общее количество запросов в нижней части вкладки:
    Используем Google Chrome

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

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

Множество плагинов, которые мы устанавливаем, увеличивают количество HTTP-запросов незаметно для нас.

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

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

Активация плагина поместит форму подписки в подвал поста, а также включит ссылку на свой файл стилей в страницу WordPress:

Активация плагина

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

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

Как соотносятся минимизация и HTTP-запросы

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

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

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

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

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

WordPress использует в своих темах CSS-тэг background-image. Вы можете перевести изображения, загружаемые этим тэгом, в спрайты.

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

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

Если вы используете плагин W3 Total Cache, то в вышеприведённых плагинах нет необходимости, так как W3 Total Cache имеет опции для комбинирования и минимизирования стилей и скриптов:

W3 Total Cache

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

Заключение

Трудно переоценить значение ускорения работы веб-сайта. Медленный сайт отталкивает посетителей.

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

Перевод статьи «Analysis and Effects of HTTP Requests on WordPress Performance» был подготовлен дружной командой проекта Сайтостроение от А до Я.

21 мая 2014 в 11:15
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок