Следующая статья поможет вам: Как уменьшить HTTP-запросы вашего сайта
Каждый раз, когда вы просматриваете веб-страницы, за кулисами происходит множество технических вещей, чтобы доставить контент на ваш экран.
Инженеры обычно управляют этой деятельностью. Маркетологи, даже те, у кого есть технические навыки, склонны избегать этого. Одним из таких действий является HTTP-запрос, и на самом деле это не так сложно, как вы думаете. На самом деле, маркетологи должны иметь хотя бы общее представление о действия, которые выполняет их собственный веб-сайт каждый раз, когда человек посещает его.
Показатели, за которые, как правило, отвечают маркетологи, могут сильно зависеть от того, как разработана серверная часть веб-сайта. Например, большое количество HTTP-запросов на вашей веб-странице может замедлить время загрузки страницы, что в конечном итоге ухудшит взаимодействие с пользователем. Это может привести к тому, что ваши посетители покинут страницу быстрее, если она загружается недостаточно быстро (что увеличивает
«показатель отказов»).
HTTP-запросы могут влиять на многочисленные ключевые показатели, которые определяют, насколько ваша аудитория вовлечена в ваш бизнес.
Итак, что же такое HTTP-запрос? Как это влияет на пользовательский опыт? И что маркетолог может сделать с HTTP-запросами своего веб-сайта? Давайте рассмотрим каждый из этих вопросов один за другим. К концу вы лучше поймете, почему эти протоколы ответов важны, и что вы можете сделать, чтобы посетители вашего веб-сайта работали лучше и быстрее.
Каждый раз, когда кто-то посещает страницу вашего веб-сайта, обычно происходит следующее:
- Веб-браузер человека (популярные браузеры включают Chrome, Firefox и Safari) отправляет запрос на ваш веб-сервер. На вашем сервере размещена веб-страница, которую они пытаются посетить на вашем сайте.
- Браузер запрашивает, чтобы ваш сервер отправил файл, содержащий контент, связанный с этой страницей. Этот файл может содержать текст, изображения или мультимедиа, которые есть на вашей веб-странице.
- Как только браузер человека получает этот файл, он начинает отображать ваш веб-сайт на экране компьютера или мобильного устройства человека.
- Если на вашей веб-странице есть еще контент, который браузер еще не получил, браузер отправит еще один HTTP-запрос.
Приведенные выше шаги описывают один HTTP-запрос, от запроса до ответа. HTTP расшифровывается как «протокол передачи гипертекста», что является просто причудливым названием для веб-браузера, отправляющего запрос на файл, и сервера, отправляющего (или «передающего») этот файл в браузер.
Почему HTTP-запросы влияют на взаимодействие с пользователем
Есть две причины, по которым HTTP-запросы могут повлиять на работу вашего веб-сайта: число запрашиваемых файлов и размер передаваемых файлов.
Больше файлов = больше HTTP-запросов
Веб-браузер должен делать отдельный HTTP-запрос для каждого отдельного файла на вашем веб-сайте. Если на вашем веб-сайте не так много файлов, запрос и загрузка контента на вашем сайте не займет много времени. Но на большинстве хороших веб-сайтов много файлов.
Чем больше файлов на вашем веб-сайте, тем больше HTTP-запросов потребуется браузеру вашего пользователя. Чем больше HTTP-запросов делает браузер, тем дольше загружается ваш сайт.
Большие файлы = более длинные HTTP-запросы
Размер передаваемого файла также влияет на то, сколько времени может занять загрузка страницы на экране пользователя. И точно так же, как файлы на вашем компьютере имеют разный размер — измеряется в байтах (Б), килобайтах (КБ), мегабайтах (МБ) и т. д. — так же и файлы, встроенные на вашу веб-страницу. Большие изображения высокой четкости являются распространенной причиной больших размеров файлов.
Другими словами, чем больше или выше разрешение контента на вашем веб-сайте, тем больше размер его файла. Чем больше размер файла, тем больше времени потребуется для его передачи с вашего сервера в браузер пользователя.
Чем дольше этот файл находится в пути, тем дольше браузер пользователя должен ждать, прежде чем он отобразит этот контент на своем экране.
Как HTTP-запросы влияют на взаимодействие с пользователем
Длительное время загрузки может быть разрушительным и разочаровывающим для ваших пользователей. У мобильных пользователей будет особенно плохой опыт, так как большинству из них придется ждать, пока все активы на веб-странице будут загружены, прежде чем страница начнет отображаться в их мобильном браузере.
И исследования показывают, что время загрузки имеет значение, когда речь идет о производительности веб-сайта. По данным из Пингдоммонитор производительности веб-сайта, показатель отказов страницы может вырасти с 9% до колоссальных 38%, если время загрузки страницы увеличится с 2 до 5 секунд.. Это связано с тем, что гораздо больше людей «уходят» с вашего сайта во время этой трехсекундной задержки.
Итак, к какому магическому количеству HTTP-запросов должен стремиться веб-сайт? Ответ «один». Некоторые люди думают, что могут решить проблему, используя только один файл JavaScript для управления всем своим веб-сайтом. Но помните: файл также влияет на время загрузки. Для сложных веб-сайтов этот один файл может оказаться невероятно долгим путешествием от вашего сервера до браузера вашей аудитории.
Хотя не обязательно оптимальное количество файлов, до которых должна быть уменьшена ваша веб-страница, главный менеджер по маркетингу продуктов HubSpot Джеффри Воселл предлагает стремиться к от 10 до 30 файлов.
Для большинства высокопроизводительных веб-сайтов это сложно и обычно требует специальных инженерных ресурсов. По состоянию на март 2019 г. среднее количество запросов HTTP-страницы для загрузки веб-страницы на мобильном или настольном компьютере было от 69 до 75 запросов.
Как сделать меньше HTTP-запросов на ваш сайт
1. Оцените производительность вашего веб-сайта, чтобы найти основную проблему.
Если вы начинаете с нуля, не зная, как работает ваш веб-сайт, вам сначала понадобится подробный отчет об общем состоянии вашего веб-сайта. Чтобы получить этот отчет, проверить веб-сайт HubSpot Grader.
Используя Website Grader, просто введите свой адрес электронной почты и URL-адрес веб-страницы, которую вы хотите проверить. Вы получите бесплатный персонализированный отчет, в котором оценивается ваш сайт по ключевым показателям, включая готовность к мобильным устройствам, SEO, общий размер файла вашей страницы и, конечно же, количество HTTP-запросов, которые получает страница.
Этот оценщик может помочь вам диагностировать точную проблему, которая, как вы подозреваете, существует на вашем веб-сайте. Например, если у вас небольшое количество запросов страниц, но большой размер страницы, ваша цель должна состоять в том, чтобы уменьшить размер мультимедиа на вашем веб-сайте — обязательно уменьшить количество HTTP-запросов, которые вы требуете от браузеров. .
2. Проверьте, сколько HTTP-запросов в настоящее время делает ваш сайт.
Как только вы получите представление о том, насколько «большой» является ваша веб-страница и сколько ей требуется запросов страниц, используйте Панель сети Google Chrome чтобы углубиться в эти цифры. Этот инструмент позволяет каждому легко проверить, что находится на вашей странице, сколько HTTP-запросов делает страница и какой файл загружается дольше всего.
Чтобы найти длину запроса…
Во-первых, этот инструмент показывает вам все файлы, которые браузер должен был запросить и передать, чтобы загрузить страницу, а также показывает временную шкалу, когда это произошло. Например, API Google Chrome может точно сказать, когда начался HTTP-запрос изображения и когда был получен последний байт изображения. Это действительно полезный способ увидеть, что находится на вашей странице и что долго загружается.
Чтобы увидеть панель сети для данной веб-страницы, откройте веб-страницу в Google Chrome. В главном меню Chrome в верхней части экрана перейдите к Вид > Разработчик > Инструменты разработчика.
Панель «Сеть» откроется в вашем браузере. Поскольку он записывает всю сетевую активность, когда DevTools открыт, панель может быть пустой при первом ее открытии. Перезагрузите страницу, чтобы начать запись, или просто дождитесь сетевой активности в вашем приложении.
Вот краткий обзор того, что означает все на панели «Сеть»:
Чтобы подсчитать HTTP-запросы…
Любопытно, сколько запросов требует ваш сайт? Панель «Сеть» также сообщит вам об этом. Взгляните на самый нижний левый скриншот выше, и вы увидите общее количество запросов; в данном случае это 25 запросов.
Чтобы узнать, как читать панель и более подробно оценивать производительность сети, прочитать этот ресурс Google Chrome.
3. Удалите ненужные изображения.
На этом этапе вы должны иметь представление о том, какие файлы загружаются дольше всего, включая файлы изображений. Самый простой способ уменьшить количество запрашиваемых файлов? Удалите ненужные изображения.
Изображения являются ценным активом веб-страницы, потому что они обеспечивают сильное визуальное впечатление на ваших веб-страницах. Однако, если на вашей странице есть изображения, которые не представляют особой ценности, лучше всего просто удалить их, особенно очень большие.
4. Уменьшите размер файла остальных изображений.
Для изображений, которые вы сохраняете, используйте фотографии высокого качества со сжатым размером файла. Это поможет сократить время, необходимое для выполнения HTTP-запроса, тем самым сократив время загрузки.
Если вы являетесь пользователем HubSpot, вам не нужно слишком беспокоиться об изменении размера и сжатии изображений. HubSpot COS автоматически изменит размер и сожмет ваши изображения, когда вы загрузите их в файловый менеджер HubSpot. Чтобы изменить размер изображения, загрузив его в файловый менеджер, нажмите «Клонировать и отредактировать», как показано ниже:
Имейте в виду, что вы всегда можете уменьшить размер файла ваших изображений, прежде чем загружать их на свой веб-сайт. Например, если у вас есть веб-страница с множеством отдельных изображений, вам следует максимально уменьшить размер их файлов перед публикацией страницы.
Если возможно, мы рекомендуем уменьшить размер файла каждого изображения до менее 100 КБ. В зависимости от изображения вам, возможно, придется пойти на компромисс по этому минимуму, и это нормально. Просто старайтесь изо всех сил, чтобы ваши отдельные файлы не попадали на территорию мегабайтов («МБ»).
Чтобы сжать ваши изображения до минимума, используйте такой инструмент, как сквош, инструмент, разработанный Google для уменьшения размера файла изображения за счет небольшого снижения качества изображения. Чем больше вы уменьшаете размер файла, тем ниже может быть качество изображения — используйте скользящий индикатор сжатия Squoosh, чтобы найти баланс между качеством и размером, который вам подходит.
Однако ваше время драгоценно, а сжатие изображений по одному может оказаться утомительной задачей. Чтобы сжать несколько изображений одновременно, рассмотрите возможность использования КрошечныйPNG.
5. Настройте свой сайт на асинхронную загрузку файлов JavaScript.
По умолчанию многие веб-сайты загружают содержимое, написанное на JavaScript, сверху вниз на веб-странице. Таким образом, даже если веб-браузер пользователя выполняет более одного HTTP-запроса за раз, контент, который он получает, загружается по частям. Это также известно как «блокировка рендеринга», и это может замедлить загрузку всей вашей веб-страницы, потому что каждый файл ожидает своей очереди для загрузки в веб-браузере пользователя.
Настройка вашего веб-сайта на загрузку JavaScript «асинхронно» может переопределить это правило, и делает для лучшего взаимодействия с пользователем.
Асинхронная загрузка позволяет содержимому веб-сайта отображать несколько элементов страницы одновременно, независимо от того, где они находятся на странице. В WordPress есть многочисленные плагины которые могут помочь вам сделать это. HubSpot также позволяет вам изменить место отображения популярного элемента JavaScript, известного как «jQuery», на веб-странице, чтобы вы не застряли в ожидании его загрузки. Посмотрите на скриншот ниже, чтобы увидеть эту опцию, и узнайте больше о ней. здесь.
Чтобы узнать больше о том, как сделать код JavaScript асинхронным, ознакомьтесь с эта презентация Стива Содерса и это сообщение в блоге Visual Website Optimizer.
6. Оцените другие части вашей страницы, которые увеличивают время загрузки страницы.
Обрезка и сжатие изображений — отличный первый шаг к сокращению HTTP-запросов и времени загрузки страницы. Но что еще вы видели на панели «Сеть», добавляющей запросы? Например, вы можете обнаружить, что видео или Twitter интеграция добавляет целую секунду или две ко времени загрузки. Это хорошо знать. Оттуда вы и ваша команда можете решить, стоит ли хранить эти активы.
7. Объедините файлы CSS вместе.
Каждый файл CSS, который вы используете для своего веб-сайта, увеличивает количество HTTP-запросов, необходимых вашему веб-сайту, тем самым увеличивая скорость загрузки вашей страницы. Хотя иногда это неизбежно, в большинстве случаев вы действительно можете объединить два или более файла CSS вместе. (Возможно, вам придется обратиться за помощью к разработчику для этого.)
Что это значит? Каждый раз, когда вы определяете несколько похожих файлов CSS, перечисленных в HTML-коде вашего веб-сайта, у вас есть возможность объединить эти файлы в один файл, чтобы браузеру пользователя не приходилось делать более одного HTTP-запроса для создания этих файлов. Вот пример группы отдельных файлов CSS перед их объединением:
Теперь взгляните, как можно объединить все эти файлы в одну строку или файл:
Если вы используете HubSpot, вы можете автоматически объединять множество файлов CSS.
Код CSS может находиться где угодно на вашем сайте или в любом количестве файлов, и он все равно будет работать так же хорошо. Фактически, часто единственная причина сайт имеет несколько файлов CSS в первую очередь потому, что дизайнеру сайта было проще работать с отдельными файлами. Чтобы узнать больше об объединении файлов CSS, взгляните на это руководство по производительности внешнего веб-сайта.
