Швидкість, з якою завантажується ваш веб-сайт або застосунок, є першим враженням, яке він справляє на відвідувачів. У цьому огляді ми розглянемо перевірені підходи, що дозволять вам заощадити цінні секунди під час першого завантаження сторінки.
Час ініціалізації
Відрізок часу, що минає з моменту, коли користувач вводить адресу вашого сайту до появи контенту, є критично важливим для створення позитивного першого враження.
Дослідження Amazon показали, що затримка в 100 мілісекунд призводить до втрати 1% продажів.
Незважаючи на це, багато розробників ігнорують цей фактор. З додаванням все більшої кількості бібліотек для нових функцій, з часом починають спостерігатися зменшення конверсії. Що гірше, ці втрати важко виявити, оскільки відвідувачі залишають сторінку до того, як вона встигає надіслати будь-яку аналітику.
Деякі методи оптимізації можна застосувати на стороні клієнта, інші – на сервері. Незалежно від цього, веб-застосунки мають завантажуватися швидко.
Впровадьте точні вимірювання
Насамперед необхідно запровадити вимірювання. Процес завантаження складається з багатьох етапів, і ви не визначите проблемну область, не вимірявши кожний сегмент.
Нижче наведено основні етапи завантаження:
Вимірювання | Схему створено на Terrastruct
Це означає, що ви повинні відстежувати показники для кожного відрізку цієї схеми.
Розгляньмо, як це можна зробити.
Відправлення запиту з браузера до отримання відповіді:
Вимірюйте це на вашому сервері. Важливо зафіксувати час отримання запиту API та час надання відповіді. Залежно від наявності зовнішніх викликів, наприклад, до баз даних, це може бути як короткий, так і значний за часом процес.
Надсилання відповіді до її отримання:
Цей параметр складніше виміряти. Один із методів – додати мітку часу, коли відповідь покидає сервер, і виміряти її на стороні клієнта в перший момент, коли це можливо (за допомогою тега сценарію в заголовку HTML сторінки).
Отримання відповіді до першого відображення контенту:
Перше відображення контенту – це момент, коли перший елемент з’являється у DOM. Це може бути як простий текст, так і фон або індикатор завантаження. Виміряти це можна за допомогою інструменту Lighthouse в інструментах розробника Chrome.
Від першого відображення контенту до найбільшого елемента:
Відображення найбільшого елемента – це момент, коли найбільший елемент з’являється у вікні перегляду користувача. Це зазвичай означає завершення відтворення видимої частини сторінки, і користувач бачить наповнений екран. Цей параметр також вимірюється за допомогою Lighthouse.
Від відображення найбільшого елемента до інтерактивного стану:
Інтерактивний стан означає, що користувач може виконувати дії, такі як прокручування, кліки та введення даних. Якщо цей період є довгим, це може бути особливо неприємним, оскільки користувач бачить відображену сторінку, але не може взаємодіяти з нею. Це ще один показник, який Lighthouse допомагає виміряти.
Зменште обсяг коду
Маючи вимірювання, можна розпочинати оптимізацію. Оптимізація завжди має компроміси, і вимірювання допоможуть визначити, які з них є виправданими.
Найшвидше завантажується порожня сторінка. Однак, до застосунку можна додати багато коду, перш ніж швидкість завантаження між ним і порожньою сторінкою стане помітною. Часто ці прирости настільки незначні, що ви не помічаєте різниці між збірками, поки одного дня вона просто не починає відчуватися повільно. Ви розумієте, що ваш застосунок перевантажений, і саме на цьому етапі зменшення обсягу коду має значення.
Зменшення коду дає два покращення:
- Застосунок швидше передається по мережі.
- Браузер користувача швидше обробляє код.
Перше прискорення невелике. Завдяки стисненню, 1 МБ вихідного коду може скоротити пропускну здатність всього на 10 КБ. Проте прискорення від зменшення обсягу коду є значним. Користувачі можуть запускати ваш застосунок у різних браузерах і на різних комп’ютерах, багато з яких не мають достатньо обчислювальної потужності для швидкого аналізу коду.
Або вони можуть використовувати мобільні пристрої з ще меншою потужністю. Різниця може досягати кількох секунд.
Отже, чим менше коду, тим швидше браузер його обробить і запустить застосунок. Навіть якщо ви хочете показати екран завантаження, яким керує Javascript, йому передує обробка цього коду.
Ви не хочете скорочувати функціональність або видаляти код. На щастя, є кілька стандартних практик для зменшення коду без необхідності цього.
- Запускайте код через мініфікатори. Мініфікатори оптимізують код, наприклад, скорочують довгі імена на короткі (signUpDarkModeButton стає ss), видаляють пробіли та роблять код максимально компактним, не втрачаючи функціональності.
- Частковий імпорт. Бібліотеки часто містять зайві речі, які вам не потрібні, але вони упаковані в єдиному пакеті. Якщо вам потрібна лише певна функція з бібліотеки, замість імпорту всієї бібліотеки, імпортуйте лише потрібний код.
- Видаліть мертвий код. Іноді ви залишаєте код для налагодження або не повністю видалили застарілу функцію. Хоча він присутній у вашому вихідному коді, він ніколи не запускається. Інструменти, такі як Webpack, можуть виявляти мертвий код або невикористані залежності та автоматично видаляти їх зі збірки.
Розділіть код на фрагменти
Після зменшення загального обсягу коду, можна подумати про подальше стиснення та зменшення обсягу коду, потрібного для первинного завантаження.
Припустимо, 20% коду забезпечує роботу певної функції, доступ до якої користувачі отримують лише за кілька кліків. Браузер витрачає час на обробку цього коду до того, як відобразиться екран завантаження. Розбиття коду на фрагменти може значно зменшити час до інтерактивності.
Замість заплутаної схеми імпорту для всіх файлів Javascript, визначте області, які можна легко відокремити. Наприклад, можливо, певний компонент завантажує великі бібліотеки. Ви можете виділити цей компонент в окремий файл і імпортувати його лише тоді, коли користувач буде готовий взаємодіяти з ним.
Існує кілька бібліотек для відкладеного завантаження, залежно від того, який фреймворк ви використовуєте. Не потрібно перестаратися і розділяти кожен компонент, оскільки тоді у користувача буде швидке перше завантаження, але він буде змушений чекати кожної наступної взаємодії. Визначте найбільші блоки коду, які можна сегментувати, і розділіть вихідний код на них.
Візуалізація на стороні сервера
Браузери потребують інтенсивного аналізу та компіляції коду, особливо на пристроях з обмеженою потужністю. Тому, одним із популярних методів скорочення часу завантаження є перенесення частини цього навантаження на сервери. Це означає, що замість того, щоб надавати порожню сторінку, а потім використовувати Javascript для заповнення всього контенту, як це робить більшість односторінкових програм, можна запустити рушій Javascript на сервері (зазвичай Node.js) та заповнити якомога більше даних і контенту.
Ваші сервери працюють набагато швидше і є більш передбачуваними, ніж браузери користувачів. Звичайно, їм все одно потрібно буде обробити код Javascript, щоб програма була інтерактивною. Проте, візуалізація на стороні сервера може заповнити більшу частину початкового контенту, щоб, коли користувач отримає сторінку, на ній вже відображався принаймні екран завантаження або індикатор прогресу.
Якщо для первинного перегляду потрібні дані, клієнту не потрібно робити додатковий запит. Дані вже будуть присутні в застосунку.
Стискайте ресурси
Ресурси оживляють сторінку, і вона не здається повністю завантаженою, поки вони не відобразяться. Це може бути ваш фон, піктограми інтерфейсу, зображення профілю, навіть значок завантаження. Часто ресурси також можуть змінювати макет. Якщо користувач починає взаємодіяти зі сторінкою, вона може продовжувати стрибати, поки завантажуються ресурси. Іноді ці ресурси є найбільшим елементом контенту.
Але ресурси також є однією з найважчих частин програми. Зображення може займати кілька мегабайт, а завантаження багатьох піктограм може легко перевищити обмеження браузера на кількість одночасних запитів, створюючи чергу завантажень.
Зазвичай не потрібно завантажувати зображення з Інтернету, а потім використовувати його в застосунку. Розміри зображень мають бути зменшені до мінімального розміру, в якому вони відображатимуться. Якщо ваш профіль користувача відображається в маленькому вікні розміром 50 на 50 пікселів, програмі знадобиться час, щоб завантажити повне зображення, яке підходить як фоновий малюнок робочого столу, а потім зменшити його розмір до потрібного.
По-друге, зображення можна стискати в залежності від їхнього формату. Сьогодні формат webm є кращим, але сфера стиснення в Інтернеті постійно розвивається, і з’являються нові формати. Через мінливу природу форматів деякі браузери можуть не підтримувати новіші. На щастя, технологія браузера дозволяє користувачеві завантажувати будь-який формат, який він підтримує.
Тому, стискайте до останнього і найкращого формату, але також зберігайте менш сучасну версію та використовуйте елементи зображення та відео, які підтримують резервні формати.
Висновок
Це п’ять найефективніших підходів, які допоможуть користувачам швидко завантажувати вашу програму. Це покращить показники конверсії, задоволення користувачів і навіть рейтинги в пошукових системах, оскільки SEO віддає перевагу швидкості завантаження. На Terrastruct ми використовуємо ці та інші методи, щоб користувачі могли якомога швидше створювати та переглядати діаграми, які ви бачите в цій статті.