【译】前端性能优化清单-CSDN博客

本文翻译自thedaviddias总结的Front-End-Performance-Checklist

HTML

压缩HTML: 生产环境上的HTML代码应该是压缩的，注释、空格、新行需要被移除。

原因：

移除不必要的空格、注释和新行可以减少html的文件大小并且加快你的网站加载时间，减少了用户的下载流量。

做法：

大多数开发框架都有压缩网页的插件。你可以使用一系列的NPM模块来自动为你完成这项工作。

删除不需要的注释: 确保注释从页面中移除。

原因：

注释对用户并没有用，应该从生产文件中删除。一种需要保留注释的情景是你引用别人库的原始文件。

做法：

大多数时候，注释会被HTML压缩插件移除。
删除不需要的属性: 类型属性比如type="text/javascript"或者type="text/css"不再是必须的，应当被移除。
```

<script type="text/javascript">
    // JavaScript code
</script>


<script>
    // JavaScript code
</script>
复制代码
```
原因：

因为HTML5中将text/css和text/javascript作为默认的属性值，所以不再需要写类型属性。

做法：

⁃ 确保你的<link>和<script>标签没有任何的type属性。
- The Script Tag | CSS-Tricks
总是将CSS标签放在JavaScript前面: 确保CSS总是在JavaScript代码前加载。
```

<script src="jquery.js"></script>
<script src="foo.js"></script>
<link rel="stylesheet" href="foo.css"/>


<link rel="stylesheet" href="foo.css"/>
<script src="jquery.js"></script>
<script src="foo.js"></script>
复制代码
```
原因：

在JavaScript前引用CSS可以实现更好的并行下载，从而加快浏览器呈现时间

做法：

⁃ 确保<head>中的<link>和<style>总是在<script>前。
- Ordering your styles and scripts for pagespeed
减少iframes的数量: 只有在任何其他技术实现不了的情况下才使用iframes。尽可能避免使用iframes。

CSS

压缩: 生产环境上的CSS文件应该是压缩的，注释、空格、新行需要被移除。

原因：

当CSS文件压缩过后，内容会加载的更快，发送给客户端的数据也将减少。在生产环境中压缩CSS文件很重要。这对用户和希望降低带宽成本和资源使用量的企业都很有利。

做法：

⁃ 在构建或部署之前或期间，使用工具自动压缩文件。
合并文件: 将CSS文件写在一个文件中（并不总对HTTP/2有效）。
```

<link rel="stylesheet" href="foo.css"/>
<link rel="stylesheet" href="bar.css"/>


<link rel="stylesheet" href="foobar.css"/>
复制代码
```
原因：

如果你仍在使用HTTP/1，你可能还需要合并文件。如果你的服务器使用HTTP/2 (还在进行测试)，情况就不太一样了。

做法：

