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