目录

HTML
CSS
Fonts
Images
JavaScript
Server (梳理中)
JS Frameworks (梳理中)

概述

性能是一个很大的主题，但它并不总是一个“后端”或“管理（admin）”所要考虑的主题：它也是一个前端需要考虑的。作为前端开发人员，前端性能清单是你在项目中应该检查或者至少需要注意的性能要点的详尽列表。

如何使用?

对于每个规则，将有一个段落解释为什么此规则很重要以及如何解决它。有关更深入的信息，可相应找到可指向的 🛠工具， 📖文章或 📹媒体的链接，以便梳理。

前端性能清单中的所有项目都是获得最高性能得分的基本要素，但是你可以找到一些指标来帮助你最终确定一些规则的优先顺序。以下有3个级别的优先级：

表示该项目的优先级较低，对项目有影响。
表示该项目具有中等优先级并对项目产生影响，开发时需要处理这些项目。
表示该项目具有高优先级并对项目产生影响，开发时必须要处理这些项目，不然性能将大打折扣。

性能测试工具

以下是一些您可以用来测试或监控您的网站或应用程序的工具：

🛠 WebPagetest - Website Performance and Optimization Test
🛠 ☆ Dareboost: Website Speed Test and Website Analysis (use the coupon WPCDD20 for -20%)
🛠 GTmetrix | Website Speed and Performance Optimization
🛠 PageSpeed Insights
🛠 Pingdom Website Speed Test
📖 Pagespeed - The tool and optimization guide
📖 Make the Web Faster | Google Developers
🛠 Sitespeed.io - Welcome to the wonderful world of Web Performance
🛠 Calibre

参考

HTML

压缩 HTML: HTML代码压缩，将注释、空格和新行从生产文件中删除。

为什么：

删除所有不必要的空格、注释和中断行将减少HTML的大小，加快网站的页面加载时间，并显着减轻用户的下载时间。

怎么做：

大多数框架都有插件来促进网页的缩小。你可以使用一组可以自动完成工作的NPM模块。
- 🛠 HTML minifier | Minify Code
- 📖 Experimenting with HTML minifier — Perfection Kills
删除不必要的注释： 确保从您的网页中删除注释。

为什么：

注释对用户来说是没有用的，应该从生产环境文件中删除。可能需要保留注释的一种情况是：保留远端代码库（keep the origin for a library）。

怎么做：

大多数情况下，可以使用HTML minify插件删除注释。

🛠 remove-html-comments - npm

删除不必要的属性： 像 type="text/javascript" or type="text/css" 这样的属性应该被移除。
```

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


<script>
    // Javascript code
</script>
```
为什么

类型属性不是必需的，因为HTML5把text/css和text/javascript作为默认值。没用的代码应在网站或应用程序中删除，因为它们会使网页体积增大。

怎么做：

⁃ 确保所有和<script>标记都没有任何type属性。
- 📖 The Script Tag | CSS-Tricks
在JavaScript引用之前引用CSS标记： 确保在使用JavaScript代码之前加载CSS。
```

<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可以实现更好的并行下载，从而加快浏览器的渲染速度。

怎么做：

确保中的和<style>始终位于<script>之前。
- 📖 合理安排styles和scripts来提高网页速度
最小化iframe的数量： 仅在没有任何其他技术可能性时才使用iframe。尽量避免使用iframe。

⬆ 返回顶部

CSS

压缩: 所有CSS文件都需要被压缩，从生产文件中删除注释，空格和空行。

为什么：

缩小CSS文件时，内容加载速度更快，并且将更少的数据发送到客户端，所以在生产中缩小CSS文件是非常重要，这对用户是有益的就像任何企业想要降低带宽成本和降低资源。

怎么做：

使用工具在构建或部署之前自动压缩文件。
- 🛠 cssnano: 基于PostCSS生态系统的模块化压缩工具。
- 🛠 @neutrinojs/style-minify - npm
Concatenation: CCSS文件合并（对于HTTP/2效果不是很大）。
```

<script src="foo.css"></script>
<script src="ajax.css"></script>


