性能工具

周末总结时间！从大量的 Grunt 和 Gulp 插件到可以帮助我们用数据可视化网站的 Web 应用，学习性能工具的来龙去脉非常困难。我认为，将我能找到的尽可能多的工具编目可能会有用。

内容分发网络 (CDN)

CDN 将您网站的资源分布在全球各地，以便尽可能快地交付它们，而不管特定用户的地理位置。

CloudFlare

CloudFlare 通过充当您的 DNS 服务器来发挥其全部魔力（CDN 只是其中一部分），因此所有对您网站的请求都将通过它们。

CloudFlare 设计其 CDN 时没有考虑过去 15 年的传统。我们的专有技术利用了硬件、Web 服务器技术和网络路由的最新变化。换句话说，我们构建了下一代 CDN。其结果是一个比您之前尝试过的任何传统 CDN 都更容易设置、更经济实惠且性能更好的 CDN。

MaxCDN

CSS-Tricks 使用 MaxCDN 托管我们所有的静态资源。它与 WordPress 和 W3 Total Cache 集成得很好，因此我们实际上没有做任何特殊的事情，资源只是移动到 CDN 并正确链接。

我们的网络既是网站加速器，也是实时控制中心。我们构建它是为了让您的客户和 DevOps 都能从下一代 CDN 中获得最大收益。

CloudFront

Amazon Web Services 版的 CDN。

Amazon CloudFront 是一种内容交付 Web 服务。它与其他 Amazon Web Services 产品集成，为开发人员和企业提供了一种简单的方法，可以将内容以低延迟、高数据传输速度和无需最低使用承诺的方式分发给最终用户。

CDNperf

有些 CDN 不像上面那样托管您自己的任意资源。它们只托管流行的文件，并欢迎您链接到它们。对于生产网站来说，这通常不是一个好主意（您不妨连接您的资源并从您自己的 CDN 服务器），但对于轻松（和快速！）访问这些资源仍然很有用。

CDNperf 为您找到快速可靠的 JavaScript CDN，让您的网站快速流畅！

性能测试

这些服务使用诸如 **首字节时间** 或网站的 **渲染时间** 等指标来评估其性能。有些还会检查特定资源是否已缓存，或者是否存在应连接在一起的多个 CSS 或 JS 文件。

WebPagetest

WebPagetest 堪称性能测试的黄金标准，因为它为您提供了各种有用的指标，例如用于改进的一般得分、用于查看网站加载时何时可见内容的胶片带、在通常不提供此功能的浏览器中的网络瀑布图等等。

使用全球范围内的真实浏览器和消费者连接速度运行免费的网站速度测试，并获得详细的优化建议。

WebPagetest 的服务也以 NPM 模块和命令行工具的形式提供，并带有 API 包装器。

• webpagetest-mapper：将 WebPageTest 结果数据映射到人类可读的文档格式。
• WPT Bulk Tester：使用 Google Docs 使用 WebPageTest 测试多个 URL（如果您有 API 密钥，则可以使用 webpagetest.org，或者使用另一个公开可访问的实例）

Yslow

YSlow 基于雅虎的高性能网站规则，分析网页并找出其加载缓慢的原因。

Google PageSpeed

PageSpeed 工具根据网页最佳实践分析并优化您的网站。

此外，还有一个 CLI 可以访问 带有报告功能的 PageSpeed Insights

使用 Google PageSpeed Insights 对已部署网站进行移动端和桌面端性能测试，并为您的构建过程提供整洁的报告。

What does my site cost?

了解在全球移动网络上使用您的网站的成本。

Pingdom 网站速度测试

输入 URL 以测试该页面的加载时间，对其进行分析并查找瓶颈。

Speedcurve

SpeedCurve 允许您跟踪自己的性能以及竞争对手的性能。使用 SpeedCurve，您可以开始将速度作为您的竞争优势之一。速度对于移动用户尤其重要，他们希望网站在手机上的加载速度比桌面快，并且更容易放弃加载速度过慢的页面。

Calibre

Calibre 跟踪页面加载需要多长时间，以及页面大小的变化。页面卡顿？您会立即知道。

GT Metrix

一项利用 Google PageSpeed 和 YSlow 的服务，帮助您开发更快速、更高效且全面改进的网站体验。

perf.js

在开发工作期间，向页面显示添加性能时序的超简单示例。

perf bar

一种简单的方法来快速收集和查看您的网站性能指标，支持预算设置和添加自定义指标。

grunt-perfbudget

用于性能预算的 Grunt 任务。grunt-perfbudget 使用 WebPagetest 的公共或私有实例来对指定的 URL 执行测试。它将测试结果与您指定的预算进行比较。如果满足预算，则任务成功完成。如果页面超出您的性能预算，则任务失败并告知您原因。

Sitespeed

Sitespeed.io 是一款开源工具，可帮助您根据性能最佳实践和时序指标分析网站速度和性能。它从网站上的多个页面收集数据，使用规则对其进行分析，并将结果输出为 HTML 或将指标发送到 Graphite。

speedgun

此站点允许您将 Speedgun.js 指向任何面向公众的网站以收集重要的网页性能数据。它运行五次，提供了一个 很好的视角 来理解网页是如何加载的。

gulp size

显示项目的大小。

浏览器工具和插件

Chrome 开发者工具

Chrome 的 开发者工具 中有两个非常有用的选项卡用于测量性能：审计 和 网络。

审计面板可以在页面加载时对其进行分析。然后提供建议和优化，以减少页面加载时间并提高感知（和实际）响应能力。

网络面板实时提供对网络上请求和下载的资源的洞察。识别并解决那些花费时间过长的请求是优化页面的重要步骤。

Firefox 开发者版浏览器

Firefox 开发者版是唯一一款专为开发者打造的浏览器，其创建时就考虑到了您的工作流程。构建、测试、扩展等等，所有这些都可以在一个地方完成，这是前所未有的。

访问 Firefox 的 MDN 上的网络监控

页面性能

此扩展程序是一个技巧，它可以在现代 Chrome 浏览器上快速分析页面性能。如果打开了多个选项卡，则扩展程序会自动为活动选项卡上的页面提供性能分析。

审计

PerfAudit

我们审核您网站的页面加载和渲染性能。我们讨厌缓慢且卡顿的网站，我们的使命是帮助网站在毫秒内加载并流畅运行。

Perfmonkey

PerfMonkey 使跟踪您网站的渲染性能变得非常简单。

SVG 和图片

ImageOptim

ImageOptim 是一款免费应用程序，可以使图像占用更少的磁盘空间并更快地加载，而不会牺牲质量。它优化压缩参数，删除垃圾元数据和不必要的颜色配置文件。

也可作为 Grunt 或 Gulp 插件使用。

SVGO

SVG 优化器是一个基于 Nodejs 的工具，用于优化 SVG 矢量图形文件。

如果您需要一个界面而不是 CLI 来执行此操作，则可以下载该应用程序。

SVGOMG

SVGOMG 是 SVGO 缺少的 GUI，旨在公开大多数（如果不是全部）SVGO 的配置选项。

手动优化 SVG

就像它的光栅同类一样，SVG 在用于生产网站之前应该进行优化。有一些很棒的工具可以做到这一点，但正如 Raymond 即将向您展示的那样，最好的结果来自于更深入的理解和一些手动操作。

Trimage

Trimage 是一个跨平台的 GUI 和命令行界面，用于优化网站的图像文件，根据文件类型使用 optipng、pngcrush、advpng 和 jpegoptim（目前支持 PNG 和 JPG 文件）。

CSS

CSS Triggers

一个用于确定哪些 CSS 属性会影响浏览器的布局、绘制和合成操作的网站。

您可以在免费的解释性文章中阅读更多关于 CSS 触发器的信息。

CSS Stats

一个用于可视化 CSS 各种统计信息的 Web 应用程序。

CSS Shrink

CSS 压缩。因为 CSS 位于渲染页面的关键路径上。它必须很小！否则就会出现问题！

uncss

UnCSS 是一种从样式表中删除未使用的 CSS 的工具。它可以在多个文件中工作，并支持 Javascript 注入的 CSS。

可作为Grunt 或Gulp 插件使用。

关键路径

Critical 从 HTML 中提取并内联关键路径（首屏以上）CSS。

标记

HTMLMinifier

HTMLMinifier 是一个高度可配置、经过良好测试的基于 Javascript 的 HTML 压缩器，具有类似 lint 的功能。

gulp-htmlmin

用于压缩 HTML 的 Gulp 插件。

grunt-contrib-htmlmin

压缩 HTML

JavaScript

uglifyjs

JavaScript 解析器、混淆器/压缩器和美化工具包。

也可用作 Gulp 或 Grunt 插件。

你可能不需要 jQuery 插件

jQuery 及其类似库非常棒，如果它们能简化你的应用开发，请务必使用它们。

但是，如果你正在开发一个库，请花点时间考虑你是否真的需要 jQuery 作为依赖项。也许你可以包含几行实用程序代码，并放弃此依赖。如果你只针对较新的浏览器，你可能不需要除了浏览器自带的功能之外的任何东西。

---

更多关于性能的信息

• Usertiming API
• 无卡顿
• 滚动性能
• 移动端网页性能审计
• 60 帧每秒
• Udacity 渲染性能课程