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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например:

Данный формат подходит для графики, оформляющей контент.

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

Один из вариантов использования CSS-спрайта:

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

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

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

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

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

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

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

В таком случае файл не будет перезагружаться с сервера до выбранной в третьей строке даты.

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

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

Ниже показано, как это происходит на примере плагина WP Subscriber Form:

Собственные CSS и JavaScript-файлы могут содержать и темы.

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

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

• объединение элементов — таблицы стилей, библиотеки JavaScript;
  
  
• объединение картинок;
  
  
• Inline-картинки;
  
  
• кэширование;
  
  
• распределение компонентов между серверами.