原文：http://web.jobbole.com/83550/
最小化请求
所有在你的网站加载时用来渲染页面（外部CSS或JS文件、web字体、图片等等）的资源，都是不同的HTTP请求。一般的网站平均有 93个请求！
我的目标是减少HTTP请求。一种方法是分别编译或连接（组合、合并）CSS和javascript到一个文件中。让这个过程自动化（例如使用构建工具 Grunt 或 Gulp）是理想的效果，但至少也应该在生产环境下手动完成。
第三方脚本是增加额外请求最常见的罪魁祸首，很多获取额外的文件如脚本、图像或CSS的请求都不止1个。浏览器内置的开发者工具可以帮助你发现这些元凶。
Google Chrome开发者工具的网络选项卡
例如，Facebook的脚本发起3次请求。测试环境中使用一些来自著名社交网站的社交分享脚本，可以看到他们快速增加：
| Google+ | 1 | 15.1KB |
| 3 | 73.3KB | |
| 2 | 47.7KB | |
| 3 | 12.9KB | |
| Tumblr | 1 | 1.5KB |
| 4 | 52.7KB | |
| Total | 14 | 203.2KB |
来源：更有效的社会分享链接
这有额外的14个HTTP请求，共203.2KB。相反，我看看 “share-intent” 这个url，它基本上是通过传递和构建数据来生成一个共享，可以只使用HTML来创建社交共享链接。它让我丢掉用于共享的第三方脚本，这些脚本需要7次请求。我在Responsible Social Share Links这篇文章有更多的阐述。
评估每一个第三方脚本并确定其重要性。也许存在一种不依赖第三方的方法来完成它。你可能会失去一些功能（例如like、tweet、分享数量），但是请问一下自己：“像数量统计就那么重要吗？”
压缩、优化
现在我找到了减少请求的方法，我开始寻找各种方法来减重。文件越小，加载速度越快。通常平均的页面大小为1950KB。按照内容分类：
图片：1249KB HTML：58KB CSS：60KB JS:303KB 字体：87KB Flash：67KB 其它：126KB
我使用这些数据作为参考和比较的起点，同时找到我可以用来为网站减负的方法。 我的网站耗费的流量有多少？是一个由Tim Kadlec编写的很棒的工具，可以用来帮助你测试和可视化，来自世界各地的访问在你的网站上消耗的流量。
CSS和JavaScript
压缩样式表和JavaScript文件可以明显减少文件大小，我仅在压缩上就从一个文件上节省了56%的空间。
| CSS | 135KB | 104KB | 23.0% |
| JS | 16KB | 7KB | 56.3% |
我使用 BEM （代码、元素、修饰符） 方法论编写CSS，这将导致冗长的类名。重构我的一些代码变得更简短（“navigation”为 “nav”， “introduction” 为 “intro”），这让我节省了一些空间，但和我期望的后期压缩相比并不是那么明显。
| 104KB | 97KB | 6.7% |
我也重新评估了使用jQuery的必要性。对于压缩的135KB的JavaScript，大约96KB是jQuery库——71%之多！这里并没有 很多需要依赖于jQuery，所以我花时间重构了代码。我通过剥离jQuery和在Vanilla重写它，去除了122KB，最终压缩后的文件大小减少到 13KB。
| 135KB | 13KB | 122KB (90%) |
从那时起，我设法去掉更多空间（压缩后7KB），最后脚本在压缩和gzipped后只有0.365KB。
图片
图片通常占到一个网站的大头。通常网站平均有1249 KB的图片。
我抛弃了图标字体，取而代之的是内联SVG。此外，任何可以矢量化的图片都使用内联SVG替换。我的网站先前版本的一个页面仅仅图标web字体就加载了145KB，同时对于几百个web字体，我只使用了一小部分。相比之下，当前网站的一个页面只加载10KB内联SVG，这可是93%的差异。
SVG sprites看起来很有趣，它可能是我在整个网站使用普通内联SVG图标的一个可行的替代解决方案。
在可能的情况下使用CSS代替图片，现在的CSS能做的已经很多了。然而，浏览器兼容性可能是现代CSS使用的一个问题；因此，充分利用 caniuse.com 和逐步改进。
你也可以通过优化图片来压缩字节。有两种方法来优化图片：
- 有损压缩：降低图像的质量
- 无损压缩：不影响质量
要同时使用两种方法取得最好的效果，顺序是很重要的。首先，使用有损图像压缩方法，比如在不超过必要大小的情况下调整图像大小。然后在略低质量且不压缩太多的情况下导出（如我通常在82 – 92%下导出JPG图片）
ImageOptim是OS X下的一个图像优化工具
接下来，使用无损图像优化工具比如 ImageOptim进行处理，从而通过删除不必要的信息，如元数据或颜色配置文件来进一步减少图像文件大小。
页面渲染
在这一点上，经过工作和汗水得出这些细节，我确信我的 Google PageSpeed Insights 的分数将是90s。
在移动平台PSI分数为73/100，而桌面平台上好一点在88/100。它建议我“消除render-blocking的JavaScript和CSS”。
render-blocking文件增加了浏览器显示内容的时间，因为这些文件需要先下载并处理。多个render-blocking文件需要浏览器使用多个线程去获取和处理它们，等待时间进一步增加。
优化JavaScript、CSS和web字体的传输，可以提高页面的“第一时间渲染”。将这个时间降到最低，理解“关键的渲染路径”很重要，它描述了在当页面的第一个字节被收到，与页面第一次渲染成像素之间发生了什么。
WebPagetest 是用来帮助你配置网站和页面性能最好的可视化工具。
About页面在渲染优化前的WebPagetest结果
当最小化第一次渲染时间时，我们更多的关注以尽可能快的速度渲染内容，然后允许额外的“东西”在处理过程中逐步渲染。
CSS
默认情况下，浏览器将CSS作为渲染阻塞；因此，当它加载时，浏览器暂停渲染，等待CSS已经被下载和处理。外部样式表意味着更多的网络线程，它增加了等待时间，同时大型样式表也会增加等待时间。
我们可以通过在<head>标签内联“关键CSS”来改善页面渲染时间，这样浏览器可以不用再等待下载整个样式表，就可以快速地渲染页面内容，然后通过non-rendering-blocking方式加载完整的样式表。
|
1
2
3
4
5
|
<head>
<style>
/* inline critical CSS */
</style>
</head>
|
确定哪些CSS是关键需要（1）查看移动或桌面下页面视口（viewport ）大小，（2）识别视口中可见的元素（3）选择这些元素关联的CSS。
这可能有点棘手，特别是手工完成，但是有一些神奇的工具可以帮助加快甚至自动化这个过程。我使用 Filament Group编写的 grunt-criticalcss来帮助我为页面生成关键CSS，然后再手动优化一些CSS（合并重复的媒体查询和删除我认为不必要的CSS）。
About页面只加载关键CSS（左侧）和加载整个CSS（右侧）的对比
现在关键CSS已经内联到<head>标签内，我使用loadCSS工具来异步加载样式表的其余部分。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<head>
<style>
/* inline critical CSS */
</style>
<script>
// inline the loadCSS script
functionloadCSS(href,before,media,callback){...}
// then load your stylesheet
loadCSS("/path/to/stylesheet.css");
</script>
<noscript>
<link href="/path/to/stylesheet.css"rel="stylesheet">
</noscript>
</head>
|
谷歌也给出non-render-blocking加载CSS的 另一个示例 。
JavaScript
JavaScript也会导致render-blocking，因此它的加载也应该优化。可以使用以下的方法:
- 小的内联脚本。
- 在文档底部加载外部脚本。
- 使用defer属性推迟执行脚本。
- 使用async属性异步加载的脚本。
|
1
2
3
4
5
6
7
8
9
10
11
|
<head>
<script>
// small inline JS
</script>
</head>
<body>
...
<script src="/path/to/independent-script.js"async>
<script src="/path/to/parent-script.js"defer>
<script src="/path/to/dependent-script.js"defer>
</body>
|
在解析HTML时 defer推迟下载脚本，一旦页面渲染完成执行脚本。defer支持很不错，但据报道存在不一致和不可靠性，所以最好同时使用defer并把脚本放置在文档底部。
在HTML解析和执行时异步下载脚本文件。这允许多个脚本文件并发下载和执行；然而，他们不能保证在一个特定的顺序加载。如果相互依赖可能需要在这些场景下修改任意脚本。
async支持大不如defer，这就是为什么我选择使用loadJS，用来异步加载JS文件的脚本。它支持老式浏览器，同时有一个有用的特性，即根据条件加载脚本。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<head>
<script>
// small inline JS
</script>
</head>
<body>
...
<script>
// inline loadJS
functionloadJS(src,cb){..}
// then load your JS
loadJS("/path/to/script.js");
</script>
<script src="/path/to/parent-script.js"defer>
<script src="/path/to/dependent-script.js"defer>
</body>
|
Web字体
Web字体使内容更加清晰和漂亮，但是也对页面渲染产生了负面影响。在加载页面时，特别是移动端的连接，你可能已经注意到文本在一段时间看不见。这被称为 FOIT（不可见文本闪动）。
我的网站出现FOIT的样子
当浏览器尝试下载一个web字体，它将隐藏文本一段时间，直到它完成字体下载，才显示文本。在最糟糕的情况下，文本无限期地不可见，使内容完全不能阅读。
我处理FOIT 的方式是逐步加载字体，首先依赖默认和系统字体（例如Helvetica和Georgia）允许快速呈现的内容。Web字体然后使用loadCSS异步加载，同时通过 Font Face Observer库来检测字体何时下载成功。一旦字体下载且可用，一个类被添加到文档中，用于设置页面正确的字体。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<head>
<style>
body {font-family:Helvetica,Arial,sans-serif;}
.fonts-loaded body {font-family:Roboto,Helvetica,Arial,sans-serif;}
</style>
<script>
// inline loadCSS
functionloadCSS(href,before,media,callback){...}
// load webfonts
loadCSS("//fonts.googleapis.com/css?family=Roboto:400,500,700");
// inline FontFaceObserver
(function(){...}
// detect loading of fonts
varroboto400=newFontFaceObserver("Roboto",{
weight:400
});
varroboto700=newFontFaceObserver("Roboto",{
weight:700
});
Promise.all([
roboto400.check(),
roboto700.check()
]).then(function(){
document.documentElement.className+=" fonts-loaded";
});
</script>
</head>
|
逐步加载字体将导致FOUT（没有样式的文本闪动）和FOFT（仿文本闪动），这取决于它是如何做的。
字体逐步加载，不产生FOIT
然而，好处是内容一直可见，而不会出现看不见的情况。关于如何击败FOIT，我写了一篇的深入文章 使用字体事件加载字体。
其它
其他方法，如启用gzip和缓存、配置SSL和从内容分发网络（CDN）获取资源，可以提高前端性能，但需要一些服务器端支持。基于篇幅所限，我不会深入他们。然而我想强调的是，我推荐使用这些方法，他们将会对你的网站性能有一个全面和积极的影响。
我将提到，因为我的网站的访问量百分比相当一部分来自美国以外，而我的服务器是位于纽约，我于是决定把我的一些资源发布到CDN上。他们部署到一个 Amazon S3 bucket上，绑定到一个CloudFront版本。
综述
在过去的几个月中我一直在做性能改进，尽管这有很多工作，我确实注意到了差别。我偶尔得到关于我的网站速度的评论，这是性能调整的结果。
我还没有在指标跟踪上做得很好（特别是早期），但让我们看看基于已有数据的一些比较。
| Requests | 93 | 19 | -87.6% |
| Page size | 1950KB | 524KB | -73.1% |
| HTML | 58KB | 2.8KB | -95.1% |
| Images | 1249KB | 66.3 | -94.7% |
| CSS | 60KB | 14.6KB | -75.7% |
| JS | 303KB | 6.1KB | -98.0% |
| Fonts | 87KB | 10.2KB | -88.3% |
总体上87.5%优于平均水平！不是很坏。现在谷歌PageSpeed也给我的网站一个不错的分数。
优化后谷歌PageSpeed的结果
关于WebPagetest的结果，我注意到，尽管About页面字节增加了，但开始渲染和加载的时间大大减少。
About页面在渲染优化后的WebPagetest结果
性能改进将永远是进行时，在 HTTP/2到来的路上其中一些将改变，之前好用的技术可能不再好用，同时有些可能完全弃用。
相关推荐
前端性能优化探索 前端性能优化是当前互联网开发中的一个重要话题。...我们需要从多方面对前端性能进行优化，包括JavaScript性能优化、React性能优化等，以提高页面响应速度和流畅度，提升用户体验。
在前端开发领域，性能优化是提升用户体验的关键环节。...这些文档全面覆盖了前端性能优化的多个层面，对开发者来说是宝贵的参考资料，通过学习和实践，可以有效提升前端应用的性能，提供更好的用户体验。
随着互联网技术的飞速发展，前端性能优化已经成为衡量一个...未来，随着技术的不断进步，前端性能度量方法将会更加精确和高效，为前端开发者提供更强有力的支持，助力他们打造更快、更流畅、更贴近用户需求的网页应用。
根据Yahoo的高性能网页最佳实践，前端性能优化能够显著提升网站的性能，减少用户流失，提高销售转化率。 首先，我们来看一下为什么前端性能分析如此重要。Google的研究显示，如果一个网站的加载速度慢500毫秒，其...
在IT领域，前端性能...总的来说，一个良好的前端性能监控系统可以帮助团队快速响应性能问题，提升用户满意度，并最终优化产品的整体质量。通过深入理解和运用其中的技术，开发者可以创建出更加流畅、快速的Web应用。
这本"前端性能优化原理与实践"小册子深入探讨了如何通过一系列技术手段优化前端页面，旨在帮助开发者构建更快、更流畅的Web应用。以下是该压缩包文件中可能涉及的一些核心知识点： 1. **延迟加载（Lazy Loading）**...
在现代Web开发中，前端性能优化是至关重要的，它直接影响用户体验和网站的转化率。本文档将探讨如何提升WEB前端的性能，通过遵循一系列规则和使用专业的工具来达到最佳效果。我们将详细介绍YSLOW工具，这是一个非常...
前端性能优化是指在前端开发过程中，对Web应用程序的性能进行优化，以提高用户体验和页面加载速度。本文将介绍前端性能优化的经验沉淀，包括机票双程性能优化和开发工具的使用。 一、前端性能优化 1. 机票双程性能...
而Web前端性能优化，作为提升用户体验的重要手段之一，对于WEB前端工程师来说，掌握这项技能是必不可少的。本文将结合实际经验，分享一些在前端开发中应用广泛的性能优化技巧。 首先，减少HTTP请求是性能优化的基础...
这些前端性能优化策略覆盖了从资源加载、网络通信到用户体验的各个层面，通过有效的组合和实施，可以显著提升网页的加载速度和用户满意度。在实践中，开发者需要根据项目特性选择合适的优化方法，并持续监控和改进，...
良好的前端性能不仅能够提升用户满意度，还能提高搜索引擎排名，增加转化率。 ### 二、性能分析 #### 2.1 性能分析工具 - **Navigation Timing API**：提供了关于页面加载过程的时间戳数据，如加载开始时间、结束...
Web 前端性能优化的研究与应用 摘要：随着计算机技术和网络通讯技术的高速发展，Web 应用已经成为人们的一种必...Web 前端性能优化的意义非常重要，因为它可以有效地提升 Web 站点的性能，提高用户的体验度和忠诚度。
**前端性能测试工具——Lighthouse (灯塔)插件** Lighthouse 是一款开源的自动化工具，主要用于提升网页的性能和可访问性。它由Google开发并维护，作为一个Chrome浏览器的扩展，可以方便地对任何网站进行性能评估和...
### 前端性能优化指南 #### 概述 前端性能优化是指通过对网站或Web应用的前端部分进行改进，以提升用户体验的过程。...通过上述方法，我们可以有效地提高前端性能，为用户提供更加流畅的浏览体验。
而前端性能优化则是指通过各种技术手段，如代码优化、资源加载策略调整等，提升用户在浏览器中访问Web应用的速度和体验。 在DevCloud这个云开发平台上，前端性能优化可能涉及以下几个方面： 1. **代码优化**：包括...
4. **前端性能指标**：如Time to First Byte (TTFB)、First Contentful Paint (FCP)和First Input Delay (FID)等，这些指标有助于衡量和改善网站性能。 5. **前端框架与库**：合理选择和使用如React、Vue或Angular...
前端性能优化对于提高用户体验至关重要。以下是一些常见的前端性能优化策略： **2.1 延迟渲染** - **2.1.1 挑战和困难**：某些情况下，由于页面内容过多或资源过大，页面加载速度变慢。 - **2.1.2 解决方案**：...
首先，"高性能grid"是指一种能够快速渲染和操作大量数据的前端组件。它通常具备优秀的性能优化手段，如虚拟滚动、延迟渲染和智能内存管理等。Grid的核心目标是在保持响应速度的同时，提供流畅的用户交互体验。 动态...