Розробка з упором на продуктивність

21

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

Швидкість завантаження сторінок стає все більш важливою складовою веб-сайтів. Якщо ви шукаєте тести на швидкість завантаження сторінок, це те, що вам потрібно: користувачі очікують, що сторінка завантажиться в середньому за дві секунди, і вже після третьої секунди до 40% користувачів закривають вкладку. Понад 85% користувачів мобільних пристроїв припускають, що з мобільного пристрою сайт, як мінімум, повинен грузиться так само або швидше. Якщо ви проектуєте і пишіть веб-сайт або тестуєте вже існуючий, чи зможете ви підлаштуватися під такі вимоги?

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

Давайте проведемо пару досліджень і розглянемо деякі дані про те, як в остаточному підсумку продуктивність впливає на користувальницький досвід.

Вплив на ваш бренд

Загальний користувальницький досвід впливає на враження аудиторії сайту на ваш бренд. Akamai повідомляє про те, що 75% користувачів роблять покупки онлайн і зіткнулися з такими проблемами, як зависання, падіння сайту, занадто довге завантаження або заплутаний процес оплати товару, не будуть купувати товари на такому сайті. Gomez вивчив поведінку онлайн-покупців і з’ясував, що 88% з них з найменшою імовірністю повернуться на сайт після невдалого досвіду покупки. Схоже дослідження показало, що «в години пік трафіку понад 75% онлайн-покупців, щоб не чекати, йдуть на сайти конкурентів». Ваші користувачі йдуть до конкурентів, поки ви намагаєтеся змагатися в швидкості завантаження сторінок і інших аспектах? Ви впевнені, що ваш сайт швидше, ніж у конкурентів?

Повернулися користувачі

Продуктивність впливає не тільки на продажу інтернет-магазинів; поліпшення й оптимізація завантаження сторінок підходять до будь-якого сайту. Користувачі повертаються на більш швидкі сайти, про що говорить Google у своєму дослідженні. Вони відзначили зниження аудиторії на повільних сайтів. Користувачі, які мають затримку в 400 мілісекунд, протягом перших трьох тижнів поставили на 0.44% менше пошукових запитів. Протягом ще трьох тижнів спад запитів збільшився до 0.76%.

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

Ранжирування пошукових систем

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

Ігнорування швидкості завантаження сторінок вашого сайту це більше, ніж просто втрачена можливість оптимізації; користувачі можуть просто не запам’ятати ваш бренд. Microsoft провела дослідження, щоб оцінити, чи зможуть користувачі згадати результати пошукового запиту. Через півгодини після того, як учасники дослідження вбили в рядок пошуку свій власний запит, кожному на пошту прийшов опитування. В опитуванні їх просили згадати список результатів, не підглядаючи в пошуковику. Результати опитування показали, що одним з двох основних чинників, що впливають на запам’ятовування, є те, де списку результатів расположенсайт. Поліпшення часу завантаження сторінок може підвищити шанси вашого сайту в ранжируванні результатів пошукових запитів.

Naomi Atkinson, дизайнер брендів та цифрових продуктів, блискуче описує, як дизайнерські агентства можуть ефективно використовувати продуктивність, кажучи «великий відсоток агентств відсіваються на ключової стадії продажу. Уявивши, як швидко вони планують створити сайт або сервіс замовника (і яким чином) разом з маркетинговими і візуальними ідеями, дизайнерські агентства можуть змінити світ. І зроблять успішними і себе і клієнтів.» Продуктивність є частиною загального досвіду використання і може надати величезний вплив на бренд компанії.

Вплив на користувачів мобільних пристроїв

Чим більше користувачів переходять на мобільні пристрої, і чим більше завдань переходять в інтернет, загальний досвід використання вашого сайту стає все важливішим. Якщо подивитися на дані StatCounterGlobalStats, ми можемо побачити, що частка мобільних пристроїв від загального процентного співвідношення інтернет-трафіку неухильно зростає (Графік 1.1).

