Производительность сайта. Почему она имеет значение. Управление восприятием

От автора: время можно оценить с двух точек зрения: объективной и психологической. Когда мы говорим о времени, которое можно измерить, то имеется в виду объективное время или время на часах. Однако время может восприниматься совершенно по-разному в ситуации, когда пользователь просто ждет или постоянно взаимодействует с сайтом или веб-приложением.

В данной части статьи мы будем с вами разбирать производительность сайта с точки зрения восприятия и психологии. Очень часто мы ограничены в средствах оптимизации сайта. В определенный момент мы уже не больше оптимизировать изображения, снижать количество запросов и так далее. Но мы можем создать впечатление, что производительность сайта очень высока!

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

У каждого технического решения есть свои пределы

Кроме технических ограничений существует одна серьезная проблема, связанная с абсолютным значением объективного времени: Само по себе значение производительности сайта еще ничего не говорит. Дабы не быть голословным, ниже я привел абсолютные значения времени для нескольких сайтов. (названия скрыты для большей интриги)

Абсолютные значения времени двух сайтов совсем не впечатляют. Результаты первого сайта, второго сайта.

Время загрузки составляет 12.436 секунд? Полная визуальная отрисовка занимает 12.2 секунды. Цифры совсем не впечатляют, согласитесь. Судя по цифрам этим сайтам срочно нужна помощь. А что если я скажу, что эти веб-сайты заработали за 2014 год $89 и $19 миллиардов долларов соответственно? Как такое вообще может быть? Не парьтесь. Вбейте в адресную строку amazon.com или ebay.com и увидите, что они все равно загружаются быстрее, чем вы подумали. Как добиться такого эффекта мы обсудим чуть позже.

Производительность это не математика

Производительность сайта никогда не измерялась в миллисекундах, килобайтах или количестве запросов, это не математическая величина. Производительность ощущается на уровне восприятия и психологии. В этой части мы по-другому взглянем на понятие производительности:

Психологическое время: управление восприятием

«Воображение — это единственное оружие в битве с реальностью» — Чеширский кот, Алиса в стране чудес Льюиса Кэрролла

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

В 1927 году Немецкий философ Martin Heidegger в своей книге «Бытие и время» написал «Время сохраняется лишь как следствие событий (в пространстве)». Согласно Хайдеггеру, время конечная величина, оно имеет начало и конец и состоит из мириад событий со своими началами и концами. А события и составляют то, что мы называем «временем». Представим простое событие:

Умственно люди разграничивают события с четкими границами начала и конца.

Назовем начало событие стартовой точкой. Соответственно, момент завершения события – конечная точка. В дополнение к принципу ограниченности времени можно сказать, что почти все события можно охарактеризовать двумя фазами: активная и пассивная. Активная фаза или активное ожидание характеризуется умственной активностью пользователя. Это может быть как физическая активность, так и просто умственный процесс, как разгадка пазла или поиска маршрута на карте. Период, когда пользователь не контролирует момент ожидания называется пассивной фазой или пассивным ожиданием. Примером может послужить очередь или ожидание любимого человека, который опаздывает на свидание. Люди, как правило, чаще думают, что пассивное ожидание более длительный процесс, даже если промежутки времени равны. В своем учении Jacob Hornik вслед за обширными исследованиями Richard Larson показал, что в среднем в пассивном режиме ожидания люди переоценивают время примерно на 36%. Ричарда Ларсона в MIT называют «Dr. Queue» (Доктор Очередь).

Одни и те же интервалы времени воспринимаются по-разному в пассивном и активном режимах.

Итак, мы подошли к двум основным принципам времени, на которых и будет строиться дальнейшее повествование:

Ни для кого не будет открытием, если я скажу, что мы не любим ждать, кроме отдельных случаев. Но когда мы говорим про длительно ожидание, на самом деле мы имеем в виду пассивную фазу; в большинстве случаев активную фазу вообще нельзя назвать ожиданием. Т.е. чтобы управлять психологическим временем и заставить мозг по-другому ощущать событие , мы должны как можно сильнее сократить пассивную фазу ожидания события и увеличить активную фазу. Существует множество различных способов, но большинство сводятся к двум простым: раннее начало и завершение события. Рассмотрим оба варианта.

