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

HTTP-запросы — это то, как браузеры запрашивают просмотр ваших страниц. Когда ваша веб-страница загружается в браузере, браузер отправляет HTTP-запрос на веб-сервер для страницы в URL. Затем, когда HTML доставляется, браузер анализирует его и ищет дополнительные запросы для изображений, сценариев, CSS, Flash и так далее.

Каждый раз, когда он видит запрос на новый элемент, он отправляет другой HTTP-запрос на сервер. Чем больше изображений, скриптов, CSS, Flash и т. Д. На вашей странице, тем больше будет запросов и тем медленнее будут загружаться ваши страницы. Самый простой способ уменьшить количество HTTP-запросов на ваших страницах — это не использовать много (или любых) изображений, скриптов, CSS, Flash и т. Д. Но страницы, которые являются просто текстом, скучны.

Как уменьшить HTTP-запросы без разрушения вашего дизайна

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

  • Объединить файлы — Использование внешних таблиц стилей и сценариев важно для того, чтобы они не затягивали время загрузки страницы, но у вас не должно быть более одного CSS-файла и одного файла сценария.
  • Используйте CSS-спрайты — Когда вы объединяете большинство или все ваши изображения в спрайт, вы превращаете несколько запросов изображений в один. Затем вы просто используете CSS-свойство background-image для отображения нужного вам фрагмента изображения.
  • Карты изображений — Карты изображений не так популярны, как когда-то, но если у вас есть смежные изображения, они могут уменьшить количество запросов HTTP изображений до одного.

Использование кэширования для улучшения времени загрузки внутренних страниц

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

Ссылка на основную публикацию