23 інструмент розробки для підвищення продуктивності сайту

1

Від автора: коли мова йде про продуктивність сайту, важко згадати всі інструменти, які можуть допомогти під час розробки. З цією метою ми склали список з 23 інструментів продуктивності. Деякі з них багатьом вже знайомі, інші, ймовірно, ще поки немає. Якісь и докладно розглядали в попередніх статтях , інші ще не включені в майбутні статті; але всі вони дуже корисні і повинні бути частиною вашого арсеналу.

Інструменти продуктивності з боку клієнта

1. Перевірте мобільний швидкість за допомогою Google

Google My Test Site — це онлайн-інструмент, пропонований Google і підтримуваний популярним інструментом веб-сайту WebPageTest.org.

23 інструмент розробки для підвищення продуктивності сайту

Звіт можна візуалізувати на сайті або відправити його по електронній пошті.

23 інструмент розробки для підвищення продуктивності сайту

Інструмент показує час завантаження сайту (або індекс швидкості), розраховане за допомогою браузера Chrome на пристрої Moto G4 в мережі 3G. А також підраховує приблизний відсоток відвідувачів, втрачених за час завантаження. Серед іншого він також:

порівнює швидкість вашого сайту з найбільш ефективними сайтами цієї ж галузі

підказує найбільш ефективні виправлення, які можуть допомогти прискорити час завантаження сайту.

2. SiteSpeed.io

SiteSpeed.io — це інструмент з відкритим вихідним кодом — або набір інструментів для розробки який допомагає оцінити ефективність сайту і поліпшити його.

23 інструмент розробки для підвищення продуктивності сайту

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).

23 інструмент розробки для підвищення продуктивності сайту

Розширення можна знайти в Інтернет-магазині 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 для високопродуктивних веб-сайтів.

23 інструмент розробки для підвищення продуктивності сайту

Ви можете встановити YSlow, перетягнувши букмарклет в панель закладок вашого браузера.

6. GTmetrix

GTmetrix — це онлайн-інструмент, який дає уявлення про продуктивність сайту (час повного завантаження, загальний розмір сторінки, кількість запитів тощо), а також практичні рекомендації щодо її оптимізації.

23 інструмент розробки для підвищення продуктивності сайту

7. Page Performance

23 інструмент розробки для підвищення продуктивності сайту

Page performance — це розширення Chrome, яке можна використовувати для швидкого аналізу продуктивності. Якщо у вас відкрито багато вкладок, розширення буде викликатися на активній вкладці.

8. The AMP Project

The AMP (Accelerated Mobile Pages) project — проект з відкритим вихідним кодом, метою якого є прискорення роботи мережі. Він дозволяє розробникам створювати швидкі, високопродуктивні веб-сайти з великим досвідом використання на всіх платформах (настільні браузери і мобільні пристрої).

23 інструмент розробки для підвищення продуктивності сайту

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

23 інструмент розробки для підвищення продуктивності сайту

Селектори Dust Me — це розширення для браузера, яке допомагає виявити і видалити невикористовувані селектори CSS на веб-сторінках. Вона сканує всі таблиці стилів, потім розділяє знайдені селектори на використовувані і невикористовувані селектори, які точно скажуть, що CSS використовує або не використовує на відсканованої сторінці.

10. Penthouse

Penthouse — це критичний шаблон CSS-генератора, який дозволяє отримати необхідний CSS для візуалізації вищепереліченого вмісту сторінки. Потрібно всього лише вказати повний CSS-файл вашого сайту і цільову сторінку.

Встановити Penthouse можна з npm:

npm install penthouse

Онлайн — версія цього інструменту доступна тут.

23 інструмент розробки для підвищення продуктивності сайту

Для поліпшення платного сервісу для цього інструменту обов’язково ознайомтеся з цим.

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, яке оптимізує розмір зображення. Також доступний як платний онлайн-сервіс.

23 інструмент розробки для підвищення продуктивності сайту

Pngcrush — безкоштовний і оптимальний PNG-оптимізатор з відкритим вихідним кодом, доступний для ос Windows і Linux.

Trimage — це крос-платформний безкоштовний інструмент для оптимізації без втрат файлів PNG і JPG.

23 інструмент розробки для підвищення продуктивності сайту

Інструменти продуктивності на стороні сервера

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 за замовчуванням:

23 інструмент розробки для підвищення продуктивності сайту

Переконайтеся, що у вашій системі встановлений диспетчер пакетів 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.

23 інструмент розробки для підвищення продуктивності сайту

Інструмент можна встановити з 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, який постійно контролює продуктивність і працездатність ваших серверів.

23 інструмент розробки для підвищення продуктивності сайту

Інструменти тестування навантаження

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, який може задовольнити більшість ваших потреб.

23 інструмент розробки для підвищення продуктивності сайту