<script src="combined.css"></script>
```
为什么：

如果你还在使用HTTP/1就可能需要合并文件，如果服务器使用是HTTP/2效果还有待检测。

怎么做：

在构建或部署之前使用在线工具或者其他插件来合并文件。当然要在确保合并文件不会破坏项目正常运行。
- 📖 HTTP: 优化应用程序交付 - 高性能浏览器网络 (O'Reilly)
- 📖 HTTP/2时代的性能最佳实践
非阻塞： 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文件。

怎么做：

需要添加rel属性并赋值preload，并在<link>元素上添加as =“style”。
CSS类(class)的长度: class的长度会对HTML和CSS文件产生（轻微）影响。

*为即使是性能影响也是有争议的，对项目的命名策略做出决定会对样式表的可维护性产生重大影响。如果使用BEM，在某些情况下可能会遇到比所需字符多的类。明智地选择名字和命名空间总是很重要的。

怎么做：

组件化有助于减少类的数量（和声明）以及类的长度。
- 🛠 long vs short class · jsPerf
不用的CSS: 删除未使用的CSS选择器。

为什么：

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

怎么做：

⚠️ 检查要使用的CSS框架是否已包含重置/规范化代码。有时可能不需要用到重置/规范化文件中的内容。
- 🛠 UnCSS Online
- 🛠 PurifyCSS
- 🛠 PurgeCSS
- 🛠 Chrome DevTools Coverage

关键CSS（Critical）: 关键CSS (或者在页面上方"or above the fold") 包含页面中可见部分的CSS。在其他CSS引用之前引用，在<style> </style>之间嵌入一行（尽可能压缩后引用）。

为什么：

内联关键CSS有助于加速网页的呈现，减少对服务器的请求数量。

怎么做：

使用在线工具或使用Addy Osmani开发的插件生成关键CSS。
- 📖 理解关键CSS
- 🛠 Critical by Addy Osmani on GitHub automates this.
- 📖 Inlining critical CSS for better web performance | Go Make Things
- 📖 Critical Path CSS Generator - Prioritize above the fold content :: SiteLocity

嵌入或内联CSS： 避免在中使用嵌入或内联CSS*（对HTTP/2无效）*

为什么：

因为将内容与设计分开是一种很好的做法。它还可以提高代码的可维护性并使站点可访问性更强。对于性能来说，它只是因为减少了HTML页面的文件大小和加载时间。

怎么做：

始终使用外部样式表或在中嵌入CSS（并遵循其他CSS性能规则）。
- 📖 Observe CSS Best Practices: Avoid CSS Inline Styles
分析样式表的复杂性： 分析样式表有助于标记问题、冗余和重复的CSS选择器。

为什么：

有时在CSS中会出现冗余或验证错误，分析CSS文件并删除这些复杂性的代码可以加速CSS文件的读取和加载（因为您的浏览器会更快地读取它们）

怎么做：

CSS需要有编写规范，再通过CSS预处理器处理。下面列出的一些在线工具也可以帮助你分析和更正你的代码。

⬆ 返回顶部

字体

📖 A Book Apart, Webfont Handbook

Webfont格式： 使用WOFF2格式字体。

为什么：

根据Google的说法，WOFF 2.0 Web字体压缩格式比WOFF 1.0高30％的平均增益。一个较好的做法是使用WOFF 2.0作为主要字体，WOFF 1.0和TTF格式字体作为备选。

怎么做：

在购买新字体之前应先检查提供商是否提供了WOFF2格式。如果使用的是免费字体，则可以始终使用Font Squirrel生成所需格式的字体。
使用preconnect可以更快地加载字体：
```
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
```
为什么：

当你浏览网站时，设备需要获取网站所在的位置以及需要连接的服务器。浏览器必须连接DNS服务器并等待查找完成后再获取资源（字体，CSS文件...），prefetche和preconnect允许浏览器在空闲时进行上面的操作，在真实请求时就不需要再花时间去做一系列动作。

怎么做：

在预取您的网络字体之前，请使用网页测试来检测网站. 查找蓝绿色DNS查找并记下正在请求的主机（Look for teal colored DNS lookups and note the host that are being requested.）在中添加预取的webfonts，添加上一步查找到的主机名。
Webfont大小： Webfont尺寸不超过300kb（包括所有变体）

📖 Font Bytes - Page Weight

⬆ 返回顶部

图片

📖 Image Bytes in 2018
图像优化: 图像经过优化，保证压缩后的图片符合产品要求。

为什么：

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

怎么做：

尽可能尝试使用CSS3效果（而不是用小图像替代）尽可能使用字体图片使用 SVG 使用编译工具并指定85以下的级别压缩。
- 📖 Image Optimization | Web Fundamentals | Google Developers
- 🛠 TinyJPG – Compress JPEG images intelligently
图像格式： 适当选择图像格式。

为什么：

为确保图片不会减慢网站速度

怎么做：

使用Lighthouse识别哪些图像可以使用下一代图片格式（如JPEG 2000m JPEG XR或WebP）。比较不同的格式，有时使用PNG8比PNG16好，有时候不是。

使用矢量图像 VS 栅格/位图： 推荐使用矢量图像而不是位图图像（when possible）。

为什么：

矢量图像（SVG）往往比图像小，具有响应性和完美缩放功能。而且这些图像可以通过CSS进行动画和修改操作。

图像尺寸： 如果已知最终渲染图像大小，请在上设置宽度和高度属性。

为什么：

如果设置了高度和宽度，则在加载页面时会保留图像所需的空间。如果没有这些属性，浏览器就不知道图像的大小，也无法为其保留适当的空间，导致页面布局在加载期间发生变化。
避免使用Base64图像： 你可以将微小图像转换为base64，但实际上并不是最佳实践。
懒加载： 图像懒加载（始终提供noscript作为后备‘A noscript fallback is always provided’）。

为什么：

它能改善当前页面的响应时间，避免加载一些用户可能不需要或不必要的图像。

怎么做：

使用Lighthouse可以识别屏幕外的图像数量。使用懒加载图像的JavaScript插件。
响应式图像： 确保提供接近设备显示尺寸的图像。

为什么：

小型设备不需要比视口大的图像。建议在不同尺寸上使用一个图像的多个版本。

怎么做：

为要不同的设备创建不同大小的图像。使用srcset和picture为每个图像提供多种变体（variants）。
- 📖 Responsive images - Learn web development | MDN

⬆ 返回顶部

JavaScript

JS 压缩: 所有JavaScript文件都要被缩小，注释、空格和空行将从生产文件中删除（在HTTP/2仍然有效果）。

为什么：

删除所有不必要的空格、注释和空行将减少JavaScript文件的大小，并加快网站的页面加载时间，提升用户体验。

怎么做：

建议使用下面的工具在构建或部署之前自动缩小文件。
- 📖 uglify-js - npm
- 📖 Short read: How is HTTP/2 different? Should we still minify and concatenate?

不内嵌JavaScript: (仅对网站有效) 避免在body中间嵌入多个JavaScript代码，将JavaScript代码重新集中到外部文件中，放在或页面末尾（之前）。

为什么：

将JavaScript嵌入代码直接放在中可能会降低页面速度，因为它在构建DOM时会加载。最好的选择是使用async 或 defer的外部文件来避免阻塞DOM渲染。另一种选择是在中放置一些脚本。大多数时候需要在DOM进入主处理之前加载的分析代码或小脚本。

怎么做：

确保使用async或defer加载所有script文件，并准确的在中加载代码。
- 📖 优化JavaScript并提高网站加载速度的11个技巧
非阻塞JavaScript： 使用defer属性或使用async来异步加载JavaScript文件。
```

