23种提高网站性能的开发工具

When dealing with performance, it’s hard to remember all the tools that might help you out during development. For that purpose, we’ve compiled a list of 23 performance tools for your reference. Some you’ll have heard of, others probably not. Some have been covered in detail in our performance month, others are yet to be covered future articles; but all are very useful and should be part of your arsenal.

在处理性能时，很难记住所有在开发过程中可能对您有帮助的工具。 为此，我们整理了23种性能工具的列表，供您参考。 您可能听说过一些，有些可能没有。 在我们的表演月份中 ，有些内容已进行了详细介绍，而将来的文章中尚未涉及其他内容； 但所有功能都非常有用，应该成为您的武器库的一部分。

客户端性能工具 (Client-side Performance Tools)

1. 使用Google测试您的移动速度 (1. Test your Mobile Speed with Google)

Google’s Test My Site is an online tool offered by Google and powered by the popular website performance tool WebPageTest.org.

Google的“测试我的网站”是Google提供的在线工具，并由流行的网站性能工具WebPageTest.org提供支持 。

You can either visualize your report on site or have it emailed to you via your email address.

您可以在现场查看报告，也可以通过电子邮件地址将其通过电子邮件发送给您。

The tool gives you your website loading time (or Speed Index) calculated using a Chrome browser on a Moto G4 device within a 3G network. It also gives you the estimated percentage of visitors lost due to loading time. Among other things it also:

该工具为您提供了在3G网络中的Moto G4设备上使用Chrome浏览器计算的网站加载时间(或速度索引)。 它还为您提供了由于加载时间而流失的访问者的估计百分比。 除其他事项外，它还：

• compares your site speed with the top-performing sites in your industry
  将您的网站速度与您行业中表现最好的网站进行比较
• gives you top fixes that can help you speed up your website loading time.
  提供最重要的修复程序，可以帮助您加快网站加载时间。

2. SiteSpeed.io (2. SiteSpeed.io)

SiteSpeed.io is an open-source tool — or a set of tools — that can help you measure your website performance and improve it.

SiteSpeed.io是一个开放源代码工具或一组工具，可以帮助您评估和改善网站性能。

Image source: sitespeed.io

图片来源：sitespeed.io

• Coach: gives you performance advice and fixes for your website based on best practices.

  教练 ：根据最佳实践为您提供性能建议和网站修复。

• Browsertime: collects metrics and HAR files from your browser.

  Browsertime ：从浏览器收集指标和HAR文件。

• Chrome-HAR: helps you compare HAR files.

  Chrome-HAR ：帮助您比较HAR文件。

• PageXray: extracts different metrics (from HAR files) such as size, number of requests, and so on.

  PageXray ：(从HAR文件中)提取不同的度量标准，例如大小，请求数等。

You can install these tool(s) using npm:

您可以使用npm安装这些工具：

npm install sitespeed.io -g
sitespeed.io --help

Or Docker:

或Docker：

docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io/ --video --speedIndex

3. Google提供的Lighthouse (3. Lighthouse by Google)

Lighthouse is an open-source tool for running audits to improve web page quality. It’s integrated into Chrome’s DevTools and can be also installed as a Chrome extension or CLI-based tool. It’s an indispensable tool for measuring, debugging and improving the performance of modern, client-side apps (particularity PWAs).

Lighthouse是用于运行审核以提高网页质量的开源工具。 它已集成到Chrome的DevTools中，也可以作为Chrome扩展程序或基于CLI的工具进行安装。 它是衡量，调试和提高现代客户端应用程序(特殊PWA)性能的必不可少的工具。

You can find the extension from the Chrome Web Store.

您可以从Chrome网上应用店中找到扩展程序。

Or you can install Lighthouse, from npm, on your system with:

或者，您可以使用以下命令从npm在系统上安装Lighthouse：

npm install -g lighthouse

Then run it with:

然后运行：

lighthouse <url>

You can use Lighthouse programmatically to build your own performance tool or for continuous integration.

您可以通过编程方式使用Lighthouse来构建自己的性能工具或进行持续集成。

Make sure to check these Lighthouse-based tools:

确保检查以下基于Lighthouse的工具：

• webpack-lighthouse-plugin: a Lighthouse plugin for Webpack

  webpack-lighthouse-plugin ：Webpack的Lighthouse插件

• treo: Lighthouse as a service with a personal free plan.

  treo ：灯塔是一项带有个人免费计划的服务。

• calibreapp: a paid service, based on Lighthouse, that helps you track, understand and improve performance metrics using real Google Chrome instances.

  calibreapp ：一项基于Lighthouse的付费服务，可帮助您使用真实的Google Chrome实例跟踪，了解和改善性能指标。

• lighthouse-cron: a module which can help you track your Lighthouse scores and metrics overtime.

  lighthouse-cron ：一个模块，可以帮助您随着时间推移跟踪Lighthouse得分和指标。

We’ve got an in-depth look at Lighthouse in our PWA performance month post.

在我们的PWA性能月发布中 ，我们深入了解了Lighthouse。

4.光爬行者 (4. Lightcrawler)

You can use Lightcrawler to crawl your website then run each page found through Lighthouse.

您可以使用Lightcrawler来爬网网站，然后运行通过Lighthouse找到的每个页面。

Start by installing the tool via npm:

首先通过npm安装该工具：

npm install --save-dev lightcrawler

Then run it from the terminal by providing the target URL and a JSON configuration file:

然后通过提供目标URL和JSON配置文件从终端运行它：

lightcrawler --url <url> --config lightcrawler-config.json

The configuration file can be something like:

配置文件可以是这样的：

{
  "extends": "lighthouse:default",
  "settings": {
    "crawler": {
      "maxDepth": 2,
      "maxChromeInstances": 5
    },
    "onlyCategories": [
      "Performance",
    ],
    "onlyAudits": [
      "accesskeys",
      "time-to-interactive",
      "user-timings"
    ]
  }
}

5. YSlow (5. YSlow)

YSlow is a JavaScript bookmarklet that can be added to your browser and invoked on any visited web page. This tool analyzes web pages and helps you discover the reasons for slowness based on Yahoo’s rules for high-performance websites.

YSlow是一个JavaScript书签，可以添加到您的浏览器并在任何访问的网页上调用。 该工具可以分析网页，并根据Yahoo的高性能网站规则帮助您发现运行缓慢的原因。

Image source: yslow.org

图片来源：yslow.org

You can install YSlow by dragging and dropping the bookmarklet to your browser’s bookmark bar. Find more information here.

您可以通过将小书签拖放到浏览器的书签栏中来安装YSlow。 在此处查找更多信息。

6. GTmetrix (6. GTmetrix)

GTmetrix is an online tool that gives you insights into your website performance (fully loaded time, total page size, number of requests etc.) and also practical recommendations on how to optimize it.

GTmetrix是一个在线工具，可为您提供有关网站性能的信息(完全加载时间，总页面大小，请求数量等)，以及有关如何优化网站的实用建议。

7. 页面效果 (7. Page Performance)

Page performance is a Chrome extension that can be used to run a quick performance analysis. If you have many tabs open, the extension will be invoked on the active tab.

Page Performance是Chrome扩展程序，可用于运行快速性能分析。 如果打开了许多选项卡，则将在活动选项卡上调用该扩展名。

8. AMP项目 (8. The AMP Project)

The AMP (Accelerated Mobile Pages) project is an open-source project that aims to make the web faster. The AMP project enables developers to create websites that are fast, high-performing and with great user experiences across all platforms (desktop browsers and mobile devices).

AMP(加速移动页面)项目是一个开放源代码项目，旨在提高网络速度。 AMP项目使开发人员能够在所有平台(桌面浏览器和移动设备)上创建快速，高性能且具有出色用户体验的网站。

The AMP project is essentially three core components:

AMP项目实质上是三个核心组件：

• AMP HTML: it’s HTML but with some restrictions to guarantee reliable performance.
  AMP HTML：它是HTML，但有一些限制以确保可靠的性能。
• AMP JS: a JavaScript library that takes care of rendering AMP HTML.
  AMP JS：一个JavaScript库，负责呈现AMP HTML。

