四年网页监控中学到的知识

　　

现在平均网页2219 KB，而四年前只有991 KB

　　去年春天平均页面就跨越了2 MB大关，达到2099 KB。现在的网页平均比一年前大16%，比四年前大139%。

　　在过去的六个月时间里，页面的平均规模又增长了120 KB。对这样的变化，我们很容易忽略不计。毕竟这又不是什么大不了的事情，对吧?区区120 KB远还没有达到我们需要担心的程度。不过，这个数值代表了：更多的页面资源(如图像，CSS文件，以及各种脚本)，更多的页面复杂性，以及更多的性能故障风险。

 

　　图像占平均页面重量的64%

　　这已经不是什么不为人知的信息了。自从我跟踪了HTTP Archive之后，我就发现图像至少构成了平均网页的60%。

　　让人不可思议的是，图像的增长速度非常之快：总的图像负载在短短四年间增加了一倍都不止。更不可思议的是，现在光是图像的页面重量就超过了两年多前的平均整个网页。

 

　　但是，规模并不代表一切

　　秘密就在于“页面重量”——页面重量被广泛地定义为一个页面的总文件大小以及它所有的子资源(图片，CSS，JS等)——但这并非问题的所在。虽然带宽不是问题，但网页性能不会随着宽带接入变得更加普遍而提高。

　　问题在于延迟。

　　我们大部分的网络协议都需要网络往返时延，每一个网络往返增强了网络延时的概率。网络延时受介质传输速度的制约，这意味着网络延时并不是在任何地方都会发生。

 

　　那么……我们能做些什么呢?

 

　　1.为页面设置性能预算

　　许多快速的网页都有一个共同点，那就是：大小最多约1 MB(或更少)。并非巧合的是，1 MB正是许多公司正在建立的“性能预算”中为他们的网页设置的最大值。这可不是为了让页面更小——而是为了强迫自己优化出现在网页上的资源，并做一些战略性的优胜劣汰，以便于让网页变得更简单，从而减少延迟。

 

　　2.首先处理图像

　　如果你想在性能上取得一些快速的胜利，那么先从优化你的图像开始。下面是我创建的一个高层次的图像优化清单，以便于你介绍图像优化的重要性给贵组织中的每一个人(尤其是非技术人员)。想要了解更深的话，我强烈推荐Guy Podjarny写的这篇文章——《High Performance Images: Beautiful Shouldn’t Mean Slow》。

 

　　3.优化字体

　　Ilya Grigorik写过一篇关于web字体优化的文章，很精彩，设计人员和软件开发人员不可不读。

 

　　4.得到有关第三方脚本的句柄

　　一个典型的web页面可以包含75+第三方脚本，并且当涉及到管理这些脚本的性能的时候，简直就如同群魔乱舞。许多网站所有者其实并不知道他们的第三方脚本真实的执行情况，以及这些脚本会如何影响他们的网页。

 

　　5.教育接触网页的每一个人

　　有这么多的人——从企业老板到市场营销人员——他们的决定会影响页面的执行。所有这些人都需要知道，他们做的每一个决定——从实施新的第三方插件到使用GIF动画作为一个标志性图片——都是有影响的。

 

　　6.了解页面大小和复杂性对你的业务的影响

　　你还必须了解页面大小和复杂性对加载时间的影响。一旦你将页面大小，复杂程度，速度和业务性能之间的点连接起来，那么知道往哪里投入优化的力量就会容易得多。如果你刚进入这个领域，那么不妨读一读我写的这篇关于web性能及其对业务指标的影响的简短文章。当然如果你同我一样，正疯狂致力于案例研究，那么Tim Kadlec和我最近还发布了WPO统计，一个显示性能和业务成功之间相关性的研究型存储库。