<script defer src="foo.js">


<script async src="foo.js">
```
为什么：

JavaScript阻止HTML文档的正常解析，因此当解析器到达<script>标记时（特别是在内），它会停止解析并且执行脚本。如果您的脚本位于页面顶部，则强烈建议添加async和defer，但如果在标记之前加载，没有太大影响。但是，使用这些属性来避免性能问题是一种很好的做法。

怎么做：

添加async（如果脚本不依赖于其他脚本）或defer（如果脚本依赖或依赖于异步脚本）作为script脚本标记的属性。如果有小脚本，可以在异步脚本上方使用内联脚本。
- 📖 Remove Render-Blocking JavaScript
优化和更新的JS库： 项目中使用的所有JavaScript库都是有用到的 (推荐Vanilla Javascript的简单功能)并更新到最新版本

为什么：

大多数情况下，新版本都带有优化和安全性修复，所以应该使用最优化的代码来优化项目。确保不存在过时插件。

怎么做：

如果项目使用NPM管理依赖包，npm-check是一个非常有用的库来升级/更新你的库。
- 📖 You may not need jQuery
- 📖 Vanilla JavaScript for building powerful web applications

检查依赖项大小限制： 确保使用最优的外部库，大多数情况下，可以使用更轻的库来实现相同的功能。

为什么：

你可能想使用npm中745 000个包中的一个，但你需要选择最适合项目需求的包。例如，MomentJS是一个很棒的库，但是你可能永远不会使用其中的很多方法，这就是为什么创建Day.js的原因。瞬间大小从16.4kB到2kB。

怎么做：

始终比较并选择最适合您需求的轻型库。您还可以使用npm trends等工具来比较NPM包下载次数或Bundlephobia以了解依赖项的大小。
JavaScript 分析: 检查JavaScript文件（以及CSS）中的性能问题。

为什么：

JavaScript复杂性可能会降低运行时性能。识别这些可能的问题对提供流畅的用户体验来说至关重要。

怎么做：

使用Chrome开发者工具中的时间轴工具来评估脚本事件，并找到可能需要花费太多时间的事件。

⬆ 返回顶部

Server

页面大小 < 1500 KB: (理想情况 < 500 KB) 尽可能减少页面和资源的大小。

为什么：

理想情况下，应该尝试让页面大小<500 KB，但Web页面大小中位数大约为1500 KB（即使在移动设备上）。根据你的目标用户、连接速度、设备，尽可能减少页面大小以尽可能获得最佳用户体验非常重要。

怎么做：

前端性能清单中的所有规则将帮助你尽可能地减少资源和代码。
- 📖 Page Weight
- 🛠 What Does My Site Cost?
页面加载时间 < 3秒： 尽可能减少页面加载时间，以便快速将内容传递给用户。

为什么：

网站或应用程序速度越快，反弹增加的可能性越小，换句话说，失去用户或未来客户的机会就越少。Google对该主题的充分研究证明了这一点。

怎么做：

使用Page Speed Insight或WebPageTest等在线工具分析可能会降低速度的工具，并使用前端性能清单来缩短加载时间。
TTFB < 1.3 seconds: 尽可能减少浏览器在接收数据之前等待的时间。
- 📖 什么是DevTools中的TTFB，以及如何处理它
- 📖 Monitoring your servers with free tools is easy

Cookie 大小: 如果您使用cookie，请确保每个cookie不超过4096字节，并且一个的域名下不超过20个cookie。

为什么：

cookie存在于HTTP头中，在Web服务器和浏览器之间交换。保持cookie的大小尽可能低是非常重要的，以尽量减少对用户响应时间的影响。

怎么做：

消除不必要的cookie