提高 Web 应用程序性能的权威指南

2009 年 11 月 3 日

一份能够提高你的速度和效率的工具和资源列表。

如果你的网站不能在 3 秒内加载，谷歌会将它标记为慢。这样想就很恐怖，因为现在很多网站事实上都很慢。人类正着手登陆火星，而地球上的网站却还在以糟糕的方式构建和维护，从而导致互联网上到处都是反应迟缓的网站。除非你正在构建一个渐进式 Web 应用程序，否则很大可能你的网站会被认为很慢。

因此，解决方案很简单：不要构建一个网站，而是构建一个渐进式 Web 应用程序！

这样做，你就成功了一半。剩下的一半，你需要指南和工具。当我在 Hyperware 坚持构建高质量、快速的 Web 应用程序的过程中，我学到了一件事：如果你在互联网上寻找建议和工具，网上比比皆是，但是只有很少一部分对完成工作有所帮助。而找到这些对你有帮助的建议和工具是一份艰巨的任务。

本文将介绍我个人认为有用，并且尝试和测试过的工具和优化方法，以及一些我在为企业构建渐进式 Web 应用程序时仍会参考的有用文章。

当你聚焦于某事时，继续寻找东西是很痛苦的。因此，我为你们做了这个脏活，写了这篇值得收藏的文章。

这些很棒的工具的用途是：

优化或压缩图片

Squoosh 是我用过的最棒的优化工具。我真希望早点发现这个工具。Squoosh 是由谷歌工程师构建的，其中最棒的是，你在调整质量参数的时候可以实时看到优化过的图片和没有优化过的图片的差异。Squoosh 很好用，能让你清楚知道压缩后的图片是什么样子。

ImageOptim 是一个简单易用的图片优化器。它会自动缩减图片尺寸而不会丢失图片的原始质量。ImageOptim 有一个友好的拖拽界面和多文件上传选项，因此非常易用。由于 ImageOptim 只在 Mac 上可用， FileOptimmizer 对于 Windows 用户是一个不错的选择。

网站性能测分工具并不仅仅是提供 100 分能得几分的数字——他们应该用来反复寻找和修复你的网站中薄弱的部分。

没有其他工具比 Lighthouse 更了解网站性能的了。性能上 90+ 的得分对于 Web 应用程序来说是一个绝对的基准。我强烈建议你读一读《Lighthouse | Tools for Web Developers | Google Developers》来更好地了解谷歌的 Lighthouse。

专业建议：使用 Lighthouse chrome 扩展来更快地审核任何页面。

GTmmetrix 可能是你除了 Lighthouse 外唯一需要的工具，来进一步检查你的网站是否还有需要修复的地方。它显示了相关机会来提高页面速度以及页面加载时间和页面大小。

总是在.js 文件前面引用 CSS 文件。
在 HTML 文件中少用和，除非你有一个关键的请求需要提前加载。
对于需要频繁更新的应用程序来说，拆分打包文件比较好。对于小型应用程序，最好打包成一个.js 文件和.css 文件，这样会减少 HTTP 请求的数量。
使用 Pagespeed 模块。 PageSpeed 模块是开源的服务器模块，可以自动优化网站。静态托管用户可以将如下代码加到他们的.htaccess 文件中来启用 PageSpeed 模块。

压缩.js 和.css 文件。这种用途的在线工具有很多（例如， minifier ）。如果你使用 Webpack，那么你的文件会在生产构建时被自动压缩！
如果你使用 Webpack 作为模块打包器，使用 UglifyJs 、 ModuleConcatenate 和 Splitchunks 等 Webpack 优化插件。
使用 Webpack Bundle Analyzer 插件来了解你的应用程序在生产构建时每个占用了多少空间。减少在你的打包文件中占用大量空间的没有用到的或很少用到的模块。

如果有工具来为你做这些脏活儿就好了。这就是为什么开发者喜欢 Webpack 的原因，也是他们不了解 Webpack 是如何工作的原因之一！

下面的内容将深入探讨性能优化。你将了解网站速度的方式、内容和原因。通过这些内容，你可以花一点儿时间来学习关于浏览器渲染和网站速度的基础知识。

我相信所有上述信息都将为你在提升 Web 应用程序性能方面提供很大帮助。由于互联网的信息变化很快，一旦我遇到其它有用的东西，我将持续更新本文。敬请期待！

作者介绍：

Swanand Kadam 是 HyperwareX.com 的创始人，关注渐进式 Web 应用程序、机器学习和员工激励。

原文链接：