Задержка — задержка между запросом пользователя в веб-приложении и получением ответа — может сыграть важную роль в производительности вашего веб-сайта.
Минимизируя его, вы можете гарантировать, что запрос пользователя - будь то проверка на вашем веб-сайте электронной коммерции или нажатие на внутреннюю ссылку - будет выполнен как можно быстрее. Это ключ к обеспечению бесперебойного взаимодействия с пользователем на вашем веб-сайте.
В этом посте мы обсудим, что такое задержка и как она работает. Затем мы рассмотрим несколько способов улучшить ваш. Давайте начнем.
Что такое задержка?
Задержка — это задержка между браузером, отправляющим запрос на сервер, и сервером, обрабатывающим этот запрос в сети или подключении к Интернету. Обычно он измеряется в миллисекундах.
Задержку можно измерить двумя способами. Во-первых, это время приема-передачи (RTT), или количество времени, необходимое для перемещения запроса из браузера на сервер и обратно. Второй — это время до первого байта (TTFB), или промежуток времени между отправкой браузером запроса на сервер и получением его первого байта данных.
Задержка, связанная с базовой HTML-страницей или другим отдельным ресурсом, может показаться незначительной. Но задержка, связанная с веб-сайтом, может существенно повлиять на взаимодействие с пользователем, поскольку обычно она включает в себя несколько запросов к HTML-страницам, а также к CSS, сценариям и медиафайлам.
Что вызывает задержку?
Основная причина задержки — расстояние. Чем больше расстояние между браузером, делающим запрос, и сервером, отвечающим на этот запрос, тем больше времени потребуется запрошенным данным для перемещения туда и обратно.
Вот почему посетители веб-сайтов в США будут получать ответы из центра обработки данных в Каунсил-Блаффс, штат Айова (один из Расположение центров обработки данных SiteGround) быстрее, чем, например, посетители веб-сайта в Европе.
Рассмотрим следующий сценарий: браузеру требуется 800 мс, чтобы отправить запрос на сервер, и 900 мс, чтобы этот браузер получил ответ. В этом случае задержка составит 1,7 секунды.
Другими причинами задержки являются размер запрошенных ресурсов и проблемы конечных пользователей. Например, если пользователь запрашивает веб-страницу с большим количеством изображений, файлов CSS и JS или контентом с нескольких сторонних веб-сайтов, серверу потребуется больше времени для ответа. Или пользователь может использовать устройство с небольшим объемом памяти, плохим подключением к Интернету или другой проблемой, которая увеличивает задержку.
Что такое хорошая задержка?
Поскольку задержка — это время, необходимое для завершения запроса между браузером и сервером, на самом деле она не может быть равна нулю. Но в идеале он должен быть как можно ближе к нулю.
В то время как хорошая задержка, как хороший показатель отказов, является относительным, обычно допустимо значение менее 100 миллисекунд. Оптимальный диапазон еще ниже, между 20 и 40 миллисекундами.
Как работает задержка?
Задержка — это количество времени, которое проходит с момента, когда пользователь делает запрос, до момента, когда он получает ответ. После того, как пользователь делает запрос, необходимо выполнить несколько шагов, прежде чем он получит ответ.
Возьмем следующий пример. Допустим, пользователь просматривает веб-сайт электронной коммерции и выбирает категорию. Для отображения элементов из этой категории в браузере пользователя должно произойти следующее:- Пользователь нажимает на категорию.
- Браузер пользователя отправляет запрос на сервер веб-сайта электронной коммерции.
- Запрос отправляется на сервер сайта со всей необходимой информацией. Передача этой информации требует времени. Чем больше информации отправляется, тем больше времени требуется для передачи.
- Сервер получает запрос.
- Сервер либо принимает, либо отклоняет запрос перед его обработкой. Каждый из этих шагов требует времени. Количество времени зависит от вычислительной мощности сервера и объема обрабатываемой информации.
- Сервер отправляет ответ конечному пользователю с необходимой информацией, относящейся к его запросу.
- Браузер пользователя получает ответ и отображает категорию продукта.
Шаги 1-4 представляют собой первую часть цикла задержки. Шаги 5-7 представляют собой вторую часть. Чтобы получить общую задержку в результате запроса, вы суммируете все приращения времени, начиная с момента, когда пользователь нажимает на категорию, до момента, когда он видит эти продукты.
Зачем улучшать задержку?
Скорость страницы имеет решающее значение для пользовательского опыта. Настолько, что еще в 2010 году Google объявил, что скорость страницы была фактором ранжирования для поиска. И хотя они не назвали точное число, они сказали, что их цель была меньше полсекунды.
Хотя попадание в эту цель может показаться трудным, есть несколько способов оптимизации скорости вашего сайта. Основной способ — улучшить задержку.
Вы не можете полностью устранить задержку, но вы можете свести ее к минимуму. Давайте рассмотрим некоторые шаги, которые вы можете предпринять, чтобы минимизировать задержку ниже.
Как улучшить задержку
- Используйте CDN.
- Минимизируйте размеры файлов CSS и Javascript.
- Сжимайте изображения.
- Уменьшите количество ресурсов, блокирующих рендеринг.
Хотя есть шаги, которые пользователь может предпринять, чтобы уменьшить задержку на своей стороне, ниже мы сосредоточимся исключительно на решениях на стороне сервера.
1. Используйте CDN.
Поскольку задержка связана с расстоянием между браузером и сервером, вы можете уменьшить задержку, сблизив их. Хотя вы не можете буквально выкорчевать расположение своего сервера и приблизить его к каждому пользователю, вы можете использовать сеть доставки контента (CDN).
CDN — это распределенная система серверов, предназначенная для максимально быстрой доставки веб-контента посетителям, где бы они ни находились. С CDN вам не нужно полагаться на один сервер для отправки контента по всему миру. Вместо этого CDN будет подключаться к различным серверам в сети, ближайшим к каждому уникальному посетителю, для доставки запрошенных ресурсов.
Как только ближайший к пользователю сервер доставляет и отображает запрошенный контент, этот сервер создает копию этих веб-ресурсов. Когда другой посетитель в той же части мира пытается получить доступ к этому контенту, CDN может перенаправить запрос с исходного сервера на ближайший к ним сервер, и этот сервер может доставить кешированный контент намного быстрее, поскольку он находится на меньшем расстоянии от него. путешествовать. Вот иллюстрация:
Есть два способа использования CDN. Вы можете приобрести его у поставщика CDN, например Cloudflare. Или вы можете выбрать платформу для создания веб-сайтов со встроенным CDN, например Центр управления контентом.
2. Уменьшите размеры файлов CSS и Javascript.
Большинство веб-страниц будут содержать комбинацию HTML, CSS и Javascript. Проблема в том, что каждый раз, когда посетитель загружает страницу, файлы CSS и JavaScript должны отправляться с сервера в браузер. Это означает больше HTTP-запросов, что может значительно увеличить задержку. Хотя вы не можете удалить CSS и Javascript со своих веб-страниц, вы можете уменьшить размер этих файлов. Чем меньше файлы, тем быстрее файлы будут перемещаться с сервера в браузер.
Хорошей новостью является то, что вы можете автоматизировать этот процесс с помощью минификатора, такого как Closure Compiler Service от Google. Просто добавьте свой код в компилятор, нажмите кнопку «Скомпилировать» и загрузите уменьшенный файл.
3. Сжимайте изображения.
Оптимизация изображений — это еще один способ уменьшить HTTP-запросы вашего сайта. В идеале вы должны уменьшить размер файла каждого изображения до менее чем 100 КБ. Вам не нужно уменьшать так сильно, если это влияет на качество изображения, но старайтесь, чтобы размер был как можно ближе к 100 КБ.
Вы можете загружать, изменять размер и сжимать изображения по одному с помощью такого инструмента, как SQUOOSH или все сразу с помощью такого инструмента, как Tiny PNG.
4. Уменьшите количество ресурсов, блокирующих рендеринг.
При загрузке страницы браузеры загружают и анализируют каждый ресурс, включая изображения, CSS и т. д., перед тем, как отобразить их внешнему пользователю. Определенные ресурсы, такие как шрифты и файлы JavaScript, считаются браузером критически важными, поэтому он прекращает загрузку и анализ других частей страницы до тех пор, пока они не будут обработаны.
Эти ресурсы называются «ресурсами блокировки рендеринга» и могут значительно замедлить работу вашего сайта. Уменьшение количества ресурсов, блокирующих рендеринг, на вашем сайте. технически не уменьшит задержку, но улучшит восприятие времени загрузки вашего сайта.
Минимизация задержки
Минимизация задержки может существенно повлиять на производительность вашего веб-сайта и взаимодействие с пользователем. Меньшая задержка помогает гарантировать, что пользователи получают запрошенные ими ресурсы как можно быстрее, поэтому у них будет больше причин возвращаться на ваш сайт снова и снова.