⁃ 在构建或部署之前或期间，使用在线工具或任何插件将CSS合并起来。 ⁃ 当然，确保合并不会破坏你的项目。
- HTTP: Optimizing Application Delivery - High Performance Browser Networking (O'Reilly)
- Performance Best Practices in the HTTP/2 Era
非阻塞: CSS文件需要非阻塞引入，阻止DOM加载时间过长。
```
<link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'">
<noscript>
    <link rel="stylesheet" href="global.min.css">
</noscript>
复制代码
```
原因：

CSS文件会阻止页面加载并延迟页面的呈现。使用preload可以在浏览器开始显示页面内容之前就加载CSS文件。

做法：

⁃ 你需要在link标签中添加rel属性值为preload以及as="style"
CSS类名长度: 类名的长度可能会对HTML和CSS文件产生(轻微)影响。

原因：

对于你的项目采用何种命名策略将会对样式表的可维护性产生重大影响，甚至性能影响。不过它也是有争议的。如果你使用的是BEM命名方式，在某些情况下可能会遇到命名的长度字符多余实际所需的类名。因此，明智的选择CSS类名和命名空间是很重要的。

做法：

对一些人来说，设定最大的类长度可能很有趣，但是需要确保分解成组件的网站可以减少类（和声明）的数量和长度。
- long vs short class · jsPerf
没有用到的CSS: 移除没有用到的CSS选择器。

原因：

删除未使用的CSS选择器可以减少文件大小，加快资源的加载速度。

做法：

⁃ 始终检查你使用的CSS框架是否已经包含了重置/normalize的代码。有时你可能不需要重置/normalize文件中的所有内容。
关键CSS: 关键CSS包括了用来渲染页面可见部分的样式。它嵌入在你的主CSS调用之前，位于<style></style>之间，排成一行（如果可以的话进行压缩）。

原因：

内联关键的CSS样式能够帮助加快页面的渲染并且减少服务器请求数量。

做法：

使用在线工具或使用类似Addy Osmani开发的插件生成关键CSS。
嵌入或行内CSS: 避免在body中使用嵌入或者行内CSS。（http/2可以忽略）

原因：

将内容与样式分开是一个很好的做法，它使得代码更易于维护，并且保持站点的可访问性，这是原因之一。但是对于性能而言，它减少了HTML页面的文件大小和加载时间，这是第二个原因。

做法：

总是使用外部样式表或者将CSS内嵌在<head>中（并遵循其他的CSS性能优化规则）
- bserve CSS Best Practices: Avoid CSS Inline Styles
分析样式表: 分析样式表可以帮助你标记有问题、冗余和重复的CSS选择器。

原因：

有时你的CSS文件中可能有冗余或验证错误，分析你的CSS文件并消除这些问题可以帮助你加快CSS文件的速度(因为你的浏览器会更快地阅读它们)

做法：

你的CSS应该是有条理的，使用CSS预处理器可以帮助你做到这一点。下面列出的一些在线工具也可以帮助你分析和更正代码。

Fonts

Webfont格式: 你应该使用WOFF2格式的字体在你的web项目或应用里。

原因：

根据谷歌的测试，WOFF2字体压缩率比WOFF1平均增加了30%。使用WOFF2、WOFF1格式的字体替代TTF格式是很好的。

做法：

购买新字体之前，请检查提供商是否为提供了woff2格式。如果你使用的是免费字体，你可以使用Font squirrer来生成你需要的所有格式。
使用preconnect更快的加载字体: 你应该使用WOFF2格式的字体在你的web项目或应用里。
```
<link rel="preconnect" href="//fonts.gstatic.com" crossorigin>
复制代码
```
原因：

当你访问网站时，你的设备需要知道你的网站服务器在哪里。浏览器必须连接DNS服务器，等待查找完成，然后才能获取资源(字体、CSS文件...)。预获取和预连接允许浏览器提前查找DNS信息，并建立到托管字体文件的服务器的TCP连接。这样就使得性能有所提升，因为当浏览器开始解析带有字体信息的CSS文件并发现它需要向服务器请求字体文件时，已经预先解析了DNS信息并在连接池中打开了到服务器的连接。

做法：

⁃ 在预取你的网页字体之前，使用webpagetest来评估你的网站 ⁃ 寻找蓝绿色(直译，应该和蓝绿色部署有关)的DNS服务器，并记下被请求的主机名 ⁃ 在head中预读取字体文件，另外字体的托管主机名也应该放到预加载（prefetch）列表里
字体大小: 网络字体大小不超过300kb（包括所有变体）
- Font Bytes - Page Weight
防止闪烁或不可见的文字: 在加载Webfont之前，避免透明文本
- font-display for the Masses
- CSS font-display: The Future of Font Rendering on the Web

Image

图片优化: 你的图片应该经过优化、压缩，不会直接影响终端用户。

原因：

优化后的图片在浏览器中加载速度更快，消耗的数据也更少。

做法：

⁃ 尽可能尝试使用CSS3效果(而不是小图片) ⁃ 如果可能，使用字体代替图片中编码的文本 ⁃ 使用SVG ⁃ 使用工具指定85以下的压缩级别
图片格式: 选择合适的图像格式。

原因：

为了确保你的图片不会减慢你的网站加载速度，选择与你图片相对应的格式。如果是照片，JPEG通常比PNG或GIF更合适。但是不要忘了看看下一代的图片格式，它可以减少文件的大小。每种图像格式都有优点和缺点，了解这些对于做出最佳选择是很重要的。

做法：

⁃ 使用Lighthouse来识别哪些图像最终可以使用下一代格式(如JPEG 2000m JPEG XR或WebP) ⁃ 比较不同的格式，有时使用png8位比png16位更好，有时不是
使用矢量图像VS光栅/位图: 优选使用矢量图像而不是位图图像(如果可能的情况下)。

原因：

矢量图像(SVG)往往比较小，并且SVG的响应和缩放非常完美。CSS可以对这些图像进行动画制作和修改。
图像尺寸: 如果最终渲染的图像大小是已知的，在<img>上设置width和height。

原因：

如果设置了高度和宽度，则加载页面时会保留图像所需的空间。但是，如果没有这些属性，浏览器不知道图像的大小，也不能为其保留适当的空间。其效果是页面布局会在加载过程中发生变化(当图像加载时)。
避免使用Base64的图像: 你最终可以将微小的图像转换成base64，但这实际上不是最佳实践。
懒加载: 视野外的图片懒加载(不要忘记提供noscript回调)。

原因：

它将提高当前页面的响应时间，然后避免加载用户可能不需要的不必要的图片。

做法：

⁃ 使用Lighthouse来识别视野外有多少图片。 ⁃ 使用下面的JavaScript插件来懒加载你的图片。确保你的目标只是视野外的图像。 ⁃ 还应确保在鼠标悬停或其他操作时显示懒加载的替代图像
响应式图片: 确保提供接近你显示尺寸的图片。

原因：

小型设备不需要比其视口更大的图片。建议使用同一图片不同尺寸的版本。

做法：

⁃ 为目标设备创建不同的图片尺寸。 ⁃ 使用srcset和picture属性设置每个图片的多种形式。
- Responsive images - Learn web development | MDN

JavaScript

JS压缩: 所有JavaScript文件需要压缩，注释、空白和新行从生产文件中删除(如果使用HTTP/2仍然有效)。

原因：

删除所有不必要的空格、注释和分隔符将减少JavaScript文件的大小，加快网站的页面加载时间，并明显减轻用户的下载量。

做法：

⁃ 使用下面建议的工具在构建或部署之前或期间自动压缩文件
不要有内联的JavaScript: (仅适用于网站)避免在body中嵌入多个JavaScript代码。将JavaScript代码重组到外部文件中，或者重组到<head>里或末尾(</body>之前)。

原因：

将JavaScript嵌入代码直接放在<body>中会减慢你的页面速度，因为它是在DOM构建时加载的。最好的选择是为外部文件使用async或defer属性来避免阻塞DOM。另一个选择是在你的<head>放置脚本。在DOM开始渲染之前需要加载好大多数的时间分析代码或小脚本。

做法：

确保使用异步或延迟加载所有文件，并且明智地决选择要注入到<head>中的代码。
- 11 Tips to Optimize JavaScript and Improve Website Loading Speeds
非阻塞JavaScript: JavaScript文件使用async异步加载或使用defer延迟加载。
```

<script defer src="foo.js"></script>


<script async src="foo.js"></script>
复制代码
```
原因：

JavaScript会阻塞HTML的正常解析，因此当解析器到达<script>标签时(特别是在<head>里)，它会停止解析并运行。如果脚本放在页面顶部，强烈建议添加async或defer属性，但是如果脚本就在</body>之前，则没有太大价值。但是，最佳实践是使用这些属性来避免任何性能问题。

做法：

⁃ 在script标签里添加async（如果脚本不依赖其他脚本）或者defer（如果脚本依赖异步脚本或被异步脚本依赖）属性。 ⁃ 如果你有小的脚本，可以以内联的形式卸写在async脚本之前。
- Remove Render-Blocking JavaScript
- Defer loading JavaScript
优化并更新JS库: 项目中使用JavaScript库是有必要的（对于简单的功能，可以使用普通的JavaScript函数），更新它们到最新版本。

原因：

大多数情况下，新版本都附带优化和安全修复。你应该使用最优的代码来加速你的项目，并确保未过时插件不会减慢你的网站或应用程序的速度。

做法：

如果你的项目使用NPM包，npm-check是一个非常有趣的插件来升级/更新你的库。Greenkeeper可以自动查找你的依赖项，并在新版本发布时建议更新。
- You may not need jQuery
- Vanilla JavaScript for building powerful web applications
检查依赖包大小: 明智地使用外部库，在大多数情况下，你可以使用较轻的库来实现相同的功能。

原因：

你可能会想在NPM上找到745000个包中的一个，但是你需要选择最适合你需要的包。例如，MomentJs是一个非常棒的库，但是有很多方法你可能永远不会使用，这就是Day.js创建的原因。它只有2kB，而Moment Gzip后有16.4kB。

做法：

总是比较和选择最适合你需要的更轻的依赖库。你也可以使用npm trends这个工具来比较NPM包下载量，或者Bundlephobia，以了解依赖包的大小
JavaScript分析: 检查JavaScript文件中的性能问题（CSS文件也是）。

原因：

复杂的JavaScript会降低运行性能。认识到这些问题对于流畅的用户体验至关重要。

做法：

使用Chrome Developer工具中的Timeline工具来运行脚本事件，并找到可能花费太多时间的事件。
使用Service Workers: 你可以在你的PWA应用中使用Service Workers来缓存数据或者在不影响应用程序用户体验的情况下执行可能繁重的任务。

Server

为你的网站使用HTTPS:

原因：

HTTPS不仅适用于电商网站，也适用于所有交换数据的网站。用户共享的数据或共享给外部实体的数据。现代的浏览器限制了不安全网站的功能。例如: 如果你的网站不使用HTTPS，将不能使用地理定位、推送通知、service workers。现在，在项目上使用SSL证书比以前容易多了(而且是免费的，感谢 Let's Encrypt)。
页面大小小于1500KB（理想情况小于500KB）: 尽可能缩小页面+资源的大小。

原因：

理想情况下，你应该尝试将页面大小设定在<500KB，但是当下web状态显示页面字节的中位数约为1500KB (甚至在移动设备上)。根据你的目标用户、网络连接、设备，尽可能减少页面字节数以获得最佳用户体验。

做法：

前端性能清单中的所有规则将帮助您尽可能减少资源和代码。
页面加载时间< 3秒: 尽可能减少页面加载时间，以便向用户快速传递内容。

原因：

你的网站或应用程序越快，关闭页面的可能性就越小，换句话说，你失去用户或未来客户的可能性就越小。足够多的研究证明了这一点。

做法：

使用Page Speed Insight或WebPageTest等在线工具来分析哪些因素会减缓你的速度，并使用前端性能清单来改进你的加载时间。
首字节时间（TTFB）< 1.3秒: 尽可能减少浏览器在接收数据之前等待的时间。
Cookie大小: 如果你正在使用cookie，确保每个cookie不超过4096字节，并且你的域名不超过20个cookie。

原因：

cookies在服务器和浏览器之间的HTTP报头中交换。重要的是保持cookies长度尽可能小，以对用户响应时间的影响最小。

做法：

清除不必要的cookies
减少HTTP请求: 始终确保所请求的每一个文件对你的网站或应用都是必不可少的。
- Combine external CSS
- Combine external JavaScript
使用CND: 使用CDN在世界各地更快地传递你的内容。
- 10 Tips to Optimize CDN Performance - CDN Planet
- HTTP Caching | Web Fundamentals | Google Developers
文件来自同一协议: 避免让你的网站文件在开启HTTPS的网站上使用HTTP协议。如果你的网站使用HTTPS，外部文件应该使用同一协议。
页面文件可访问: 避免请求无法访问的文件（404）。
- How to avoid bad requests
正确设置HTTP缓存头: 设置HTTP缓存头以避免浏览器和服务器之间多次请求。
- Using cache-control for browser caching
启用GZIP/Brotli压缩功能: 使用压缩算法，如Gzip或Brotli来减小JavaScript文件的大小。使用较小的文件，用户将能够更快地下载资源，从而提高性能。