Деякі компанії вже помітили це суттєве збільшення трафіку з мобільних пристроїв; згідно з доповіддю «інтернет-тенденції» від MaryMeeker, 45% угод на сайті Groupon зроблені з мобільних пристроїв за перші місяці 2013 року. Двома роками раніше це значення дорівнювало 15%. На сайті Etsy, де я запустив команду по забезпеченню ефективності, 50% користувача трафіку приходить з мобільних пристроїв. Дані за початок 2014 року.

Розробка з упором на продуктивність

Графік 1-1. За даними графіка можна помітити, що загальний відсоток інтернет-трафіку з мобільних пристроїв неухильно зростає. Якщо продовжити проекцію розвитку, можна помітити, що найближчим часом, швидше за все, уповільнення зростання мобільних пристроїв не передбачається.

Відсоток мобільного трафіку зростає практично на всіх сайтах, що, в свою чергу, призведе до зростання значимості часу завантаження сторінок, зокрема, і для мобільних користувачів. Одне дослідження показало, що мобільні телефони є пріоритетним способом виходу в інтернет для величезного числа користувачів по всьому світу. Близько 50% користувачів інтернету в Африці і Азії для доступу в мережу використовують тільки мобільні пристрої, на відміну від 25% у США. У даному дослідженні брали участь «тільки мобільні користувачі», ті, які ніколи або рідко використовують настільний комп’ютер для доступу в інтернет (планшети в дослідженні прирівнювалися до настільних пристроїв). У підсумку: велика кількість людей для доступу в інтернет використовують мобільні пристрої в першу чергу, і ці пристрої відкривають свій власний унікальний набір проблем.

Мобільні мережі

Однією з причин довгої завантаження веб-сторінок на мобільних пристроях є спосіб передачі інформації. Перед тим, як відправити або отримати дані, мобільний пристрій має встановити радіоканал з мережею (дивіться Малюнок 1-2). При 3G з’єднанні це може зайняти кілька секунд. Після встановлення з’єднання з радиовышкой пристрій повідомляє, що воно може передати інформацію. Оператор стільникового зв’язку повинен передати інформацію з вишки у внутрішню мережу, а потім в глобальну мережу інтернет. Поєднання цих кроків може з легкістю додати десятки тисяч мілісекунд додаткової затримки. Більш того, якщо ніякі дані не передаються і не приймаються, то після паузи канал стає неактивним. Для нової передачі потрібно заново відкривати канал і повторювати весь процес, що, потенційно, хаотично впливає на швидкість завантаження сторінок.

Розробка з упором на продуктивність

Малюнок 1-2. Перед тим, як мобільний пристрій отримає всі необхідні дані для завантаження сайту, повинен бути створений радіоканал з мережею. Цей процес може зайняти деякий час і може вкрай негативно позначитися на швидкості завантаження сторінки.

Як пише IlyaGrigorik «коли справа доходить до вашого досвіду використання, затримки, а не пропускна здатність, є стримуючим фактором на сьогоднішній момент». Чим більше час очікування необхідної інформації, тим необхідно більше часу, щоб отримати необхідну інформацію на пристрій, і ще більше для відображення її на екрані. Докладніше основи швидкості завантаження сторінок розбираються в главі 2.

Що таке Затримка і Пропускна Здатність?

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

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

Хоча це й правда, що мережі поступово стають швидше, ваша мобільна аудиторія зараз може відчувати труднощі із завантаженням. У середньостатистичного настільного комп’ютера в США з WiFi підключенням запит туди-назад займає 50 мілісекунд. Це час, необхідний для здійснення браузером запиту на сервер і отримання від нього відповіді. Однак, у мобільних мережах запит туди-назад може займати більше 300 мілісекунд. Щоб зрозуміти, що це значить: це те ж саме, що старе dial-up з’єднання.

Складіть час кожного запиту туди-назад, необхідних для завантаження сайту,з часом, необхідним для встановлення радіоканалу з мережею (приблизно від 1000 до 2000 мілісекунд), і ви побачите, як продуктивність мобільних мереж безпосередньо впливає на користувальницький досвід на вашому сайті. Крім того, важко передбачити, в яких випадках бездротові мережі можуть бути небезпечними. Наприклад, коли користувач знаходиться на концерті у величезному натовпі або в зоні з поганим покриттям.

