З самого початку варто розуміти різницю між продуктивністю і швидкістю. Часто зустрічаю думки, що ці два поняття відносять до одного і того ж. Це не так. Продуктивність тільки частково залежить від швидкості. Тут також варто знати і про інші фактори: Архітектура коду, рендеринг контенту.
Перевірка за допомогою Performance
Google Chrome DevTools Performance – класний інструмент, який допоможе розібратися з продуктивністю. Інструмент складний, зате безплатний (тому хто не хоче платити, занурюйтеся в тему).
Як почати перевірку
Для перевірки доступні кілька опцій – CPU і Network. Перша опція гальмує процесор, а друга занижує швидкість інтернету. Тут може виникнути питання: для чого варто все сповільнювати? Саме на повільному з’єднанні і частоті можна краще побачити проблеми сайту.
Аналізуємо сайт
- Вимірюємо плавність відтворення. Ця функція вимірюється в кількості кадрів в секунду. Оптимальне значення – 60 кадрів за секунду. Якщо ж є проблемні місця, то на графіку відображається червона смуга.
- Вимірюємо навантаження на процесор. Цей параметр вимірює CPU. І якщо на графіку є ділянки з максимальним навантаженням, то це дзвіночок для оптимізації.
- Скріншоти етапів завантаження. Найкращий варіант, якщо спершу завантажуються елементи першого екрану. Також можна побачити проблеми в коді сайту.
Замість висновку
Performance дає можливість перевірити будь-яку сторінку. Програма непроста, зате якщо розібратися, можна виявити багато дефектів сайту. Зручно те, що інструмент знаходить конкретну проблемну ділянку в коді.
Чи користувався хтось Performance? Може хто-небудь використовує інші інструменти?