• AMP Cache: a content delivery network for caching and delivering valid AMP pages. You can use tools such as AMP Validator or amphtml-validator to check if your pages are valid AMP pages.

  AMP缓存：一个内容交付网络，用于缓存和交付有效的AMP页面。 您可以使用AMP Validator或amphtml-validator之类的工具来检查您的页面是否为有效的AMP页面。

Once you add AMP markup to your pages, Google will discover them automatically and cache them to deliver them through the AMP CDN. You can learn from here how to create your first AMP page.

将AMP标记添加到页面后，Google会自动发现它们并对其进行缓存，以通过AMP CDN进行传递。 您可以从这里学习如何创建您的第一个AMP页面。

代码级性能工具 (Code-level Performance Tools)

9. 尘我选择器 (9. Dust Me Selectors)

Dust Me Selectors is a browser extension that can help you discover and remove the unused CSS selectors in your web pages. It scans all style sheets, then organizes the found selectors into used and unused selectors, which will tell you exactly what CSS is used or not used on the scanned page.

Dust Me Selectors是一个浏览器扩展，可以帮助您发现和删除网页中未使用CSS选择器。 它会扫描所有样式表，然后将找到的选择器组织到已使用和未使用的选择器中，这将准确告诉您在扫描页面上使用了什么CSS。

10. 顶楼 (10. Penthouse)

Penthouse is a critical path CSS generator that allows you to get the required CSS for rendering the above-the-fold content of a specified page. You only need to specify your website’s full CSS file and a target page.

Penthouse是CSS生成器的关键路径，可让您获得渲染指定页面的首屏内容所需CSS。 您只需要指定网站的完整CSS文件和目标页面即可。

You can install Penthouse with npm:

您可以使用npm安装Penthouse：

npm install penthouse

There’s also an online version of this tool available here.

还有这个工具提供的联机版本在这里 。

For an improved, paid service for this tool, make sure to check out this one.

要获得此工具的改进的付费服务，请确保签出该工具。

11. 关键 (11. Critical)

Critical is a Node.js tool created by Addy Osmani to help you extract and inline critical-path CSS in your HTML pages. You can install it from npm:

关键(Critical)是由Addy Osmani创建的Node.js工具，可帮助您在HTML页面中提取并插入关键路径CSS。 您可以从npm安装它：

npm install -g critical
critical test/fixture/index.html --base test/fixture > critical.css

Critical can be used as a CLI tool or can be integrated with build systems such as Gulp.

Critical可以用作CLI工具，也可以与Gulp等构建系统集成。

12. 优化js (12. Optimize-js)

You can use Optimize-js to optimize JavaScript code for faster initial load by wrapping immediately-invoked functions in parentheses.

通过将立即调用的函数包装在括号中，可以使用Optimize-js优化JavaScript代码以加快初始加载速度。

This tool can be installed from npm:

可以从npm安装此工具：

npm install -g optimize-js

You can then use it via your CLI:

然后，您可以通过CLI使用它：

optimize-js input.js > output.js

13.图像优化工具 (13. Image Optimization Tools)

图像优化 (ImageOptim)

ImageOptim is a free and open-source app for Mac that optimizes images for size. It’s also available as a paid online service.

ImageOptim是Mac的免费开源软件，可优化图像大小。 也可以通过付费在线服务获得 。

Image source: imageoptim.com

图片来源：imageoptim.com

Pngcrush (Pngcrush)

Pngcrush is a free and open-source PNG optimizer available for Windows and Linux.

Pngcrush是可用于Windows和Linux的免费开源PNG优化器。

图像 (Trimage)

Trimage is a cross-platform and free tool for losslessly optimizing PNG and JPG files.

Trimage是一个跨平台的免费工具，可用于无损优化PNG和JPG文件。

Image source: trimage.org/

图片来源：trimage.org/

服务器端性能工具 (Server-side Performance Tools)

14. Apachetop (14. Apachetop)

Apachetop is a tool inspired by top and based on mytop which can be used to monitor the performance of your Apache web server. It can be used to display current numbers of writes, reads and requests processed.