Це означає, що вам дійсно необхідно приділяти першочергову увагу продуктивності при оптимізації дизайну вашого сайту під мобільні пристрої, так як швидкість завантаження сторінок значно впливає на користувальницький досвід і на те, який сайт віддадуть перевагу користувачі. Це підтверджується низкою досліджень різних компаній. Моя команда на сайті Etsy виявила зростання показника відходу мобільних користувачів з сайту при додаванні 160 кб прихованих зображень на сторінку. DoubleClick, рекламний продукт Google видалив один редирект на клієнтській стороні і помітив 12% збільшення клікабельності на мобільних пристроях. Одним з найважливіших плюсів від оптимізації продуктивності на мобільних пристроях є те, що ця оптимізація так само позитивно впливає на ваш сайт при його відвідуванні з інших типів пристроїв.

Шаблони мобільного застосування

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

Під час дослідження в Google з’ясували, що люди використовують смартфони в наступних випадках:

На ходу, так само як і вдома

Для спілкування і виходу в інтернет

Під час коротких перерв

Коли їм потрібна інформація швидко і прямо зараз

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

Пошук певної інформації

Серфінг

Купівля товарів

Спілкування в соціальних мережах

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

Мобільне обладнання

Крім того, навіть, якщо використовувати WiFi на мобільному пристрої, досвід використання сайту найімовірніше все одно не буде такою ж, як від настільного браузера, з-за довжини антени і вихідної потужності. WiFi може задіяти більше однієї антени одночасно для передачі і прийому сигналів; однак, більшість смартфонів не розташовують технологією багатопроменевого поширення. Крім того, WiFi антени в ноутбуках і настільних комп’ютерах значно більше, ніж в мобільних пристроях.

Телефони також роблять спроби збільшення ефективності акумуляторів (що є великою частиною користувацького досвіду на смартфонах), і одні з способів обмеження доступу до мережі. Настільні комп’ютери не працюють від батареї, так що вони можуть використовувати WiFi без маніпуляцій з обмеженням доступу до мережі. І нарешті, більшість смартфонів, які перебувають в обігу в даний час, використовують старі більш повільні стандарти WiFi. Найсучасніший стандарт, 802.11 ac підтримується тільки новітніми смартфонами.

Багато заходів по оптимізації, поліпшують швидкість завантаження сторінок, також знижують споживання батареї пристроєм, що призводить до позитивного досліди використання. Такі речі, як рівень сигналу WiFi, JavaScript рендеринг і рендеринг зображень, все це впливає на розрядку батареї на мобільних пристроях. У черговому дослідженні вчені з’ясували, що, якщо Amazon конвертує всі свої зображення в JPEGс якістю в 92%, це дозволить зберегти 20% енергії, необхідної на завантаження домашньої сторінки на пристроях під управлінням операційної системи Android. На пристроях під управлінням FacebookОС те ж саме дозволить зберегти до 30%. Такі зміни позитивно позначаться на користувальницькому досвіді, зменшивши споживання батареї без видимої втрати якості зображень. Інше дослідження показало, що до 35% часу завантаження сторінки в критичних ситуаціях витрачається на такі обчислення, як HTML парсинг і виконання JavaScript на мобільних пристроях.

Підсумком є те, що зусилля, спрямовані на оптимізацію вашого сайту, впливають на весь користувальницький досвід, включаючи час життя батареї.

Вплив дизайнерів на продуктивність

Затримка між тим, як користувач введе URL, натисне на кнопку або вибере елемент зі списку, і тим, через деякий час сторінка відповість, все це вплине на сприйняття сайту. Затримка менше 100 мілісекунд практично не відчувається користувачем, у той же самий час затримка від 100 до 300 мілісекунд вже відчутна. Затримка від 300 до 1000 мілісекунд створює у користувача відчуття, ніби він відчуває, як всі ці механізми обробляють його запит. При затримці більше 1000 мілісекунд користувач подумки вже переключається з даного сайту.

Дані цифри дуже важливі, так як всі разом ми створюємо все більш функціональні сайти: безліч динамічних елементів, все більший обсяг файлів JavaScript, красиві анімації, складна графіка і т. д. Ви можете зробити упор на оптимізації дизайну макету сайту, але це в свою чергу позначиться на швидкості завантаження сторінок. Деякі «адаптивні сайти», далеко не так адаптивні і використовують надто громіздку розмітку і велику кількість зображень, які застосовуються для відображення сайту на маленьких екранах; розробники можуть несвідомо змушувати своїх користувачів завантажувати непотрібні їм ресурси.

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

