Фронтенд-чекліст зі швидкодії, який допомагає нам будувати чудові сайти

10.01.2018
Фронтенд-чекліст зі швидкодії, який допомагає нам будувати чудові сайти
Автор:

Чеклісти — один з найкращих винаходів людства для майже будь-якої справи: від купівлі продуктів на новорічну вечерю до запуску космічного корабля. У веб-розробці чеклісти особливо популярні. Ми уже пропонували вам чекліст для створення успішного сайту, чекліст для запуску сайту, базовий чекліст для мобільного тестування, а також чекліст із 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 для критичних сторінок, таких як головна сторінка чи лендінг-сторінки.

Оптимізація веб-шрифтів

Ми аналізуємо використання веб-шрифтів на сайті, оцінюючи їхню важливість порівняно з тим, як вони сповільнюють сайт. Тоді ми заміняємо або зменшуємо їх там, де це доречно.

Мінімум редиректів

Також важливо по можливості позбутися редиректів, адже кожен з них вносить свій вклад у сповільнення сторінки.

Висновок

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

Голосів: 1 Рейтинг: 5

Також по темі

1

Уявіть, яким чудовим буде ваш майбутній інтернет-магазин. Юзабіліті магазину...

2

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

3

Ми описали переваги, які принесе вашому веб-сайтові HTTPS.

4

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

5

Як кажуть англійці, багато чорнил було витрачено на описи численних переваг веб-...

Subscribe to our blog updates