Ранний старт

Техника раннего старта заключается в как можно раннем запуске и поддержания активной фазы события перед переключением на пассивную фазу. Все это не влияет на длительность события. Как говорилось выше, активная фаза не воспринимается как режим ожидания; а значит, для мозга пользователя это означает виртуальный сдвиг начала события ближе к концу (когда заканчивается активная фаза). Тем самым событие воспринимается короче.

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

По технике раннего старта событие начинается с активной фазы. Активная фаза растягивается как можно дольше.

В 2009 году в Техасе управляющая компания аэропорта Хьюстон получила необычную жалобу. Пассажир оказался недоволен долгим ожиданием своего багажа. Как ответ, руководство аэропорта увеличило количество грузчиков багажа, что позволило снизить время ожидания до 6 минут. Это отличный результат по сравнению с другими аэропортами США. И к удивлению руководства, число жалоб не снизилось.

Руководство аэропорта провело исследование, и выяснилось, что в среднем время на получение багажа занимает 8 минут с момента появления первой сумки на конвейерной ленте. У пассажиров уходит около минуты, чтобы дойти до карусели. Т.е. пассажиры в среднем ждут 7 минут перед тем, как забрать сумки. Говоря психологическими терминами, активная фаза события составляет всего одну минуту, в то время как пассивная 7.

Основываясь на своем опыте управления восприятием, аэропорт нашел довольно нетривиальное решение. Они просто отодвинули ворота подальше от главного терминала и перенаправили весь багаж на самую дальнюю карусель. Это увеличило время, которое требуется пассажиру, чтобы добраться до карусели до 6 минут. Тем самым, на пассивное ожидание осталось всего 2 минуты. И несмотря на увеличенное расстояние, число жалоб сократилось практически до нуля.

Карусель багажа.

Выдачу багажа в аэропорте Хьюстона можно назвать примером техники раннего старта (как и в любом другом аэропорте). С психологической точки зрения, запуская активную фазу события как можно раньше, мы сдвигаем стартовую точку на временной линии с реального старта события (момент, когда человек покидает воздушное судно и начинается распределение багажа). Именно это и называется ранним стартом, начать событие еще до того, как пользователь поймет, что оно уже наступило.

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

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

Другим примером данного метода послужит мобильная версия браузера safari для iOS. Во время набора адреса, браузер подгружает список подходящих сайтов, сначала на которых вы уже были, потом релевантные результаты из поисковика. В сафари есть специальная ссылка Топ. Не многим известно, что ссылки из Топа подгружаются в фоновом режиме. Тем самым при переходе по ним, вы уже получаете готовую страницу, т.е. она загружается для вас быстрее. Эту функцию можно настроить в настройках – предзагрузка Топа.

То же самое происходит и при открытии новых вкладок: мобильная версия safari показывает, что загрузка происходит в фоновом режиме. Т.е. страницу можно получить почти мгновенно.

Мобильный safari предзагружает страницы во время поиска или при открытии новый вкладок.

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

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

На данный момент группа экспертов во главе с инженером по веб-производительности Google Ilya Grigorik разрабатывает W3C спецификацию под названием «Resource Hints». Конечная цель спецификации добавить встроенную поддержку техники раннего старта в браузеры. Как пишет сам Илья в своей книге «High-Performance Browser Networking» — «мы сможем добавить подсказки в HTML документ, чтобы подсказывать браузеру о дополнительных способах оптимизации».

Эти подсказки уже поддерживаются.

Чтобы предзагружать ресурсы как можно раньше, все эти подсказки должны быть расположены в теге head. Быстренько пробежимся по всем подсказкам:

dns-prefetch. Полезна для предварительного одобрения перехода по доменным именам, найденным на странице. Можно использовать для предварительного одобрения перед редиректом. К примеру:

