专题课程
所有在你的网站加载时用来渲染页面（外部CSS或JS文件、web字体、图片等等）的资源，都是不同的HTTP请求。一般的网站平均有 93个请求！
我的目标是减少HTTP请求。一种方法是分别编译或连接（组合、合并）CSS和javascript到一个文件中。让这个过程自动化（例如使用构建工具 Grunt 或 Gulp）是理想的效果，但至少也应该在生产环境下手动完成。
第三方脚本是增加额外请求最常见的罪魁祸首，很多获取额外的文件如脚本、图像或CSS的请求都不止1个。浏览器内置的开发者工具可以帮助你发现这些元凶。
Google Chrome开发者工具的网络选项卡
例如，Facebook的脚本发起3次请求。测试环境中使用一些来自著名社交网站的社交分享脚本，可以看到他们快速增加：
这有额外的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编写的很棒的工具，可以用来帮助你测试和可视化，来自世界各地的访问在你的网站上消耗的流量。
压缩样式表和JavaScript文件可以明显减少文件大小，我仅在压缩上就从一个文件上节省了56%的空间。
我使用 BEM （代码、元素、修饰符） 方法论编写CSS，这将导致冗长的类名。重构我的一些代码变得更简短（“navigation”为 “nav”， “introduction” 为 “intro”），这让我节省了一些空间，但和我期望的后期压缩相比并不是那么明显。
我也重新评估了使用jQuery的必要性。对于压缩的135KB的JavaScript，大约96KB是jQuery库——71%之多！这里并没有很多需要依赖于jQuery，所以我花时间重构了代码。我通过剥离jQuery和在Vanilla重写它，去除了122KB，最终压缩后的文件大小减少到13KB。
从那时起，我设法去掉更多空间（压缩后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结果
当最小化第一次渲染时间时，我们更多的关注以尽可能快的速度渲染内容，然后允许额外的“东西”在处理过程中逐步渲染。
收藏(0)
赞 
粤公网安备44010602001432号