Создание опционального UX для посетителей вашего сайта не является точной наукой, но уделение внимания конкретным метрикам производительности может дать разработчикам понятие, как увеличить трафик и удержать пользователя.
Уделение внимания запросам интернет пользователей всегда было сложной задачей. Многие ожидают профессиональный графический дизайн, интерактивные медиа и молниеносную загрузку. Конечно же, добавляя новые элементы вы увеличиваете шансы, что что-то пойдет не так. Единственный способ понять, что происходит, это использовать метрики производительности.
Перед тем, как вы начнете использовать метрики производительности
Необходимо знать очень многое о метриках производительность, о чем даже не догадываются многие разработчики. Если ваш сайт посещают по всему миру, вам необходимо знать производительность в разных частях мира, на множествах девайсов. Содержание — это ключ к достижению отличного опыта пользователей, поэтому вам необходимо быть уверенными, как все посетители видят ваш сайт.
Так как многие показатели влияют на фронтенд за промежуток времени, веб разработчики используют метод, называемый мультивариативное тестирование, чтобы получить точную картину производительности сайта. Чтобы вы могли понять, какие метрики использовать, мы составили список важнейших метрик производительности и рассортировали их по категориям.
Содержание:
- Метрики производительности сайта
- 1. Время появления заголовка
- 2. Время рендеринга
- 3. Время начала взаимодействия
- 4. Время работы DNS
- 5. Время соединения
- 6. Первый байт
- 7. Последний байт
- Сложность контента и метрики производительности сайта
- 8. Общий вес
- 9. Общее количество активов
- 10. Сторонние домены
- Поведение пользователя и метрики производительности сайта
- 11. Частота ошибок
- 12. Показатель отказов
- 13. Топ страниц
- 14. Показатель конверсии
- Воспринимаемая производительность vs. метрики производительности
Показатели производительности сайта
Пользователи делают поспешные выводы о профессионализме компании, поэтому постарайтесь, чтобы первое что они увидят не было огромное, медленно загружающееся лого. Чтобы полностью понять методику удержания пользователя, необходимо разобрать опыт пользователя на составляющие.
Чтобы получить полный результат производительности вашего сайта, запустите сканирование скорости по ссылке webpagetest.org. Заметьте, что все метрики будут показаны как суммарное значение всех страниц. Перейти на подробные показатели можно скачав отчет исходных данных страниц, как показано ниже.
Тест показанный на картинке взят с дефолтного сайта WordPress работающего на Nginx и KeyCDN без специальных настроек.
1. Время появления заголовка
Количество времени между запросом посетителя сайта и моментом загрузки заголовка называется временем появления заголовка. Увидев заголовок сразу же, пользователь понимает, сайт на уровне, что дает им немного терпения подождать полной загрузки. Определяется скоростью показа сайта в браузере пользователя с вашего сервера. Как показано в примере ниже, время появления заголовка составляет 464 мс.
2. Время начала рендера
Время между запросом пользователя и моментом появления контента в браузере называется время начала рендера. Так же является важным показателем. Чем скорее посетитель увидит содержимое, тем больше шансов, что он останется на странице. В примере мы видим 1019мс.
3. Время начала взаимодействия
Время между запросом и моментом, когда пользователь может нажать на ссылки, писать в текстовом поле, скроллить страницу и есть время начала взаимодействия.
4. Время работы DNS
Время требуемое вашему DNS провайдеру перевести имя домена в IP адрес. Такие сервисы как Pingdom и Webpagetest помогут быстро подсчитать время запроза DNS.
Просмотрите нашу статью о том, как уменьшить время запроса DNS. Так же посмотрите наш лист лучших бесплатных DNS провайдеров.
5. Время соединения
Время между запросом и соединение браузера клиента с вашим сервером называют временем соединения.
Определение проблем со временем соединения может быть сложным и зависит от многих факторов. Большой трафик сервера, от пользователей или ботов, приводит к проблеме со временем соединения. Пользователи в различных географических точках могут испытывать проблемы с долгой загрузкой. Мониторинг производительности сайта может не дать достаточной информации о проблеме; вы можете поэкспериментировать с инструментами LoadStorm и JMeter, чтобы сымитировать нагрузку на сервер. Возможно вам надо обновить свою инфраструктуру для улучшения скорости соединения. В качестве альтернативы вы можете разгрузить некоторые актива на CDN или сервер кэширования.
6. Время первого байта
Время, которое требуется первому байту информации достичь браузера клиента после соединения с сервером, называют временем первого байта. Порядок достижения информации до клиента очень важен и даже незначительные изменения могут повлиять в работе сайта.
Одна и та же статическая информация для всех пользователей должна быть отделена от динамического контента, конкретного для одного посетителя. Таким образом вы получите свой контент сразу же, пока будет загрузаться персональный контент. Серьезный мониторинг и тестирование загрузки может помочь разработчикам распознать проблему первого байта. Вы также можете использовать тест производительности KeyCDN для проверки первого байта из 14 местоположений.
7. Время последнего байта
Когда браузер пользователя получает всю информацию вашего сайта, подсчитыватеся время последнего байта. Огромную роль играет качество вашего кода и содержимое базы данных в этой метрике. К другим факторам влияющим на время получения последнего байта относится неправильно настроенный сервер или достижение сервером своего лимита
Сложность контента и метрики производительности
Слежение за метриками производительности сайта по отношению времени может быть бесполезной, если вы не понимаете всех факторов. Инфомация о сложности контента вашего сайта может помочь найти способ улучшить все приведенные выше метрики.
8. Общий вес
Общее количество байтов получаемых пользователем является общим весом вашего сайта. Более важным является отношение между отдельными частями, так как загруженная часть сайта может повлиять на скорость вцелом. Кроме того, размер страницы продолжил увеличиваться из года в год, поэтому стоит рассмотреть какая же составляющая сайта является действительно необходимой.
Разделяя отдельные показатели, как вес JavaScript файла, CSS файла, изображений и общий вес вы можете выбрать, какие категории наиболее тяжелые и затем можете произвести анализ waterfall для определения составляющего сайта, необходимого удалить либо изменить.
9. Общее количество активов (составляющих)
Количество составляющих, которые влияют на общий вес сайта. Важно знать разницу между количеством составляющих и весом. Каждая составляющая, не важно насколько мала или сжата, может добавлять время на загрузку. Общее количество активов включает общий счет JavaScript, CSS и картинок.
Мы уменьшили время загрузки WordPress с 532мс до 167мс путем уменьшения колическта HTTP запросов
10. Сторонние домены
Большая часть вашего контента расположена на вашем сервере, но также существует сторонний контент, например встренные видео или виджеты социальных сетей с других ресурсов. Так как этот контент расположен в других доменах, у вас ограничен контроль функциональности. Таким образом возрастает потенциал проблем с каждым из таких доменов. Можно рассчитывать только на домены, которые гарантируют производительность.
Поведение пользователя и метрики производительности сайта
Теперь, когда мы закончили с техническими аспектами, рассмотрим, что же посетители делают, после перехода на веб сайт.
11. Показатель ошибок
Первый показатель не относящийся к скорости сайта, но важный по своему назначению, является показатель ошибок. Общее количество проблемных запросов по сравнению с конечным количеством запросов и есть показатель ошибок. На показатели может влиять количество пользователей в одно время; тестируйте сайт под различными нагрузками.
К примеру, вы заметите, что показатель ошибок начинает возрастать в момент тестирования загрузки, как и при попытке пользователей одновременно зайти на ваш сайт. Если у вас случаются запланированные нагрузки на трафик, эта информация будет полезной. Некоторые ошибки неизбежны, но знать об ошибках и держать под контролем свой сайт может быть полезным в будещем.
Если вы пользуетесь KeyCDN, то можете проверить при помощи Reporting, какое количество клиентских ошибок возникло за промежуток времени.
12. Показатель отказов
Если у вас высокий показатель отказов, то это значит, что ваши пользователи не задерживаются на сайте. Google называет такие визиты «одностраничными визитами», и это может повлиять на ваш SEO. Причиной может быть недостаточное таргетирование ключевых слов, медленная загрузка или неприятный дизайн.
Если вы сделали какие-то изменения и ваш показатель отказов начал падать, значит вы делаете правильно. Почитайте статью о 21 способе уменьшить показатель отказов на вашем сайте
13. Топ страниц
Вы можете проверить, какая из ваших страниц наиболее посещаемая в секции поведения Гугл Аналитики. Зная о том, что ваши пользователи предпочитают, вы можете сохранять аудиторию. Имейте ввиду, количество просмотров странице не единственный параметр проверки; также важны количество репостов в социальные сети.
14. Показатель конверсии
Возможно важнейший показатель производительности сайта. Когда дело касается оптимизации UX, показатель конверсии важен, так как дает понимание, делает ли пользователь то, что вы хотите от него. Вычисляется делением количества уникальных посетителей на число конверсий.
Внизу показан пример корреляции между временем загрузки сайта и показателем конверсии.
Если ваш показатель конверсии низкий, возможно вы привлекаете не тот трафик или используете неправильный запрос к действию.
Воспринимаемая производительность против метрики производительности
Иногда цифры не показывают вам необходимую информацию, поэтому очень важно понимать, как думает пользователь. Восприятие — это все, и иногда есть разница, между тем как долго загружается страница и как это кажется пользователю.
Допустим, lazy loading технически может увеличить скорость загрузки, но индикатор загрузки привлекает больше внимания, сколько прошло времени, что заставляет пользователя думать — «сайт загружается медленно».
FOUT (появление нестилизованного текста), еще одна проблема, влияющая на восприятие пользователя. Возникает, когда шрифты загружаются в конце файла, и символы появляются размытыми боками. Проблема не влияет на скорось, но портит вид сайта и дает посетителю знать, что загрузка все еще продолжается.
Узнайте больше о воспринимаемой производительности и ее эффекте на поведение пользователя.
Использование метрик производительности для оптимизации пользовательского опыта
Компании и отдельные разработчики получат выгоду, установив персональный стандарт для всех метрик. Интернет всегда эволюционирует, как и изучение метрик производительности. Поиск новых привычек при посещение пользователем сайтов несомненно даст больше информации, как удовлетворить все запросы. В то же время, примите на вооружение метрики, о которых мы говорили и старайтесь применить любую настройку для улучшения этих метрик.
Статью перевел timurziev. Оригинал на Www.keycdn.com доступен по ссылке.