网页监控中所学到的

每半年我会看一看一些来自于 HTTP Archive 的要害计算资料——HTTP Archive 是一个十分棒的历史数据存储库，首要关于国际上访问量最大的五十万个网站的规划和构成。

正值 Archive 接近四周年之际，我想盘点一下曩昔的四年时刻里产生了什么改变，有哪些坚持不变，以及我在观看这些数据向上蠕变的进程中学到了哪些东西。

现在均匀网页 2219 KB，而四年前只需 991 KB

上一年春天均匀页面就跨过了 2 MB 大关，到达 2099 KB。现在的网页均匀比一年前大 16％，比四年前大 139％。

在曩昔的六个月时刻里，页面的均匀规划又增长了 120 KB。对这样的改变，咱们很简略忽略不计。究竟这又不是什么大不了的作业，对吧？戋戋 120 KB 远还没有到达咱们需求忧虑的程度。不过，这个数值代表了：更多的页面资源（如图画，CSS 文件，以及各种脚本），更多的页面杂乱性，以及更多的功用毛病危险。想要了解更多的话，请持续往下看。

图画占均匀页面分量的 64％

这现已不是什么不为人知的信息了。自从我盯梢了 HTTP Archive 之后，我就发现图画至少构成了均匀网页的 60％。

让人难以想象的是，图画的增长速度十分之快：总的图画负载在短短四年间添加了一倍都不止。更难以想象的是，现在光是图画的页面分量就超过了两年多前的均匀整个网页。

可是，规划并不代表全部

上个月，Nate Berkopec 写了一篇极好的博客文章，在文中他尖锐地址破了为什么假如你只重视页面分量的话，就会犯错。他这样写道：

隐秘就在于“页面分量”——页面分量被广泛地界说为一个页面的总文件巨细以及它所有的子资源（图片，CSS，JS 等）——但这并非问题的地点。尽管带宽不是问题，但网页功用不会跟着宽带接入变得愈加遍及而进步。

问题在于推迟。

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

我从前写过一篇关于为什么更多的带宽并不是处理功用问题的万能钥匙的文章，我的文章聚集于一个现实，即很多人不明白为什么双倍的带宽不等于快一倍。

Nate 的帖子突出了另一个问题：只需时延仍是一个功用问题（也就是说，趋向于永久），首要的功用首恶将仍然是这样一个现实——当时典型的网页包括的一百个左右的资源被保管在几十个不同的服务器上。这些网页中的许多资源都是未经优化的，不行测的，不受监督的——因而也无法猜测。

作为一个伪实例，让咱们来看一看自界说字体的忽然添加。经过 HTTP Archive 的盯梢，咱们能够看到，在短短的几年时刻里，自界说字体现已从几乎只占网站的7％，到称雄了网站的一半以上。

自界说字体对规划师而言一个巨大的福音。它能够让你彻底操控品牌的视觉本钱，这在商场中可不是一件微乎其微的作业——品牌从未像现在这样重要。可是，当你的自界说字体施行欠安或外部保管的时分，反而或许会引进功用阵痛——从会导致恼人输出信号（无款式的文字闪耀）的缓慢字体，到会彻底阻挠页面其余部分加载的不呼应的字体。

而自界说字体仅仅资源中的一种。此外还有款式表，JavaScript，以及几十个或许剩余的第三方标签。最好的状况是，这些资源仅仅逐步添加了总的推迟时刻。最坏的状况是，它们会给你的网页引进潜在的单点毛病。

那么……你能做些什么呢？

1. 为页面设置功用预算

许多快速的网页都有一个共同点，那就是：巨细最多约 1 MB（或更少）。并非偶然的是，1 MB 正是许多公司正在树立的“功用预算”中为他们的网页设置的最大值。这可不是为了让页面更小——而是为了逼迫自己优化出现在网页上的资源，并做一些战略性的优胜劣汰，以便于让网页变得更简略，然后削减推迟。假如你还不了解关于功用预算的思路，Tim Kadlec 撰写了一些十分棒的文章，指出了为什么你需求功用预算以及你应该盯梢什么样的目标。

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 计算，一个显现功用和事务成功之间相关性的研讨型存储库。

译文链接：
英文原文：