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

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

От автора: когда речь идет про производительность сайта, трудно вспомнить все инструменты, которые могут помочь во время разработки. С этой целью мы составили список из 23 инструментов производительности. Некоторые из них многим уже знакомы, другие, вероятно, ещё пока нет. Какие-то ы подробно рассматривали в предыдущих статьях , другие еще не включены в будущие статьи; но все они очень полезны и должны быть частью вашего арсенала.

Инструменты производительности со стороны клиента

1. Проверьте мобильную скорость с помощью Google

Google Test My 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:

или с помощью Docker:

3. Lighthouse от Google

Lighthouse — это инструмент с открытым исходным кодом для проведения аудитов с целью улучшения качества веб-страницы. Он интегрирован в DevTools от Chrome и может быть установлен как расширение Chrome, так и инструмент на основе CLI. Это незаменимый инструмент для измерения, отладки и улучшения производительности современных клиентских приложений (особенности PWA).

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

Расширение можно найти в Интернет-магазине Chrome. Или можно установить Lighthouse, от npm, используя:

И затем запустить его с помощью:

Можно использовать Lighthouse для того, чтобы создать свой собственный инструмент производительности или же для непрерывной интеграции.

Обязательно проверьте эти инструменты, основанные на Lighthouse:

webpack-lighthouse-plugin: плагин Lighthouse для Webpack

treo: Lighthouse как услуга с личным бесплатным планом.

calibreapp: платная услуга, основанная на Lighthouse, которая помогает отслеживать, понимать и улучшать показатели производительности с использованием существующих экземпляров Google Chrome.

lighthouse-cron: модуль, который может помочь отследить дополнительные показатели Lighthouse и метрики.

4. Lightcrawler

Можно использовать Lightcrawler для сканирования сайта, а затем запускать каждую страницу, найденную через Lighthouse. Начните с установки инструмента через npm:

Затем запустите его с терминала, указав целевой URL и файл конфигурации JSON:

Файл конфигурации выглядит примерно так:

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: сеть доставки контента для кэширования и доставки достоверных страниц 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:

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Для улучшения платного сервиса для этого инструмента обязательно ознакомьтесь с этим.

11. Critical

Это инструмент Node.js, созданный Addy Osmani, который помогает извлечь и встроить CSS критического пути в HTML-страницы. Вы можете установить его из npm:

Critical используется в качестве инструмента CLI или может быть интегрирован с такими системами сборки, как Gulp.

12. Optimize-js

Можно использовать Optimize-js для оптимизации кода JavaScript с целью ускорения начальной загрузки путем обкатки вызываемых функций в круглых скобках. Этот инструмент можно установить из npm:

Затем можно использовать его через CLI:

13. Инструменты оптимизации изображений

ImageOptim — бесплатное приложение с открытым исходным кодом для Mac, которое оптимизирует размер изображения. Также доступен как платный онлайн-сервис.

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

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

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

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

Инструменты производительности на стороне сервера

14. Apachetop

Apachetop — это инструмент, вдохновленный top и основанный на mytop, который можно использовать для мониторинга производительности веб-сервера Apache. Он может использоваться для отображения текущего количества обрабатываемых операций записи, чтения и запросов.

Для систем на базе Debian установить apachetop можно с помощью apt:

Для систем Red Hat и CentOS включите репозиторий EPEL для установки apachetop, затем используйте менеджер пакетов yum:

После его можно использовать, предоставив файл журнала сервера Apache:

15. Ngxtop

Ngxtop — это топ-инструмент, основанный на Python, который анализирует журнал доступа к серверу Nginx и выводит такие важные показатели, как активный запрос, общие запросы по коду состояния, верхним удаленным IP-адресам и средним байтам, отправленным в реальном времени. Ngxtop также может использоваться для анализа журнала доступа Apache.

Вот пример вывода из Ngxtop по умолчанию:

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

Убедитесь, что в вашей системе установлен диспетчер пакетов Python и PIP, а затем выполните следующие действия для установки Ngxtop:

Вы также можете попробовать похожие инструменты:

Ngx-top: альтернатива Ngxtop, построенная с использованием Haskell.

Luameter: коммерческий модуль Lua для Nginx, который обеспечивает ключевые показатели производительности для мониторинга Nginx в режиме реального времени.

16. uptime-cli

Uptime-cli — это инструмент CLI для мониторинга работоспособности вашего сайта с API-интерфейсом Uptime Robot.

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

Инструмент можно установить из npm:

Инструменты производительности SQL

17. Tuning-primer

Tuning-primer — это современный Bash скрипт для настройки MySQL версии 5.5 или выше. Он основан на скрипте для настройки производительности MySQL версии 1.6-r1.

18. MySQLTuner

MySQLTuner — это сценарий, написанный на Perl, который анализирует производительность сервера MySQL, а затем показывает рекомендации на основе информации, которую он находит. Эти рекомендации — просто настройка параметров конфигурации (найденных в /etc/mysql/my.cnfфайле), чтобы сделать сервер MySQL более эффективным. Вы можете захватить скрипт MySQLTuner с mysqltuner.com с помощью такого инструмента, как wget:

19. Mytop

Mytop — это инструмент, похожий на CLI, для отображения производительности сервера MySQL, путем подключения к серверу и периодического запуска show processlist и show status команд. После чего он суммирует информацию. Для систем на базе Debian вы можете использовать apt-getдля установки mytop:

Для систем Red Hat и Centos включите репозиторий EPEL для установки Mytop, затем используйте менеджер пакетов yum:

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 сервисы и API REST, а также на серверы приложений CORBA, RMI, JMS и EJB и т.д. Вы можете гибко писать сценарии для инфраструктуры Grinder, используя мощные языки вроде Jython и Closure.

23. Gatling

Gatling — это инструмент тестирования нагрузки, который вы можете использовать для загрузки тестового веб-приложения путем моделирования большого количества запросов в секунду с использованием нескольких машин. Gatling можно создавать с использованием языка Scala или простого языка DSL, который может удовлетворить большинство ваших потребностей.

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

Автор: Ahmed Bouchefra

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

Узнайте как ускорить загрузку сайта .

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree