Awesome

<h1 align="center"> <br> <img src="https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/master/images/logo-front-end-performance-checklist.jpg" alt="Front-End Performance Checklist" width="170"> <br> <br> 前端性能清单 <br> </h1> <h4 align="center">🎮 前端性能清单，让你的网站跑的更快</h4> <p align="center">单一原则: "在设计和编写时考虑到性能"</p> <p align="center"> <a href="http://makeapullrequest.com"> <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome"> </a> <a href="https://spectrum.chat/front-end-checklist"> <img src="https://img.shields.io/badge/chat-on_spectrum-4837E2.svg?style=flat-square" alt="Spectrum"> </a> <a href="https://opensource.org/licenses/MIT"> <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="Licence MIT"> </a> </p> <p align="center"> <a href="#how-to-use">How To Use</a> • <a href="#contributing">Contributing</a> • <a href="https://www.producthunt.com/posts/front-end-performance-checklist">Product Hunt</a> </p> <p align="center"> <span>其他清单：</span> <br> 🗂 <a href="https://github.com/JohnsenZhou/Front-End-Checklist">Front-End Checklist</a> • 💎 <a href="https://github.com/JohnsenZhou/Front-End-Design-Checklist">Front-End Design Checklist</a> </p>

概述

性能是一个很大的主题，但它并不总是一个“后端”或“管理（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
🛠 Web.dev
🛠 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
🛠 Website Speed Test | Check Web Performance » Dotcom-Tools
🛠 Website and Server Uptime Monitoring - Pingdom (Free Signup Link)
🛠 Uptime Robot
🛠 SpeedCurve: Monitor front-end performance
🛠 PWMetrics - CLI tool and lib to gather performance metrics
🛠 Varvy - Page speed optimization
🛠 Lighthouse - Google
🛠 Checkbot browser extension - Checks for web performance best practices
🛠 Yellow Lab Tools | Online test to help speeding up heavy web pages
🛠 Speedrank - Web Performance Monitoring
🛠 DebugBear - Monitor website performance and Lighthouse scores

参考

HTML

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作为默认值。没用的代码应在网站或应用程序中删除，因为它们会使网页体积增大。

怎么做：

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

怎么做：

确保<head>中的<link>和<style>始终位于<script>之前。
- 📖 合理安排styles和scripts来提高网页速度
最小化iframe的数量： 仅在没有任何其他技术可行性时才使用iframe。尽量避免使用iframe。
DNS预取： 一次 DNS 查询时间大概在60-120ms之间或者更长，提前解析网页中可能的网络连接域名
```
 <link rel="dns-prefetch" href="http://example.com/">
```

⬆ 返回顶部

CSS

css

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

为什么：

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

怎么做：

使用工具在构建或部署之前自动压缩文件。
Concatenation: CSS文件合并（对于HTTP/2效果不是很大）。
```

<link rel="stylesheet" src="foo.css"/>
<link rel="stylesheet" src="ajax.css"/>


<link rel="stylesheet" src="combined.css"/>
```
为什么：

如果你还在使用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框架是否已包含reset/normalize代码，可能不需要用到reset/normalize文件中的内容。
- 🛠 UnCSS Online
- 🛠 PurifyCSS
- 🛠 PurgeCSS
- 🛠 Chrome DevTools Coverage

关键CSS（Critical）: 将页面渲染时必备的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
- 📖 Reduce the size of the above-the-fold content

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

为什么：

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

怎么做：

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

为什么：

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

怎么做：

CSS需要有编写规范，再通过CSS预处理器处理。下面列出的一些在线工具也可以帮助你分析和更正你的代码。
- 🛠 TestMyCSS | 优化和检查CSS性能
- 📖 CSS 统计数据（stats）
- 🛠 macbre/analyze-css: CSS选择器复杂性和性能分析
- 🛠 Project Wallace is like CSS Stats but stores stats over time so you can track your changes

⬆ 返回顶部

字体

fonts

📖 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允许浏览器在空闲时进行上面的操作，在真实请求时就不需要再花时间去做一系列动作。这带来了性能的提升，因为当浏览器使用字体信息解析css文件并切从服务器请求字体文件时，它已经预先解析了DNS信息并且在其连接池中准备好与服务器的开放连接。

怎么做：

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

📖 Font Bytes - Page Weight

⬆ 返回顶部

图片

images

📖 Image Bytes in 2018
图像优化: 在保证压缩后的图片符合产品要求的情况下将图像进行优化。

为什么：

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

怎么做：

尽可能尝试使用CSS3效果（而不是用小图像替代）尽可能使用字体图片使用 SVG 使用编译工具并指定85以下的级别压缩。
图像格式： 适当选择图像格式。

为什么：

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

怎么做：

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

使用矢量图像 VS 栅格/位图： 可以的话，推荐使用矢量图像而不是位图图像。

为什么：

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

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

为什么：

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

为什么：

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

怎么做：

使用Lighthouse可以识别当前屏幕外的图像数量。要确保图片懒加载时鼠标悬停或其他用户操作时显示的替代图像。可以使用以下图像懒加载的JavaScript插件。
响应式图像： 确保提供接近设备显示尺寸的图像。

为什么：

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

怎么做：

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

⬆ 返回顶部

JavaScript

javascript

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

为什么：

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

怎么做：

建议使用下面的工具在构建或部署之前自动缩小文件。

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

为什么：

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

怎么做：

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

<script defer src="foo.js">


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

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

怎么做：

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

为什么：

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

怎么做：

如果项目使用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开发者工具中的时间轴工具来评估脚本事件，并找到可能需要花费太多时间的事件。
Use of Service Workers: You are using Service Workers in your PWA to cache datas or execute possible heavy tasks without impacting the user experience of your application.
使用 tree shaking 技术减少 js 大小: 通过构建工具分析 JavaScript 代码并移除生产环境中用不到的 js 模块或方法
- 📖 Reduce JavaScript Payloads with Tree Shaking
使用 code splitting 分包加载 js: 通过分包加载，减少首次加载所需时间

怎么做：
- Vendor splitting 根据库文件拆分模块，例如 React 或 lodash 单独打包成一个文件
- Entry point splitting 根据入口拆分模块，例如通过多页应用入口或者单页应用路由进行拆分
- Dynamic splitting 根据动态加载拆分模块，使用动态加载语法 import() ，实现模块按需加载
- 📖 Reduce JavaScript Payloads with Tree Shaking

⬆ 返回顶部

Server

server-side

网站使用HTTPS:

Why:

HTTPS不仅适用于电子商务网站，也适用于所有存在数据传递的网站。如今的现代浏览器对于不安全的网站在许多功能上做了些限制。例如：如果网站未使用HTTPS，则地理定位，推送通知和服务工作程序等功能会不起作用。今天设置和使用SSL证书比以前容易得多(Let's Encrypt能提供免费的https服务).
页面大小 < 1500 KB(理想 < 500 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: 尽可能减少浏览器在接收数据之前等待的时间。

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

为什么：

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

怎么做：

消除不必要的cookie

最小化HTTP请求： 始终确保所请求的每个文件对网站或应用程序至关重要，尽可能减少http请求。

📖 Combine external CSS
📖 Combine external JavaScript

使用CDN提供静态文件： 使用CDN可以更快地在全球范围内获取到你的静态文件。

提供来自相同协议的文件： 避免网站使用HTTPS同时使用HTTP来提供相同源地址的文件。
提供可访问的文件： 避免请求无法访问的文件（404）。
正确设置HTTP缓存标头： 合理设置HTTP缓存标头来减少http请求次数。
启用GZIP压缩 使用压缩方法（如Gzip或Brotli）来减小JavaScript文件的大小。使用较小尺寸的文件，用户可以更快地下载资源，从而提高性能。

分域存放资源： 由于浏览器同一域名并行下载数有限，利用多域名主机存放静态资源，增加并行下载数，缩短资源加载时间
减少页面重定向

⬆ 返回顶部

性能与前端框架

Angular

📖 Angular Performance Checklist

React

Vue

WordPress

🛠 Test Your Website Speed | WordPress Hosting by @WPEngine

文章

插件推荐

Translations

The Front-End Performance Checklist wants to also be available in other languages! Don't hesitate to submit your contribution!

🇵🇹 Portuguese: fernandofawkes/Front-End-Performance-Checklist
🇨🇳 Chinese: JohnsenZhou/Front-End-Performance-Checklist
🇷🇺 Russian: lex111/Front-End-Performance-Checklist
🇫🇷 French: WilliamDASILVA/Front-End-Performance-Checklist
🇰🇷 Korean: ParkSB/Front-End-Performance-Checklist
🇪🇸 Spanish: dagerzuga/Front-End-Performance-Checklist
🇻🇮 Vietnamese : huynhan147/Front-End-Performance-Checklist

Contributing

Open an issue or a pull request to suggest changes or additions.

Support

如果有什么问题和疑问，请通过以下途径联系:

Author

Build with ❤️ by David Dias at @influitive 🇨🇦

Contributors

感谢各位参与本项目的人员所作出的贡献。 [Contribute]. <a href="https://github.com/thedaviddias/Front-End-Performance-Checklist/graphs/contributors"> <img src="https://opencollective.com/front-end-checklist/contributors.svg?width=890" /> </a>

Backers

Thank you to all our backers! 🙏 [Become a backer]

License

MIT

All icons are provided by Icons8

⬆ 返回顶部

Awesome

目录

概述

如何使用?

性能测试工具

参考

HTML

CSS

字体

图片

JavaScript

Server

性能与前端框架

Angular

React

Vue

WordPress

文章

插件推荐

Translations

Contributing

Support

Author

Contributors

Backers

Sponsors

License