preconnect. Используется не только для одобрения перехода, но и для рукопожатия. Для конфигурации CORS запросов используется необязательный атрибут crossorigin; взгляните на комментарий Ilya Grigorik, сразу все поймете. К примеру:

prefetch. Низкоприоритетная подсказка, используется для загрузки ресурсов, необходимых для будущей навигации. Для оптимизации загрузки определенных типов файлов используется необязательный атрибут as. К примеру:

prerender. Запускает фоновый рендеринг всей страницы со всеми ресурсами. Может быть полезна в момент, когда пользователь переходит с одной ссылки на другую и ему необходимо вернуться на предыдущую страницу. Тем не менее, помните, что вы загружаете в фоновом режиме целую страницу, используйте подсказку с осторожностью. К примеру:

Более подробно прочитать о подсказках и посмотреть примеры с необязательными атрибутами можно в рабочем проекте спецификации. Чтобы лучше понять принцип работы подсказок, советую вам посмотреть на слайд шоу Preconnect, Prefetch, Prerender от Ильи, а также прочесть статью Prefetching, Preloading, Prebrowsing от Robin Rendle на сайте CSS-Tricks. Более того, в спецификацию была добавлена еще одна подсказка Preload. Подсказка почти копирует работу prefetch:

Но все же между ними есть существенные различия:

Prefetch имеет низкий приоритет и используется для подгрузки второстепенных ресурсов, используемых во время навигации по сайту. А preload имеет более высокий приоритет, применяется для загрузки критический для сайта ресурсов. Кстати, подсказка preload вытеснила другую, subresouce. С последней вы могли сталкиваться в других статьях.

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

Раннее завершение

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

В методе раннего завершения событие начинается с пассивного режима и как можно быстрее переключается в активный.

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

Сервисы видео трансляций, как Youtube, отличный пример метода раннего завершения.

Эту же технику можно применить и к времени загрузки страницы. Момент от запроса страницы и полной ее отрисовки, когда пользователь просто ждет, и все что он может сделать, это закрыть вкладку. Мы имеем дело с пассивным ожиданием – а люди ненавидят пассивное ожидание. Т.е. надо это как-то изменить.

Можно начать рендеринг страницы, как только загрузились критические элементы структуры, как DOM. Нет нужды ждать загрузки всех ресурсов, если они не повлияют на рендеринг страницы. Нам даже не нужны все HTML теги; те части, которые не видны визуально при первой загрузке страницы, такие как footer, можно подгрузить потом с помощью JS. Давайте снова вернемся к нашим Amazon и eBay. Рассмотрим в режиме кинопленки процесс рендеринга страницы Amazon:

На Amazon активная фаза наступает довольно быстро.

По рисунку видно, что несмотря на минимально время полной загрузки в 7 секунд, активная фаза на странице Amazon наступает всего через 1.1 секунды, и процесс отрисовки страницы начинается с верхней части (видимой глазу), как только были загружены все необходимые для этого ресурсы.

Предложения загружать страницу по кускам, которые дает Google PageSpeed Insights и другие похожие инструменты не что иное, как предложение внедрить метод раннего завершения. Дайте людям хоть что-то и как можно быстрее; заставьте их думать, что страница загружается быстрее, чем это на самом деле происходит, путем разбития загрузки на короткие пассивные фазы ожидания и резкого перехода в активный режим, как только подгрузятся все критически важные ресурсы. Крайне удобно контролировать такой парметр, как «начало рендеринга», в инструментах типа WebPageTest. Они дают представление о том, насколько быстрым пользователи считают сайт.

В методе раннего завершения главное занять пользователя хоть чем-то и как можно быстрее. Тогда режим ожидания переключится в активный.

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

Заключение… пока что

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

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

Вы можете взять на заметку хоть все эти методы. Внимательный читатель все равно почувствует, что это не конечный список; все еще есть вопросы, на которые предстоит ответить. Что делать, если технические средства достигли своего предела, а событие до сих пор в пассивном режиме, т.е. вообще без активной фазы?

Автор: Denys Mishunov

Источник: //www.smashingmagazine.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: