Від автора: коли мова йде про продуктивність сайту, важко згадати всі інструменти, які можуть допомогти під час розробки. З цією метою ми склали список з 23 інструментів продуктивності. Деякі з них багатьом вже знайомі, інші, ймовірно, ще поки немає. Якісь и докладно розглядали в попередніх статтях , інші ще не включені в майбутні статті; але всі вони дуже корисні і повинні бути частиною вашого арсеналу.
Інструменти продуктивності з боку клієнта
1. Перевірте мобільний швидкість за допомогою Google
Google My Test Site — це онлайн-інструмент, пропонований Google і підтримуваний популярним інструментом веб-сайту WebPageTest.org.
Звіт можна візуалізувати на сайті або відправити його по електронній пошті.
Інструмент показує час завантаження сайту (або індекс швидкості), розраховане за допомогою браузера Chrome на пристрої Moto G4 в мережі 3G. А також підраховує приблизний відсоток відвідувачів, втрачених за час завантаження. Серед іншого він також:
порівнює швидкість вашого сайту з найбільш ефективними сайтами цієї ж галузі
підказує найбільш ефективні виправлення, які можуть допомогти прискорити час завантаження сайту.
2. SiteSpeed.io
SiteSpeed.io — це інструмент з відкритим вихідним кодом — або набір інструментів для розробки який допомагає оцінити ефективність сайту і поліпшити його.
Coach: дає вам рекомендації по виправленню і роботі з сайтом на основі попередніх практик.
Browsertime: збирає метрики і файли HAR з вашого браузера.
Chrome-HAR: дозволяє порівнювати файли HAR.
PageXray: витягує різні показники (з файлів HAR), такі як розмір, кількість запитів і т. д.
Ви можете встановити ці інструменти з допомогою npm:
npm install sitespeed.io -g
sitespeed.io –help
або з допомогою Docker:
docker run –shm-size=1g –rm -v “$(pwd)”:/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io/ –video –speedIndex
3. Lighthouse від Google
Lighthouse — це інструмент з відкритим вихідним кодом для проведення аудитів з метою поліпшення якості веб-сторінки. Він інтегрований в DevTools від Chrome і може бути встановлений як розширення Chrome, так і інструмент на основі CLI. Це незамінний інструмент для вимірювання, налагодження та покращення продуктивності сучасних клієнтських додатків (особливості PWA).
Розширення можна знайти в Інтернет-магазині Chrome. Або можна встановити Lighthouse, від npm, використовуючи:
npm install -g lighthouse
І потім запустити його з допомогою:
lighthouse
Можна використовувати Lighthouse для того, щоб створити свій власний інструмент продуктивності або ж для безперервної інтеграції.
Обов’язково перевірте ці інструменти, засновані на Lighthouse:
webpack-lighthouse-plugin: плагін Lighthouse для Webpack
treo: Lighthouse як послуга з особистим безкоштовним планом.
calibreapp: платна послуга, заснована на Lighthouse, яка допомагає відслідковувати, розуміти та покращувати показники продуктивності з використанням наявних примірників Google Chrome.
lighthouse-cron: модуль, який може допомогти відстежити додаткові показники Lighthouse і метрики.
4. Lightcrawler
Можна використовувати Lightcrawler для сканування сайту, а потім запускати кожну сторінку, знайдену через Lighthouse. Почніть з установки інструменту через npm:
npm install –save-dev lightcrawler
Потім запустіть його з терміналу, вказавши цільової URL і файл конфігурації JSON:
lightcrawler –url –config lightcrawler-config.json
Файл конфігурації виглядає приблизно так:
{
“extends”: “lighthouse:default”,
“settings”: {
“crawler”: {
“maxDepth”: 2,
“maxChromeInstances”: 5
},
“onlyCategories”: [
“Performance”,
],
“onlyAudits”: [
“accesskeys”,
“time-to-interactive”,
“user-timings”
]
}
}
5. YSlow
YSlow — це букмарклет JavaScript, який можна додати в браузер і викликати на будь відвіданого веб-сторінці. Цей інструмент аналізує веб-сторінки і допомагає виявити причини повільної роботи, засновані на правилах Yahoo для високопродуктивних веб-сайтів.
Ви можете встановити YSlow, перетягнувши букмарклет в панель закладок вашого браузера.
6. GTmetrix
GTmetrix — це онлайн-інструмент, який дає уявлення про продуктивність сайту (час повного завантаження, загальний розмір сторінки, кількість запитів тощо), а також практичні рекомендації щодо її оптимізації.
7. Page Performance
Page performance — це розширення Chrome, яке можна використовувати для швидкого аналізу продуктивності. Якщо у вас відкрито багато вкладок, розширення буде викликатися на активній вкладці.
8. The AMP Project
The AMP (Accelerated Mobile Pages) project — проект з відкритим вихідним кодом, метою якого є прискорення роботи мережі. Він дозволяє розробникам створювати швидкі, високопродуктивні веб-сайти з великим досвідом використання на всіх платформах (настільні браузери і мобільні пристрої).
The AMP project складається з трьох основних компонентів:
AMP HTML: це HTML, але з деякими обмеженнями для забезпечення надійної роботи.
AMP JS: бібліотека JavaScript, яка займається наданням AMP HTML.
Cash AMP: ery для кешування і доставки достовірних сторінок AMP. Ви можете використовувати такі інструменти, як AMP Validator або amphtml-validator, щоб перевірити, чи ваші сторінки діючими сторінками AMP.
Коли ви додасте розмітку AMP на свої сторінки, Google автоматично виявить їх і кешує, щоб доставити через CDR AMP. Тут можна дізнатися, як створити свою першу сторінку AMP.
Інструменти продуктивності на рівні коду
9. Селектори Dust Me
Селектори Dust Me — це розширення для браузера, яке допомагає виявити і видалити невикористовувані селектори CSS на веб-сторінках. Вона сканує всі таблиці стилів, потім розділяє знайдені селектори на використовувані і невикористовувані селектори, які точно скажуть, що CSS використовує або не використовує на відсканованої сторінці.
10. Penthouse
Penthouse — це критичний шаблон CSS-генератора, який дозволяє отримати необхідний CSS для візуалізації вищепереліченого вмісту сторінки. Потрібно всього лише вказати повний CSS-файл вашого сайту і цільову сторінку.
Встановити Penthouse можна з npm:
npm install penthouse
Онлайн — версія цього інструменту доступна тут.
Для поліпшення платного сервісу для цього інструменту обов’язково ознайомтеся з цим.
11. Critical
Це інструмент Node.js, створений Addy Osmani, який допомагає отримати і вбудувати CSS критичного шляху в HTML-сторінки. Ви можете встановити його з npm:
npm install -g critical
critical test/fixture/index.html –base test/fixture > critical.css
Critical використовується в якості інструменту CLI або може бути інтегрований з такими системами складання, як Gulp.
12. Optimize-js
Можна використовувати Optimize-js для оптимізації коду JavaScript з метою прискорення початковій завантаження шляхом обкатки викликаються функцій в круглих дужках. Цей інструмент можна встановити з npm:
npm install -g optimize-js
Потім можна використовувати його через CLI:
optimize-js input.js > output.js
13. Інструменти оптимізації зображень
ImageOptim — безкоштовний додаток з відкритим вихідним кодом для Mac, яке оптимізує розмір зображення. Також доступний як платний онлайн-сервіс.
Pngcrush — безкоштовний і оптимальний PNG-оптимізатор з відкритим вихідним кодом, доступний для ос Windows і Linux.
Trimage — це крос-платформний безкоштовний інструмент для оптимізації без втрат файлів PNG і JPG.
Інструменти продуктивності на стороні сервера
14. Apachetop
Apachetop — це інструмент, натхненний top і заснований на mytop, який можна використовувати для моніторингу продуктивності веб-сервера Apache. Він може використовуватися для відображення поточного кількості оброблюваних операцій запису, читання і запитів.
Для систем на базі Debian встановити apachetop можна за допомогою apt:
sudo apt-get install apachetop
Для систем Red Hat і CentOS увімкніть репозиторій EPEL для установки apachetop, потім використовуйте менеджер пакетів yum:
sudo yum -y install epel-release
sudo yum clean all
sudo yum -y update
sudo yum -y install apachetop
Після його можна використати, надавши файл журналу сервера Apache:
apachetop -f /var/log/apache2/access.log
15. Ngxtop
Ngxtop — це топ-інструмент, заснований на Python, який аналізує журнал доступу до сервера Nginx і виводить такі важливі показники, як активний запит, загальні запити за кодом стану, верхнім віддаленим IP-адресами і середнім байтам, відправленим у реальному часі. Ngxtop також може використовуватися для аналізу журналу доступу Apache.
Ось приклад виведення з Ngxtop за замовчуванням:
Переконайтеся, що у вашій системі встановлений диспетчер пакетів Python та PIP, а потім виконайте такі дії для встановлення Ngxtop:
pip install ngxtop
ngxtop -h
Ви також можете спробувати схожі інструменти:
Ngx-top: альтернатива Ngxtop, побудована з використанням Haskell.
Luameter: комерційний модуль Lua для Nginx, який забезпечує ключові показники продуктивності для моніторингу Nginx в режимі реального часу.
16. uptime-cli
Uptime-cli — це інструмент CLI для моніторингу працездатності вашого сайту з API-інтерфейсом Uptime Robot.
Інструмент можна встановити з npm:
npm install -g uptime-cli
Інструменти продуктивності SQL
17. Tuning-primer
Tuning-primer — це сучасний Bash скрипт для налаштування MySQL версії 5.5 або вище. Він заснований на скрипті для налаштування продуктивності MySQL версії 1.6-r1.
wget https://github.com/RootService/tuning-primer/blob/master/tuning-primer.sh
chmod +x tuning-primer.sh
18. MySQLTuner
MySQLTuner — це сценарій, написаний на Perl, який аналізує продуктивність сервера MySQL, а потім показує рекомендації на основі інформації, яку він знаходить. Ці рекомендації — просто налаштування параметрів конфігурації (знайдених в /etc/mysql/my.cnfфайле), щоб зробити сервер MySQL більш ефективним. Ви можете захопити скрипт MySQLTuner з mysqltuner.com за допомогою такого інструменту, як wget:
wget http://mysqltuner.com/mysqltuner.pl
chmod +x mysqltuner.pl
./mysqltuner.pl –help
19. Mytop
Mytop — це інструмент, схожий на CLI, для відображення продуктивності сервера MySQL, шляхом підключення до сервера і періодичного запуску show processlist і show status команд. Після чого він підсумовує інформацію. Для систем на базі Debian ви можете використовувати apt-getдля установки mytop:
sudo yum -y install epel-release
sudo yum clean all
sudo yum -y update
sudo apt-get install mytop
Для систем Red Hat і Centos увімкніть репозиторій EPEL для установки Mytop, потім використовуйте менеджер пакетів yum:
sudo yum install mytop
20. SQLBenchmarkPro
SQLBenchmarkPro — це безкоштовний хмарний сервіс, який дозволяє дистанційно відслідковувати вашу базу даних і серверів SQL для малого та великого бізнесу. Він працює, встановлюючи локальний агент SQLBenchmarkPro, який постійно контролює продуктивність і працездатність ваших серверів.
Інструменти тестування навантаження
21. Apache JMeter
Apache JMeter — це інструмент з відкритим вихідним кодом, створений за допомогою Java і Stefano Mazzocchi від Apache Software Foundation. Він може використовуватися для тестування навантаження та для вимірювання продуктивності.
Оскільки JMeter побудований з Java, він доступний на всіх основних платформах, таких як Windows, Linux і macOS.
Переконайтеся, що у вас встановлена Java, відвідайте цю сторінку, щоб завантажити JMeter. Потім можна запустити JMeter, в режимі графічного інтерфейсу або в режимі сервера або в режимі командного рядка з різних сценаріїв в папці bin.
22. Grinder
Grinder — це платформа тестування навантаження, побудована з допомогою Java, яка може використовуватися для запуску розподілених навантажувальних випробувань з великою кількістю машин інжектора навантаження. Це інструмент з відкритим вихідним кодом, доступний для ліцензії типу BSD.
Ви можете використовувати Grinder для завантаження тестів з HTTP-серверів на SOAP сервіси і REST API, а також на сервери додатків CORBA, RMI, JMS і EJB і т. д. Ви можете гнучко писати сценарії для інфраструктури Grinder, використовуючи потужні мови начебто Jython і Closure.
23. Gatling
Gatling — це інструмент тестування навантаження, який ви можете використовувати для завантаження тестового веб-додатки шляхом моделювання великої кількості запитів в секунду з використанням декількох машин. Gatling можна створювати з використанням мови Scala або простого мови DSL, який може задовольнити більшість ваших потреб.
