Секрети веб-продуктивності від BBC

33

Від автора: Джеймі Найт розповідає про те, як BBC прискорює свій сайт і допомагає користувачам переміщатися від однієї сторінки до іншої.

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

Так званий ефект «течії уваги» (flowing experience) також допомагає і власникам сайту. Сайт з швидкою течією допомагає користувачам досягати мети, що співвідноситься з нашими цілями. Amazon та інші сайти продемонстрували сильну залежність між продуктивністю і активністю користувачів. Якщо час завантаження сторінки падає, то час, проведений на сайті, і кількість залишених грошей збільшується.

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

Ключові завдання

Безперервний потік на сайті допомагає задовольнити потреби різних користувачів. Необхідно прагнути до двом цілям:

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

Приоретизация контенту: завантажуйте першим найбільш популярний контент.

Щоб досягти обох цілей, необхідно цілісно розглядати продуктивність сайту. Продуктивність – це не просто час, витрачений на завантаження сторінки. Щоб увагу користувача було постійним, нам необхідно продумати весь досвід роботи з сайтом, а також подумати, в яких місцях повинні стояти паузи. Необхідно подумати, в яких місцях доведеться піти на компроміси, щоб забезпечити найкращий досвід роботи з сайтом.

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

Мережа

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

Запит HTML файлу – нижня планка продуктивності сторінки. Поки сторінка не завантажиться, нічого не станеться. Тут також можна подумати про продуктивності. Кешування працює з HTML запитами, що сильно допомагає прискорити сайт. Крім того, кешування істотно знижує споживання мережі.

Кешування

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

Кеш сервера: кешовані дані на сервері, приміром, результати виконання запитів до бази даних;

Мережевий кеш: кеш, вбудований в мережу. Найчастіше так роблять оператори сайтів (зворотний проксі-кеш), але найчастіше так роблять інтернет-провайдери;

Кеш браузера: браузер зберігає файли на жорсткому диску користувача для повторного використання.

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

Проектування моделі кешування

Щоб наш підхід був ефективним, нам необхідно використовувати кеш по максимуму. Розширюючи аналогію зі Skittles, якщо я хочу дістати синю кофету, а в руці (кеші) їх немає, я буду зобов’язаний знайти її в пакетику. Цей процес називається коефіцієнтом кеш-влучень. Якщо елемент є в кеші, це добре, якщо ні – погано. Щоб кеш переймав більшу частину навантаження, нам потрібен високий коефіцієнт.

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

Кешування файлів HTML

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

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

Cache-Control: public, max-age=30

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

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

Ефект від кешування сторінок мережевим обладнанням на шляху прямування може бути дуже великим. Безліч великих мереж (інтернет-провайдерів) будуть поширювати кеш своїм користувачам. Мобільні оператори теж постійно користуються цією технікою. Наприклад, для кешування і повторного стиснення зображень в мережах 3G. Оператори сайтів також можуть надавати послуги з HTTP кешуванню. Ми займалися цим для BBC.

Максимальний час зберігання статичних кешованих файлів

На BBC ми відрізняли завантаження статичних файлів (зображення, CSS і скрипти) і завантаження сторінок. Такі елементи визначаються через URL. Можна перевіряти кеш на старіння, однак для простоти один URL означав одне кешування. Таким чином, кешування HTML сторінок на занадто довгий час могло призвести до того, що користувач не бачив оновлений контент.

Тим не менш, ми змогли отримати користь від кешування статичних файлів. На сайті BBC ми ставили максимальний час життя статичних файлів в 31,536,000 секунд через заголовки. Таким чином, всі файли кэшировались на 365 днів, що призвело до того, що статичні файли запитували всього один раз. Відмінний крок з точки зору продуктивності, але крок назад з точки зору гнучкості. В такому випадку користувач не довантажує зміни в цих файлах.

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

Варіації на стороні клієнта

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

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

Заключні слова

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