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

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

Отменить
6820 1
How-to Читать 6 минут

Как уменьшить количество 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-бальной шкале

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