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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

Сообщить об ошибке

Отменить
1220
How-to Читать 6 минут 22 марта 2019

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

Минимизация количества HTTP-запросов на сайте
ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — СЕРВЕР
Инструкцию одобрила
SEO-специалист в CF.Digital
HTTP-запросы передают серверу сообщение, которое посылает пользователь. Уменьшаются они путем объединения компонентов, картинок, кеширования, разделения компонентов по серверам и другими методами.

Что такое HTTP-запросы и зачем они нужны

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

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

Почему из-за HTTP-запросов падает скорость загрузки документов

Увеличение объема данных

В процессе загрузки имеют значение величина заголовка ответа и объем передаваемых данных. Заголовки обычно включают:

  • версию веб-браузера;
  • поддерживаемые форматы данных;
  • желаемый язык отображения контента;
  • выбранные алгоритмы сжатия;
  • сведения о выбранной кодировке;
  • cookies;
  • POST/GET-сведения и т. д.

Для загрузки красочных веб-страниц с продуманным дизайном может отправляться до 40 запросов. И если для показа одного компонента требуется около 1000 байт, то в таком случае общий размер составит до 40 000 байт, или 40 Кб.

Как посчитать количество HTTP-запросов при загрузке веб-страниц

Показатель можно смотреть в браузерах.

Mozilla Firefox

В Firefox используйте расширение Firebug. Оно эффективное, но в большинстве браузеров есть встроенные аналоги, которые имеют не менее эффективный функционал.

Чтобы воспользоваться расширением:

  • перейдите в раздел «Сеть»;
  • обновите веб-страницу;
  • проверьте количество запросов внизу.
Число HTTP-запросов в плагине Firebug в Firefox

Opera и Google Chrome

В этих двух веб-браузерах есть встроенные инструменты для подсчета. Чтобы воспользоваться ими:

  • откройте в них свой сайт;
  • нажмите правой кнопкой мыши в любой части документа и выберите «Исследовать компонент»;
  • зайдите во вкладку «Сеть»;
  • обновите веб-страницу, чтобы внизу посмотреть точное количество запросов.

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

Объединение компонентов

Объединяя компоненты для загрузки в один файл, специалисты уменьшают их количество. Следовательно, количество HTTP-запросов уменьшается. Если подключены 3 таблицы стилей и 4 сценария JavaScript, отправится 8 запросов (7+1 для HTML-кода).

Чтобы минимизировать показатель, достаточно собрать таблицы стилей в один файл, а библиотеки — в другой. Так количество запросов снизится с 8 до 3.

Можно использовать специальные инструменты, например, Minify. К слову, приложение минимизирует не только статику, но и HTML. Написано оно для PHP.

При объединении JavaScript-сценариев могут возникнуть трудности с теми скриптами, в которых используется метод document.write для отображения части текста.

Чтобы устранить неудобства, придется эти участки кода модифицировать, убирая document.write. Либо не объединять такой скрипт с другими.

Объединение картинок SVG-формата

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

Например:
<svg width="20">
  <rect fill="#fc0"
    width="20"
    height="20"/>
  <line stroke="black"
    x1="0" y1="0"
    x2="20" y2="20"/>
</svg>
Данный формат подходит для графики, оформляющей контент.

Ранее популярным был метод CSS-спрайт. При нем для загрузки требуемого компонента веб-страницы использовались свойства background-image, background-position.

Один из вариантов использования CSS-спрайта:
Использование CSS-спрайта для объединения картинок
Делали такие картинки вручную или через spritegen. Но данная технология уже устарела и все больше вебмастеров отдает предпочтение SVG изображениям. Основная причина именно в том, что изображения задаются только определенного размера, а для «резиновой верстки» это не актуально.

У этой технологии есть недостатки:

  • Усложняется процесс разработки. Верстая страницы, необходимо учитывать отличия элементов при отображении в разных браузерах.

  • Усложняется процесс обновления. Если понадобится удалить или модифицировать один графический компонент, придется редактировать всю картинку.

  • Появляется риск уменьшения скорости загрузки страниц. Так бывает, если спрайты применяются неправильно.

  • Отсутствуют свои URL у CSS-спрайтов. Если у посетителя в веб-браузере будет отключено отображение графики, на месте таких картинок ничего не загрузится.

Кэширование

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

Чтобы включить режим, достаточно поместить в папку www.domain.tld/res/ файл .htaccess с инструкциями:
Кэширование сайта через htaccess
В таком случае файл не будет перезагружаться с сервера до выбранной в третьей строке даты.

Распределение компонентов между серверами

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

Что еще влияет на количество HTTP-запросов

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

Ниже показано, как это происходит на примере плагина WP Subscriber Form:
Влияние плагинов WordPress на HTTP-запросы
Собственные CSS и JavaScript-файлы могут содержать и темы.

Заключение

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

Самые популярные способы сокращения HTTP-запросов:

  • объединение элементов — таблицы стилей, библиотеки JavaScript;

  • объединение картинок;

  • Inline-картинки;

  • кэширование;

  • распределение компонентов между серверами.
Эта статья — часть модуля «Список задач» в Serpstat
«Список задач» в Serpstat
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач»

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

5 из 5 на основе 1 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Поделитесь статьей с вашими друзьями

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Lite или выше, чтобы получить доступ к инструменту Подробнее

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов