单一原则: "在设计和编写时考虑到性能"
How To Use • Contributing • Product Hunt
其他清单：
🗂 Front-End Checklist • 💎 Front-End Design Checklist
- 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
- 📖 The Cost Of JavaScript - YouTube
- 📖 Get Started With Analyzing Runtime Performance | Google Developers
- 📖 State of the Web | 2018_01_01
- 📖 Page Weight Doesn't Matter
-
压缩 HTML:
为什么：
删除所有不必要的空格、注释和中断行将减少HTML的大小，加快网站的页面加载时间，并显着减轻用户的下载时间。
怎么做：
大多数框架都有插件来促进网页的缩小。你可以使用一组可以自动完成工作的NPM模块。
-
删除不必要的注释：
为什么：
注释对用户来说是没有用的，应该从生产环境文件中删除。可能需要保留注释的一种情况是：保留远端代码库（keep the origin for a library）。
怎么做：
大多数情况下，可以使用HTML minify插件删除注释。
-
删除不必要的属性：
type="text/javascript"ortype="text/css"这样的属性应该被移除。<!-- Before HTML5 --> <script type="text/javascript"> // Javascript code </script> <!-- Today --> <script> // Javascript code </script>
为什么
类型属性不是必需的，因为HTML5把text/css和text/javascript作为默认值。没用的代码应在网站或应用程序中删除，因为它们会使网页体积增大。
怎么做：
⁃ 确保所有和<script>标记都没有任何type属性。
-
在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>之前。
-
最小化iframe的数量：
-
压缩:
为什么：
缩小CSS文件时，内容加载速度更快，并且将更少的数据发送到客户端，所以在生产中缩小CSS文件是非常重要，这对用户是有益的就像任何企业想要降低带宽成本和降低资源。
怎么做：
使用工具在构建或部署之前自动压缩文件。
-
Concatenation:
<!-- 不推荐 --> <script src="foo.css"></script> <script src="ajax.css"></script> <!-- 推荐 --> <script src="combined.css"></script>
为什么：
如果你还在使用HTTP/1就可能需要合并文件，如果服务器使用是HTTP/2效果还有待检测。
怎么做：
在构建或部署之前使用在线工具或者其他插件来合并文件。当然要在确保合并文件不会破坏项目正常运行。
-
非阻塞：
<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)的长度:
*为即使是性能影响也是有争议的，对项目的命名策略做出决定会对样式表的可维护性产生重大影响。如果使用BEM，在某些情况下可能会遇到比所需字符多的类。明智地选择名字和命名空间总是很重要的。
怎么做：
组件化有助于减少类的数量（和声明）以及类的长度。
-
不用的CSS:
为什么：
删除未使用的CSS选择器可以减小文件的大小，加快资源的加载速度。
怎么做：
⚠️ 检查要使用的CSS框架是否已包含重置/规范化代码。有时可能不需要用到重置/规范化文件中的内容。
-
关键CSS（Critical）:
为什么：
内联关键CSS有助于加速网页的呈现，减少对服务器的请求数量。
怎么做：
使用在线工具或使用Addy Osmani开发的插件生成关键CSS。
-
嵌入或内联CSS：
为什么：
因为将内容与设计分开是一种很好的做法。它还可以提高代码的可维护性并使站点可访问性更强。对于性能来说，它只是因为减少了HTML页面的文件大小和加载时间。
怎么做：
始终使用外部样式表或在中嵌入CSS（并遵循其他CSS性能规则）。
-
分析样式表的复杂性：
为什么：
有时在CSS中会出现冗余或验证错误，分析CSS文件并删除这些复杂性的代码可以加速CSS文件的读取和加载（因为您的浏览器会更快地读取它们）
怎么做：
CSS需要有编写规范，再通过CSS预处理器处理。下面列出的一些在线工具也可以帮助你分析和更正你的代码。
-
Webfont格式：
为什么：
根据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大小：
-
图像优化:
为什么：
优化的图像在浏览器中加载速度更快，消耗的数据更少。
怎么做：
尽可能尝试使用CSS3效果（而不是用小图像替代） 尽可能使用字体图片 使用 SVG 使用编译工具并指定85以下的级别压缩。
-
图像格式：
为什么：
为确保图片不会减慢网站速度
怎么做：
使用Lighthouse识别哪些图像可以使用下一代图片格式（如JPEG 2000m JPEG XR或WebP）。 比较不同的格式，有时使用PNG8比PNG16好，有时候不是。
-
使用矢量图像 VS 栅格/位图：
为什么：
矢量图像（SVG）往往比图像小，具有响应性和完美缩放功能。而且这些图像可以通过CSS进行动画和修改操作。
-
图像尺寸：
上设置宽度和高度属性。
为什么：
如果设置了高度和宽度，则在加载页面时会保留图像所需的空间。如果没有这些属性，浏览器就不知道图像的大小，也无法为其保留适当的空间，导致页面布局在加载期间发生变化。
-
避免使用Base64图像：
-
懒加载：
为什么：
它能改善当前页面的响应时间，避免加载一些用户可能不需要或不必要的图像。
怎么做：
使用Lighthouse可以识别屏幕外的图像数量。 使用懒加载图像的JavaScript插件。
-
响应式图像：
为什么：
小型设备不需要比视口大的图像。建议在不同尺寸上使用一个图像的多个版本。
怎么做：
为要不同的设备创建不同大小的图像。 使用srcset和picture为每个图像提供多种变体（variants）。
-
JS 压缩:
为什么：
删除所有不必要的空格、注释和空行将减少JavaScript文件的大小，并加快网站的页面加载时间，提升用户体验。
怎么做：
建议使用下面的工具在构建或部署之前自动缩小文件。
-
不内嵌JavaScript:
body中间嵌入多个JavaScript代码，将JavaScript代码重新集中到外部文件中，放在或页面末尾（之前）。为什么：
将JavaScript嵌入代码直接放在中可能会降低页面速度，因为它在构建DOM时会加载。最好的选择是使用
async或defer的外部文件来避免阻塞DOM渲染。另一种选择是在中放置一些脚本。大多数时候需要在DOM进入主处理之前加载的分析代码或小脚本。怎么做：
确保使用async或defer加载所有script文件，并准确的在中加载代码。
-
非阻塞JavaScript：
<!-- Defer Attribute --> <script defer src="foo.js"> <!-- Async Attribute --> <script async src="foo.js">
为什么：
JavaScript阻止HTML文档的正常解析，因此当解析器到达<script>标记时（特别是在内），它会停止解析并且执行脚本。如果您的脚本位于页面顶部，则强烈建议添加
async和defer，但如果在标记之前加载，没有太大影响。但是，使用这些属性来避免性能问题是一种很好的做法。怎么做：
添加
async（如果脚本不依赖于其他脚本）或defer（如果脚本依赖或依赖于异步脚本）作为script脚本标记的属性。 如果有小脚本，可以在异步脚本上方使用内联脚本。 -
优化和更新的JS库：
为什么：
大多数情况下，新版本都带有优化和安全性修复，所以应该使用最优化的代码来优化项目。确保不存在过时插件。
怎么做：
如果项目使用NPM管理依赖包，npm-check是一个非常有用的库来升级/更新你的库。
-
检查依赖项大小限制：
为什么：
你可能想使用npm中745 000个包中的一个，但你需要选择最适合项目需求的包。例如，MomentJS是一个很棒的库，但是你可能永远不会使用其中的很多方法，这就是为什么创建Day.js的原因。瞬间大小从16.4kB到2kB。
怎么做：
始终比较并选择最适合您需求的轻型库。您还可以使用npm trends等工具来比较NPM包下载次数或Bundlephobia以了解依赖项的大小。
-
JavaScript 分析:
为什么：
JavaScript复杂性可能会降低运行时性能。识别这些可能的问题对提供流畅的用户体验来说至关重要。
怎么做：
使用Chrome开发者工具中的时间轴工具来评估脚本事件，并找到可能需要花费太多时间的事件。
-
页面大小 < 1500 KB:
为什么：
理想情况下，应该尝试让页面大小<500 KB，但Web页面大小中位数大约为1500 KB（即使在移动设备上）。根据你的目标用户、连接速度、设备，尽可能减少页面大小以尽可能获得最佳用户体验非常重要。
怎么做：
前端性能清单中的所有规则将帮助你尽可能地减少资源和代码。
-
页面加载时间 < 3秒：
为什么：
网站或应用程序速度越快，反弹增加的可能性越小，换句话说，失去用户或未来客户的机会就越少。Google对该主题的充分研究证明了这一点。
怎么做：
使用Page Speed Insight或WebPageTest等在线工具分析可能会降低速度的工具，并使用前端性能清单来缩短加载时间。
-
TTFB < 1.3 seconds:
-
Cookie 大小:
为什么：
cookie存在于HTTP头中，在Web服务器和浏览器之间交换。保持cookie的大小尽可能低是非常重要的，以尽量减少对用户响应时间的影响。
怎么做：
消除不必要的cookie
-
最小化HTTP请求：
-
使用CDN提供静态文件：
- 📖 10 Tips to Optimize CDN Performance - CDN Planet
- 📖 HTTP Caching | Web Fundamentals | Google Developers
-
提供来自相同协议的文件：
-
提供可访问的文件：
-
正确设置HTTP缓存标头：
-
启用GZIP压缩
- 📖 Optimizing Performance - React
- 📖 React image manipulation | Cloudinary
- 📖 Debugging React performance with React 16 and Chrome Devtools.
The Front-End Performance Checklist wants to also be available in other languages! Don't hesitate to submit your contribution!
Open an issue or a pull request to suggest changes or additions.
如果有什么问题和疑问，请通过以下途径联系:
Build with ❤️ by David Dias at @influitive 🇨🇦
感谢各位参与本项目的人员所作出的贡献。 [Contribute].
All icons are provided by Icons8