单一原则: "在设计和编写时考虑到性能"
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
- 🛠 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
- 📖 The Cost Of JavaScript - YouTube
- 📖 AddyOsmani.com - Start Performance Budgeting
- 📖 Get Started With Analyzing Runtime Performance | Google Developers
- 📖 State of the Web | 2018_01_01
- 📖 Page Weight Doesn't Matter
- 📖 Front-End Performance Checklist 2018 [PDF, Apple Pages]
- 📖 Designing for Performance Weighing Aesthetics and Speed - By Lara Callender Hogan [eBook, Print]
- 📖 Varvy - Web performance glossary
- 📖 fabkrum/web-performance-resources: Up to date collection of valuable web performance resources
- 📖 Checkbot - Web Speed Best Practices
- 🛠 Progressive Tooling - A list of community-built, third-party tools that can be used to improve page performance
-
压缩 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的数量：
-
DNS预取：
<link rel="dns-prefetch" href="http://example.com/">
-
压缩:
为什么：
缩小CSS文件后，内容加载速度更快，并且将更少的数据发送到客户端，所以在生产中缩小CSS文件是非常重要，这对用户是有益的，就像任何企业想要降低带宽成本和降低资源。
怎么做：
使用工具在构建或部署之前自动压缩文件。
-
Concatenation:
<!-- 不推荐 --> <link rel="stylesheet" src="foo.css"/> <link rel="stylesheet" src="ajax.css"/> <!-- 推荐 --> <link rel="stylesheet" src="combined.css"/>
为什么：
如果你还在使用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框架是否已包含reset/normalize代码，可能不需要用到reset/normalize文件中的内容。
-
关键CSS（Critical）:
<style></style>的方式内联到页面中（尽可能压缩后引用）。为什么：
内联关键CSS有助于加速网页的呈现，减少对服务器的请求数量。
怎么做：
使用在线工具或使用Addy Osmani开发的插件生成关键CSS。
-
嵌入或内联CSS：
为什么：
因为将内容与设计分开是一种很好的做法。它还可以提高代码的可维护性并使站点可访问性更强。对于性能来说，它只是减少了HTML页面的文件大小和加载时间。
怎么做：
始终使用外部样式表或在中嵌入CSS（并遵循其他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
-
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允许浏览器在空闲时进行上面的操作，在真实请求时就不需要再花时间去做一系列动作。这带来了性能的提升，因为当浏览器使用字体信息解析css文件并切从服务器请求字体文件时，它已经预先解析了DNS信息并且在其连接池中准备好与服务器的开放连接。怎么做：
在预取您的网络字体之前，请使用网页测试来检测网站. 查找蓝绿色DNS查找并记下正在请求的主机（Look for teal colored DNS lookups and note the host that are being requested.） 在中添加预取的webfonts，添加上一步查找到的主机名。
- 📖 Faster Google Fonts with Preconnect - CDN Planet
- 📖 Make Your Site Faster with Preconnect Hints | Viget
- 📖 Ultimate Guide to Browser Hints: Preload, Prefetch, and Preconnect - MachMetrics Speed Blog
- 📖 A Comprehensive Guide to Font Loading Strategies—zachleat.com
- 🛠 typekit/webfontloader: Web Font Loader gives you added control when using linked fonts via @font-face.
-
Webfont大小：
-
图像优化:
为什么：
优化的图像在浏览器中加载速度更快，消耗的数据更少。
怎么做：
尽可能尝试使用CSS3效果（而不是用小图像替代） 尽可能使用字体图片 使用 SVG 使用编译工具并指定85以下的级别压缩。
- 📖 Image Optimization | Web Fundamentals | Google Developers
- 📖 Essential Image Optimization - An eBook by Addy Osmani
- 🛠 TinyJPG – Compress JPEG images intelligently
- 🛠 Kraken.io - Online Image Optimizer
- 🛠 Compressor.io - optimize and compress JPEG photos and PNG images
- 🛠 Cloudinary - Image Analysis Tool
- 🛠 SVGOMG - Optimize SVG vector graphics files
-
图像格式：
为什么：
确保图片不会减慢网站速度
怎么做：
使用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开发者工具中的时间轴工具来评估脚本事件，并找到可能需要花费太多时间的事件。
- 📖 Speed Up JavaScript Execution | Tools for Web Developers | Google Developers
- 📖 JavaScript Profiling With The Chrome Developer Tools — Smashing Magazine
- 📖 How to Record Heap Snapshots | Tools for Web Developers | Google Developers
- 📖 Chapter 22 - Profiling the Frontend - Blackfire
- 📖 30 Tips To Improve Javascript Performance
-
Use of Service Workers:
-
使用 tree shaking 技术减少 js 大小:
-
使用 code splitting 分包加载 js:
怎么做：
- Vendor splitting 根据库文件拆分模块，例如 React 或 lodash 单独打包成一个文件
- Entry point splitting 根据入口拆分模块，例如通过多页应用入口或者单页应用路由进行拆分
- Dynamic splitting 根据动态加载拆分模块，使用动态加载语法
import()，实现模块按需加载
-
网站使用HTTPS:
Why:
HTTPS不仅适用于电子商务网站，也适用于所有存在数据传递的网站。如今的现代浏览器对于不安全的网站在许多功能上做了些限制。 例如：如果网站未使用HTTPS，则地理定位，推送通知和服务工作程序等功能会不起作用。今天设置和使用SSL证书比以前容易得多(Let's Encrypt能提供免费的https服务).
-
页面大小 < 1500 KB(理想 < 500 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.
- 📖 19 Tips to Speed Up WordPress Performance (Updated)
- 📖 Speed Up Your WordPress - How to Save Images Optimized for Web
- 🛠 Caching Plugin for WordPress - Speed up your website with WP Rocket
- 🛠 WP-Sweep | WordPress.org
- 🛠 Imagify Image Optimizer | WordPress.org
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
Open an issue or a pull request to suggest changes or additions.
如果有什么问题和疑问，请通过以下途径联系:
Build with ❤️ by David Dias at @influitive 🇨🇦
感谢各位参与本项目的人员所作出的贡献。 [Contribute].
Thank you to all our backers! 🙏 [Become a backer]
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
All icons are provided by Icons8