Apachetop是受top启发并基于mytop的工具，可用于监视Apache Web服务器的性能。 它可以用于显示当前的写入，读取和已处理请求的数量。

For Debian-based systems you can install apachetop with apt:

对于基于Debian的系统，您可以使用apt安装apachetop：

sudo apt-get install apachetop

For Red Hat and CentOS-based systems, enable EPEL repository in order to install apachetop, then use yum package manager:

对于基于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

You can then use it by providing the log file of your Apache server:

然后，您可以通过提供Apache服务器的日志文件来使用它：

apachetop -f /var/log/apache2/access.log

Make sure you have the permission to read the log file.

确保您具有读取日志文件的权限。

15. Ngxtop (15. Ngxtop)

Ngxtop is a top-like tool, based on Python, that parses your Nginx server access log and outputs important metrics such as active request, total requests by status code, top remote IPs and average bytes sent in real time. Ngxtop can also be used to parse Apache access log.

Ngxtop是一个基于Python的类似top的工具，它可以分析您的Nginx服务器访问日志并输出重要指标，例如活动请求，状态码总数，实时远程IP和平均发送的字节数。 Ngxtop也可以用于解析Apache访问日志。

Here an example default output from Ngxtop:

这是Ngxtop的默认输出示例：

Make sure you have Python and PIP package manager installed on your system, then run the following to install Ngxtop:

确保在系统上安装了Python和PIP软件包管理器，然后运行以下命令以安装Ngxtop：

pip install ngxtop
ngxtop -h

You can also check out these similar tools:

您还可以查看以下类似工具：

• Ngx-top: an alternative to Ngxtop built using Haskell.

  Ngx-top ：使用Haskell构建的Ngxtop的替代方案。

• Luameter: a commercial Lua module for Nginx that provides key performance metrics for monitoring Nginx in real time.

  Luameter ：用于Nginx的商业Lua模块，提供了用于实时监视Nginx的关键性能指标。

16. 正常运行时间 (16. uptime-cli)

Uptime-cli is a CLI tool for monitoring your website’s uptime with the Uptime Robot API.

Uptime-cli是一个CLI工具，用于使用Uptime Robot API监视网站的正常运行时间 。

You can install the tool from npm:

您可以从npm安装该工具：

npm install -g uptime-cli

SQL性能工具 (SQL Performance Tools)

17. 调谐底漆 (17. Tuning-primer)

Tuning-primer is a modern MySQL performance tuning Bash script for MySQL version 5.5 or above.

Tuning-primer是适用于MySQL 5.5或更高版本的现代MySQL性能调整Bash脚本。

It’s based on the MySQL performance tuning primer script version 1.6-r1.

它基于MySQL性能调整入门脚本版本1.6-r1 。

wget https://github.com/RootService/tuning-primer/blob/master/tuning-primer.sh
chmod +x tuning-primer.sh

18. MySQLTuner (18. MySQLTuner)

MySQLTuner is a script written in Perl that analyzes your MySQL server performance, then shows you recommendations based on the information it finds. These recommendations are simply the tuning of the configuration variables (found in /etc/mysql/my.cnf file) to make MySQL’s server work more efficiently.

MySQLTuner是用Perl编写的脚本，它可以分析MySQL服务器的性能，然后根据发现的信息向您显示建议。 这些建议只是调整配置变量(位于/etc/mysql/my.cnf文件中)，以使MySQL的服务器更有效地工作。

You can grab the MySQLTuner script from mysqltuner.com using a tool like wget:

您可以使用wget类的工具从mysqltuner.com获取MySQLTuner脚本：

wget http://mysqltuner.com/mysqltuner.pl
chmod +x mysqltuner.pl
./mysqltuner.pl --help

19. Mytop (19. Mytop)

Mytop is a top-like CLI tool for displaying MySQL server performance by connecting to the server and periodically running both show processlist and show status commands. It then summarizes the information.

Mytop是一种类似top的CLI工具，用于通过连接到服务器并定期运行show processlist和show status命令来显示MySQL服务器的性能。 然后总结信息。

For Debian-based systems, you can use apt-get to install mytop:

