От автора: когда речь идет про производительность сайта, трудно вспомнить все инструменты, которые могут помочь во время разработки. С этой целью мы составили список из 23 инструментов производительности. Некоторые из них многим уже знакомы, другие, вероятно, ещё пока нет. Какие-то ы подробно рассматривали в предыдущих статьях , другие еще не включены в будущие статьи; но все они очень полезны и должны быть частью вашего арсенала.
Инструменты производительности со стороны клиента
1. Проверьте мобильную скорость с помощью Google
Google Test My Site — это онлайн-инструмент, предлагаемый Google и поддерживаемый популярным инструментом веб-сайта WebPageTest.org.
Отчёт можно визуализировать на сайте или отправить его по электронной почте.
Инструмент показывает время загрузки сайта (или индекс скорости), рассчитанное с помощью браузера Chrome на устройстве Moto G4 в сети 3G. А также подсчитывает примерный процент посетителей, потерянных из-за времени загрузки. Среди прочего он также:
сравнивает скорость вашего сайта с наиболее эффективными сайтами этой же отрасли
подсказывает наиболее эффективные исправления, которые могут помочь ускорить время загрузки сайта.
2. SiteSpeed.io
SiteSpeed.io — это инструмент с открытым исходным кодом — или набор инструментов для разработки — который помогает оценить эффективность сайта и улучшить его.
Coach: дает вам рекомендации по исправлению и работе с сайтом на основе предыдущих практик.
Browsertime: собирает метрики и файлы HAR из вашего браузера.
Chrome-HAR: позволяет сравнивать файлы HAR.
PageXray: извлекает различные показатели (из файлов HAR), такие как размер, количество запросов и т.д.
Вы можете установить эти инструменты с помощью npm:
|
1 2 |
npm install sitespeed.io -g sitespeed.io --help |
или с помощью Docker:
|
1 |
docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io //www.sitespeed.io/ --video --speedIndex |
3. Lighthouse от Google
Lighthouse — это инструмент с открытым исходным кодом для проведения аудитов с целью улучшения качества веб-страницы. Он интегрирован в DevTools от Chrome и может быть установлен как расширение Chrome, так и инструмент на основе CLI. Это незаменимый инструмент для измерения, отладки и улучшения производительности современных клиентских приложений (особенности PWA).
Расширение можно найти в Интернет-магазине Chrome. Или можно установить Lighthouse, от npm, используя:
|
1 |
npm install -g lighthouse |
И затем запустить его с помощью:
|
1 |
lighthouse <url> |
Можно использовать Lighthouse для того, чтобы создать свой собственный инструмент производительности или же для непрерывной интеграции.
Обязательно проверьте эти инструменты, основанные на Lighthouse:
webpack-lighthouse-plugin: плагин Lighthouse для Webpack
treo: Lighthouse как услуга с личным бесплатным планом.
calibreapp: платная услуга, основанная на Lighthouse, которая помогает отслеживать, понимать и улучшать показатели производительности с использованием существующих экземпляров Google Chrome.
lighthouse-cron: модуль, который может помочь отследить дополнительные показатели Lighthouse и метрики.
4. Lightcrawler
Можно использовать Lightcrawler для сканирования сайта, а затем запускать каждую страницу, найденную через Lighthouse. Начните с установки инструмента через npm:
|
1 |
npm install --save-dev lightcrawler |
Затем запустите его с терминала, указав целевой URL и файл конфигурации JSON:
|
1 |
lightcrawler --url <url> --config lightcrawler-config.json |
Файл конфигурации выглядит примерно так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{ "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: сеть доставки контента для кэширования и доставки достоверных страниц 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:
|
1 |
npm install penthouse |
Онлайн — версия этого инструмента доступна здесь.
Для улучшения платного сервиса для этого инструмента обязательно ознакомьтесь с этим.
11. Critical
Это инструмент Node.js, созданный Addy Osmani, который помогает извлечь и встроить CSS критического пути в HTML-страницы. Вы можете установить его из npm:
|
1 2 |
npm install -g critical critical test/fixture/index.html --base test/fixture > critical.css |
Critical используется в качестве инструмента CLI или может быть интегрирован с такими системами сборки, как Gulp.
12. Optimize-js
Можно использовать Optimize-js для оптимизации кода JavaScript с целью ускорения начальной загрузки путем обкатки вызываемых функций в круглых скобках. Этот инструмент можно установить из npm:
|
1 |
npm install -g optimize-js |
Затем можно использовать его через CLI:
|
1 |
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:
|
1 |
sudo apt-get install apachetop |
Для систем Red Hat и CentOS включите репозиторий EPEL для установки apachetop, затем используйте менеджер пакетов yum:
|
1 2 3 4 |
sudo yum -y install epel-release sudo yum clean all sudo yum -y update sudo yum -y install apachetop |
После его можно использовать, предоставив файл журнала сервера Apache:
|
1 |
apachetop -f /var/log/apache2/access.log |
15. Ngxtop
Ngxtop — это топ-инструмент, основанный на Python, который анализирует журнал доступа к серверу Nginx и выводит такие важные показатели, как активный запрос, общие запросы по коду состояния, верхним удаленным IP-адресам и средним байтам, отправленным в реальном времени. Ngxtop также может использоваться для анализа журнала доступа Apache.
Вот пример вывода из Ngxtop по умолчанию:
Убедитесь, что в вашей системе установлен диспетчер пакетов Python и PIP, а затем выполните следующие действия для установки Ngxtop:
|
1 2 |
pip install ngxtop ngxtop -h |
Вы также можете попробовать похожие инструменты:
Ngx-top: альтернатива Ngxtop, построенная с использованием Haskell.
Luameter: коммерческий модуль Lua для Nginx, который обеспечивает ключевые показатели производительности для мониторинга Nginx в режиме реального времени.
16. uptime-cli
Uptime-cli — это инструмент CLI для мониторинга работоспособности вашего сайта с API-интерфейсом Uptime Robot.
Инструмент можно установить из npm:
|
1 |
npm install -g uptime-cli |
Инструменты производительности SQL
17. Tuning-primer
Tuning-primer — это современный Bash скрипт для настройки MySQL версии 5.5 или выше. Он основан на скрипте для настройки производительности MySQL версии 1.6-r1.
|
1 2 |
wget //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:
|
1 2 3 |
wget //mysqltuner.com/mysqltuner.pl chmod +x mysqltuner.pl ./mysqltuner.pl --help |
19. Mytop
Mytop — это инструмент, похожий на CLI, для отображения производительности сервера MySQL, путем подключения к серверу и периодического запуска show processlist и show status команд. После чего он суммирует информацию. Для систем на базе Debian вы можете использовать apt-getдля установки mytop:
|
1 2 3 4 |
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:
|
1 |
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 сервисы и API REST, а также на серверы приложений CORBA, RMI, JMS и EJB и т.д. Вы можете гибко писать сценарии для инфраструктуры Grinder, используя мощные языки вроде Jython и Closure.
23. Gatling
Gatling — это инструмент тестирования нагрузки, который вы можете использовать для загрузки тестового веб-приложения путем моделирования большого количества запросов в секунду с использованием нескольких машин. Gatling можно создавать с использованием языка Scala или простого языка DSL, который может удовлетворить большинство ваших потребностей.
Автор: Ahmed Bouchefra
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
