Швидкість на слабких пристроях: чому ваш сайт швидкий тільки у вас

Найпоширеніша фраза при обговоренні швидкості: «у мене все відкривається миттєво». Зазвичай вона правдива й зазвичай нічого не означає, бо сказана людиною з новим комп’ютером, дротовим інтернетом і сайтом у кеші браузера.

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

Чому розробник не бачить проблему

Кожен рядок множиться на решту. У сумі те, що відкривається за секунду в розробника, у відвідувача займає п’ять-вісім.

Що саме гальмує на слабкому залізі

Важливо розділяти два різних обмеження: канал і процесор. Перше лікується зменшенням ваги, друге – зменшенням роботи.

• JavaScript. Головна причина. Файл на 300 кілобайт вантажиться за секунду, а розбирається й виконується на слабкому телефоні в кілька разів довше, ніж на комп’ютері. Це не про мережу, це про процесор.
• Шрифти. Кожне накреслення – окремий файл. Чотири товщини по два стилі – вісім завантажень до появи тексту.
• Зображення без адаптації. Картинка шириною 2000 пікселів на екрані шириною 360 вантажиться повністю, а потім масштабується, витрачаючи і трафік, і пам’ять.
• Сторонні скрипти. Кожен – окреме з’єднання з чужим сервером, і його швидкість ви не контролюєте.
• Складна анімація. Те, що плавно на комп’ютері, на бюджетному телефоні смикається, якщо анімуються властивості, які змушують перераховувати верстку.

Як перевірити без покупки телефона

Не потрібно купувати старий пристрій, достатньо панелі розробника в браузері:

1. Відкрийте панель розробника, вкладку мережі.
2. Увімкніть обмеження швидкості на рівні повільного мобільного з’єднання.
3. У вкладці продуктивності увімкніть уповільнення процесора в чотири-шість разів.
4. Обов’язково поставте галочку відключення кешу.
5. Перезавантажте сторінку й дивіться на секундомір.

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

Друга перевірка, ще простіша: візьміть телефон, вимкніть на ньому мережу Wi-Fi і відкрийте сайт із мобільного інтернету десь на вулиці, а не в офісі.

Що лагодити в першу чергу

Порядок за співвідношенням результату до витрат:

1. Час відповіді сервера. Якщо він більший за секунду, решта не має значення. Це перше, що треба перевірити, і це найчастіша реальна проблема.
2. Зайві сторонні скрипти. Порахуйте їх і приберіть ті, на які не знайшлося відповіді, навіщо вони.
3. Зображення. Сучасний формат, розміри під реальний екран, обов’язково задані ширина й висота.
4. Шрифти. Два накреслення замість восьми, режим відображення тексту одразу.
5. JavaScript. Відкласти все, що не потрібно для першого екрана.
6. Анімація. Тільки прозорість і перетворення.

Перші три пункти зазвичай дають більшу частину результату й не вимагають переробки сайту.

Бюджет продуктивності

Найдієвіший інструмент, і майже ніхто його не використовує. Суть проста: заздалегідь домовитися про межі, за які сторінка не виходить.

Цінність бюджету не в самих числах, а в тому, що він перетворює питання «чи додаємо ще один віджет» із питання смаку на питання арифметики. Якщо новий інструмент не вкладається в межу, треба щось прибрати.

Чому це важливо для грошей

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

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