Чеклісти — один з найкращих винаходів людства для майже будь-якої справи: від купівлі продуктів на новорічну вечерю до запуску космічного корабля. У веб-розробці чеклісти особливо популярні. Ми уже пропонували вам чекліст для створення успішного сайту, чекліст для запуску сайту, базовий чекліст для мобільного тестування, а також чекліст із 50 пунктів для тестування юзабіліті сайту. А сьогодні буде базовий чекліст для фронтенд-розробки, який безпосередньо стосується швидкодії. Він дозволяє нам бути насторожі одного з найдорожчих скрабів вашого сайту — швидкості. Отже, запускаймо двигуни!
Базовий фронтенд-чекліст зі швидкодії
Показник Google Page Speed на рівні 90/100
Всі сторінки повинні пройти тест Google Page Speed як мінімум на 90 із 100. Цей показник є мрією для усіх фронтенд-розробників і реальністю для найкращих із них.
Start Render Time у межах двох секунд
Також необхідно перевірити Start Render Time, тобто час, який потрібен, аби перший контент почав відображатись у браузері користувача. Цей показник не повинен перевищувати 2 секунд (а краще — 1 секунди).
Вага кожної сторінки в межах 500K
Вага кожної сторінки повинна бути протестована на предмет того, чи вона вписується в 500K. Звісно, все залежить від сайту, але варто максимально наближатись до цієї сучасної рекомендації мобільно-орієнтованого світу.
Конкатенація CSS
Менше HTTP-запитів — шлях до вищої швидкості сайту, тож ми перевіряємо, чи конкатенуються (об’єднуються) CSS-файли.
Конкатенація JavaScript
Як і конкатенація CSS-файлів, конкатенація JavaScript-файлів призначена зменшити навантаження на сервер і пришвидшити сайт.
Мініфікація CSS
Також необхідно переконатись, що CSS мініфіковано шляхом видалення пробілів, індентації, коментарів і т.д., так щоб файли знаходились в межах 5K.
Мініфікація JavaScript
Те саме стосується і JavaScript-файлів, які також потрібно зменшити заради швидкодії, видаливши непотрібні елементи, код, що не використовується, і так далі.
Стиснення
Особливо коли йдеться про скрипти і CSS, стиснення за допомогою Brotli, Zopfl або хоча б Gzip суттєво зменшує навантаження на сервер.
Критичний CSS — в <head>
Для того щоб браузери рендерили сторінку швидше, ми дбаємо про те, що критичний CSS (який необхідний для початку рендерингу видимої частини сторінки), був поміщений у <head>. Це скорочує кількість «подорожей» до сервера.
«Ліниве» завантаження
Ми також переконуємось, чи використовується для картинок, скриптів та CSS така важлива техніка підвищення швидкодії, як «ліниве» завантаження. Її суть — у тому, що завантажувати ресурси тільки тоді, коли вони знаходяться в основному екрані користувача.
Правильне налаштування HTTP-заголовків
Щоб повною мірою застосувати силу кешування, ми також перевіряємо, щоб HTTP-заголовки, такі як expires, max-age, cache-control та інші, були налаштовані оптимально для конкретного сайту, враховуючи, які ресурси і як часто оновлюються.
Компактні “cookies”
Якщо сайт використовує HTTP-cookies для аутентифікації та персоналізації, ми дбаємо про те, щоб їхня вага та кількість були на мінімальному рівні.
Оптимізація зображень
Ми також приділяємо увагу тому, щоб зображення були правильно оптимізовані, і використовуємо формат WebP для критичних сторінок, таких як головна сторінка чи лендінг-сторінки.
Оптимізація веб-шрифтів
Ми аналізуємо використання веб-шрифтів на сайті, оцінюючи їхню важливість порівняно з тим, як вони сповільнюють сайт. Тоді ми заміняємо або зменшуємо їх там, де це доречно.
Мінімум редиректів
Також важливо по можливості позбутися редиректів, адже кожен з них вносить свій вклад у сповільнення сторінки.
Висновок
Це лише базовий фронтед-чекліст щодо швидкодії, який допомагає нам дбати про те, аби сайти літали, як космічні кораблі. Залежно від особливостей конкретного сайту, ще цілий ряд речей заслуговують на додаткову перевірку. Зв’яжіться з нашою командою для створення прекрасного і швидкого сайту, або ж для перевірки сайту, який у вас уже є!