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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

Время загрузки составляет 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 предзагружает страницы во время поиска или при открытии новый вкладок.

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

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

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

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