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

28

Від автора: час можна оцінити з двох точок зору: об’єктивної і психологічної. Коли ми говоримо про час, яке можна виміряти, то мається на увазі об’єктивний час або час на годиннику. Проте часом може сприйматися зовсім по-різному в ситуації, коли користувач просто чекає або постійно взаємодіє з сайтом або веб-додатком.

В даній статті ми будемо з вами розбирати продуктивність сайту з точки зору сприйняття і психології. Дуже часто ми обмежені в засобах оптимізації сайту. В певний момент ми вже не більше оптимізувати зображення, знижувати кількість запитів і так далі. Але ми можемо створити враження, що продуктивність сайту дуже висока!

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

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

У кожного технічного рішення є свої межі

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

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

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

Час завантаження становить 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. Вони дають уявлення про те, наскільки швидким користувачі вважають сайт.

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

У методі раннього завершення головне зайняти користувача хоч чимось і як можна швидше. Тоді режим очікування переключиться в активний.

Управління сприйняттям, зокрема активної і пасивної фазами, дуже ефективний метод, не обов’язково вимагає дорогих і трудомістких рішень. Він прекрасно працює в більшості, використовуючи наймогутніший інструмент, який є в нашому розпорядженні – людський мозок.

Висновок… поки що

Щоб користувачі відчували себе комфортно, ми, як розробники, повинні взяти курс на створення швидких і надійних сервісів. Для цього можна використовувати різні технічні рішення, щоб контролювати об’єктивну продуктивність веб-сайтів. Але як ми переконалися, абсолютне значення часу тільки складова продуктивності. Мозок людини може вирішити, що цей сайт завантажується швидше лише за поточним умовам, таким як настрій, думки або навіть час дня. У кінцевому рахунку як технологій, так і ресурсів є межа, момент, після якого стає вкрай важко змінити об’єктивну продуктивність. І врешті-решт, ми повинні знати психологічні і нейронні сигнали і використовувати їх собі на благо.

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

Ви можете взяти на замітку хоч всі ці методи. Уважний читач все одно відчує, що це не кінцевий список; все ще є питання, на які належить відповісти. Що робити, якщо технічні засоби досягли своєї межі, а подія досі в пасивному режимі, тобто взагалі без активної фази?

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