Подумайте про вашому останньому дизайні. Скільки різних відтінків насиченість шрифту ви використовували? Скільки зображень було? Скільки важать ці зображення, і який у них формат? Як ваш дизайн вплинув на планування розмітки і CSS коду?

Рішення, прийняті дизайнерами, зазвичай зводяться до того, як побудувати веб-сайт. Первісна фаза проектування включає:

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

Макет, що впливає на розмітку, класи і ідентифікатори, універсальність шаблонів дизайну і організацію CSS.

Типографіка, що впливає на кількість різних відтінків насиченості і кількість шрифтів.

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

Всі ці рішення, як правило, визначаються до початку розробки, так як вони мають величезне значення на кінцевій швидкості завантаження сторінки. Щоб проілюструвати це візьмемо, наприклад, логотип. Ми плануємо помістити його в DIVс яскраво блакитним фоном, як показано на малюнку 1-3.

Розробка з упором на продуктивність

Малюнок 1-3. Приклад логотипу з прозорим фоном, який буде накладено на DIV з яскраво блакитним фоном.

Прозорість і накладення впливають на потрібний формат зображення, а також на його розмір. Дизайнери, що враховують час завантаження сторінок можуть задатися питанням «А що якщо я використовую JPEG або PNG-8 без прозорості? Що якщо я використовую яскраво блакитний фон прямо на PNG-8? Як це вплине на продуктивність?». Протестуємо і збережемо логотип у форматі JPEG і PNG-8, щоб дізнатися вагу файлів (Малюнки 1-4 – 1-7).

Розробка з упором на продуктивність

Малюнок 1-4. Оригінал PNG-24 з прозорим фоном: 7.6 Кб

Розробка з упором на продуктивність

Малюнок 1-5. PNG-8 з однотонним фоном: 5.0 Кб

Розробка з упором на продуктивність

Малюнок 1-6. PNG-8 без фону: 2.7 Кб

Розробка з упором на продуктивність

Малюнок 1-7. JPEG 75% якість з однотонним фоном: 20.2 Кб

За результатами тестувань видно, що вага файла у різних форматах сильно впливає фон і прозорість. Більш детально оптимізацію і вага зображень ми розглянемо в Розділі 3.

Нам надаються величезні можливості маніпуляції, а також ми можемо оцінити вплив різних дизайнерських підходів. У Розділі 3 ми розглянемо, як вибирати і стискати різні формати зображень, а у Розділі 6 ми навчимося вимірювати час завантаження сторінок.

Дані рішення впливають на продуктивність, як нових дизайнів, так і редизайнів сайтів. Кожен існуючий сайт може бути очищений від зайвого сміття і протестований на продуктивність. На одному сайті мені вдалося скоротити час завантаження сторінок на 50%, почистивши СЅЅфайлы, оптимізувавши зображення, привівши в норму колірну палітру сайту, а також за допомогою реорганізації контенту в шаблоні. Замість того, щоб зайнятися повним редизайном сайту, я зосередився на спрощення громіздкого HTML і CSS коду і в результаті отримав маленький HTML з CSS, а також зменшений вага файлів.

У Главі 4 ви можете детальніше прочитати про те, як очистити HTML і CSS з прицілом на продуктивність.

Навіть якщо у вашої посади немає слова дизайнер, але ви вирішуєте, як сайт буде виглядати, і як він повинен відчуватися, то ваші рішення вплинуть на продуктивність. Продуктивність це спільна відповідальність, всі члени вашої команди відповідальні за неї. Враховуючи продуктивність в проектуванні, в майбутньому ви тільки привернете нових користувачів. Баланс між зручністю і продуктивністю повинен мати першорядне значення в дизайнерських проектах, детальніше це буде розглянуто в Главі 7. Це також величезна можливість для кооперації між різними відділами в організаціях; дизайнери можуть працювати разом з розробниками, щоб створити неповторний користувальницький досвід.

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