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

Интересное из сети

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

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

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

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

Запросы, отправленные браузером серверу по протоколу HTTP, вызываются.HTTP-запросы».

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

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

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

Как вы можете видеть, на этой странице содержится четыре HTTP-приложения.

Влияние количества HTTP-приложений на WordPress

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

 

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

 

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

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

ЧИТАТЬ ЕЩЁ:  Будем экономить на промокодах

Подсчет количества HTTP-приложений

Количество приложений на странице несложно подсчитать, расширив браузерFirefoxНазываетсяFirebugили встроенныйопера иGoogle Chrome Инструменты "Проверьте элемент».

Используйте Firefox

Проверьте это с помощьюFirebug Установлено:.

Откройте свой блог WordPress и нажмите F12, чтобы открыть консольFirebugНажмите на "Вкладки". Если не разрешено, то разрешить? Обновите страницу сайта.Firebug Арестовывать и записывать все HTTP-приложения? В нижней части вкладки вы увидите общее количество заявок.

Использование Firefox

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

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

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

Открыть свой сайт в WordPress? Щелкните правой кнопкой мыши на странице, чтобы выбрать ее".'Исследовать предметы'.Нажмите кнопку "Переход по вкладкам", чтобы обновить страницу сайта. В нижней части вкладки вы увидите общее количество заявок.

Использование Google Chrome или Opera

Знаете ли вы, что установка большинства добавок WordPress увеличивает количество данных на странице и увеличивает количество HTTP-приложений?

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

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

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

Чтобы понять, как поднимаются HTTP-приложения, рассмотрим в качестве примера ADD -ONФорма подписчика WP.

После активации плагина в нижнем колонтитуле поста размещается форма регистрации, которая также содержит ссылку на файл стилей страниц WordPress.

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

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

ЧИТАТЬ ЕЩЁ:  7 лучших Instagram-плагинов для WordPress

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

Минификация в сравнении с HTTP-запросами

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

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

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

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

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

WordPress использует тег CSSФоновые изображения.. Этот тег позволяет преобразовывать загруженные изображения в спрайты.

Сокращение файлов CSS и JavaScript вашей темы может значительно повысить производительность WordPress.

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

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

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

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

Заключение

Важность быстрого веб-сайта невозможно переоценить. Медленные веб-сайты отталкивают посетителей.

 

Оцените статью