对于基于Debian的系统，可以使用apt-get安装mytop：

sudo yum -y install epel-release
sudo yum clean all
sudo yum -y update
sudo apt-get install mytop

For Red Hat and Centos-based systems, enable EPEL repository in order to install Mytop, then use yum package manager:

对于基于Red Hat和Centos的系统，启用EPEL存储库以安装Mytop，然后使用yum软件包管理器：

sudo yum install mytop

20. SQLBenchmarkPro (20. SQLBenchmarkPro)

SQLBenchmarkPro is a free cloud service that can remotely monitor your database and SQL Servers for small and big businesses. It works by installing an SQLBenchmarkPro agent locally, which continuously monitors the performance and health of your servers.

SQLBenchmarkPro是一项免费的云服务，可以为小型企业和大型企业远程监视您的数据库和SQL Server。 它通过在本地安装SQLBenchmarkPro代理来工作，该代理可连续监视服务器的性能和运行状况。

Image source

图片来源

负载测试工具 (Load Testing Tools)

21. Apache JMeter (21. Apache JMeter)

Apache JMeter is an open-source tool built with Java by Stefano Mazzocchi of the Apache Software Foundation. It can be used for load testing and for performance measurements.

Apache JMeter是由Apache Software Foundation的Stefano Mazzocchi用Java构建的开源工具。 它可以用于负载测试和性能测量。

Since JMeter is built with Java, it’s available under all major platforms such as Windows, Linux and macOS.

由于JMeter是使用Java构建的，因此可以在所有主要平台(例如Windows，Linux和macOS)上使用。

Make sure you have Java installed, then head over to this page to download JMeter. You can then start JMeter, either in GUI mode, server mode or command-line mode from different scripts in the bin folder.

确保已安装Java，然后转到此页面下载JMeter。 然后，您可以从bin文件夹中的不同脚本以GUI模式，服务器模式或命令行模式启动JMeter。

22. 磨床 (22. Grinder)

Grinder is a load testing framework built using Java that can be used to run distributed load testings with many load injector machines. It’s an open-source tool available a BSD-style license.

Grinder是使用Java构建的负载测试框架，可用于在许多负载注入器机器上运行分布式负载测试。 这是一个开放源代码工具，可以使用BSD样式的许可证 。

You can use Grinder to load test anything from HTTP servers to SOAP services and REST APIs, but also application servers of CORBA, RMI, JMS and EJBs etc.

您可以使用Grinder进行负载测试，从HTTP服务器到SOAP服务和REST API，还可以对CORBA，RMI，JMS和EJB等应用程序服务器进行负载测试。

You can flexibly write scripts for the Grinder framework using powerful scripting languages such as Jython and Closure. Find more information from the official SourceForge page.

您可以使用功能强大的脚本语言(如Jython和Closure)为Grinder框架灵活地编写脚本。 在SourceForge官方页面上找到更多信息。

Grinder is available for free download from SourceForge.net.

可以从SourceForge.net免费下载Grinder。

23. 加特林 (23. Gatling)

Gatling is a load testing tool that you can use to load test your web application by simulating thousands of requests per second using a few machines.

Gatling是一种负载测试工具，可用于通过使用几台计算机每秒模拟数千个请求来对Web应用程序进行负载测试。

Gatling can be scripted using the Scala language and a simple DSL language that can cover most of your needs.

加特林可以使用Scala语言和可以满足您大多数需求的简单DSL语言编写脚本。

Image source: gatling.io

图片来源：gatling.io

You can download Gatling from the official Gatling website, then simply unzip the bundle and run the tool from the various scripts in the bin folder.

您可以从官方的Gatling网站下载Gatling，然后只需解压缩捆绑包并从bin文件夹中的各种脚本运行该工具。

结语 (Wrap Up)

This list is far from complete, so if you have any preferred tool(s) for analyzing or tuning the performance of your web applications, ping me on Twitter!

该列表远非完整，因此，如果您有任何首选的工具来分析或调整Web应用程序的性能，请在Twitter上 ping我！

翻译自: https://www.sitepoint.com/23-development-tools-boosting-website-performance/