Як ефективно оптимізувати швидкість завантаження сторінки

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

З практики я виніс для себе кілька корисних прийомів:

Важливі цільові сторінки часто бувають простими, і варто використовувати власний стиль CSS

Наприклад, сторінка входу в CMS часто дуже проста. Невже для простої форми потрібно завантажувати весь Bootstrap та інші CSS/JS фреймворки? Важливі сторінки варто оптимізувати та написати нативний код.

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

Замість іконок ми часто можемо використовувати емодзі

Справді! Емодзі має багато практичних переваг:

• Він займає всього 4 байти, тому перевершує будь-яке зображення
• Він ніколи не збоїть у завантаженні, тому користувач завжди бачить хоча б іконку, а не порожнє місце
• Відображається у візуальному стилі користувача
• На даний момент вже має широку підтримку пристроїв
• Заощаджує запит до сервера і нам не доводиться розбиратися з тим, звідки брати зображення (це можна оптимізувати через CDN, але навіщо, вірно)
• Багато ікон, з якими ви, напевно, не захочете мати справу. Наприклад, де взяти іконки прапорів для всіх країн, які ви хочете відобразити в адміністрації? Використовуйте емодзі: https://github.com/bara.../country/blob/main/flag…

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

Іноді я поміщаю важливі стилі CSS, що визначають макет сторінки і основний макет, безпосередньо в HTML. Я встановлюю обмеження в 1 КБ, в яке намагаюся вкластися якомога більше. Недоліком такого підходу є те, що стилі повинні передаватися в кожному запиті і не можуть кешуватися, з іншого боку, вони завантажуються незрівнянно швидше, ніж зображення.

Я не такий вже й експерт зі швидкості завантаження, Мартін Міхалек скаже вам краще.

Використовуйте ajax!

Я завжди використовую ajax для отримання неважливого або повільного контенту. Це трохи додає до технологічних вимог програми, але я можу собі це дозволити.

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

Як це зробити у Vue: https://vue.baraja.cz/api-a-ajax-ve-vue-js

На бекенді я використовую бібліотеку для Nette: https://github.com/baraja-core/structured-api

Використовуйте відповідний CDN

Для статичної роздачі контенту рекомендую використовувати CDN для всіх типів сайтів. Якщо ви не можете налаштувати CDN, принаймні використовуйте Cloudflare в режимі проксі. Він буде автоматично кешувати для себе статичний контент на основі заголовків HTTP. Не у всіх хостинг-провайдерів Pops добре налаштований, а для довгих маршрутів це заощадить вам сотні мілісекунд на кожному запиті.

Відповідний формат зображення

Один з моїх юніорів нещодавно розмістив на головній сторінці сайту зображення у форматі PNG, яке містило фотографію і займало 3 Мб. Він сказав, що це нормально, тому що сторінка швидко завантажилася на його з'єднанні (це відбувається на його оптиці вдома, чи не так...), плюс він сказав, що ми передаємо багато даних в ці дні, наприклад, відео.

Я ставлюся до цього по-старому і оптимізую те, що можу.

Фотографії у форматі JPG, а краще WEBP. Але збереження зображення у форматі JPG ще нічого не означає, його потрібно прогнати через сервіс оптимізації: https://tinyjpg.com

Якщо у вас є зображення в Git'і, цей інструмент може автоматично стиснути їх і надіслати pull request: https://imgbot.net. Коли додається нове зображення, воно знову надсилає PR.

Якщо потрібно стиснути тисячі зображень (наприклад, цілу галерею товарів на сайті), я використовую для цього десктопний додаток для Mac: https://imageoptim.com/mac.

Належне стиснення зображень зазвичай дозволяє зберегти найбільше даних. Іноді навіть 50%.