Анализ HTTP-запросов и влияния их числа на производительность WordPress
От скорости загрузки современного веб-сайта зависит удержание посетителей, их вовлеченность и, в конечном итоге, конверсия. В свою очередь, на скорость загрузки сайта влияет множество факторов, и один из наиболее существенных – количество HTTP-запросов.
В этой статье я объясню, что такое HTTP-запрос, как подсчитать количество запросов применительно к конкретной веб-странице, как это количество влияет на производительность WordPress, как различные плагины и темы могут снижать скорость загрузки сайта и как можно решить проблему низкой скорости.
Что такое HTTP-запрос?
Когда браузер отображает страницу, он запрашивает у веб-сервера по протоколу HTTP различные статические компоненты страницы (например, стили CSS, скрипты JavaScript или изображения), и сервер отвечает, посылая браузеру соответствующие файлы.
Запрос, посылаемый браузером серверу при помощи HTTP, называется «HTTP-запрос».
Анализ HTTP-запроса
Чтобы лучше понять смысл HTTP-запроса, взгляните на HTML-код простой веб-страницы:
Как видите, данная страница содержит в себе 4 HTTP-запроса.
Влияние числа HTTP-запросов на WordPress
Как сказано в Правилах производительности Yahoo:
Уменьшение количества этих компонентов, в свою очередь, уменьшает количество 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 увеличивает количество компонентов на странице, тем самым увеличивая количество 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 имеет опции для комбинирования и минимизирования стилей и скриптов:
Будучи веб-разработчиком, я редактирую плагины, которые добавляют компоненты в WordPress, вырезая из них JavaScript и CSS, комбинируя их и помещая внутрь скриптов и стилей моей темы.
Заключение
Трудно переоценить значение ускорения работы веб-сайта. Медленный сайт отталкивает посетителей.
Существует много приёмов ускорения работы веб-сайтов, один из которых – уменьшение числа HTTP-запросов – мы и рассмотрели в этой статье.