超过 14,000 人参与了这个投票 ,我问了 **“您认为现代网页设计的合理页面大小是多少?”**
这是我简单地尝试将结果可视化。

最流行的观点是 500k 是一个不错的尺寸,可以保持在 22% 的投票率。 很少有人回应说超过 1 MB。 提供的三个最重的重量(1.5MB、2MB 和超过 2MB)加起来仅获得了 13% 的投票率。
换句话说:**87% 的人认为网站页面大小应该在 1MB 或以下。**
记录在案的是,CSS-Tricks(截至撰写本文时,v9 版本)在首次加载时约为 750k(平均 3 秒),在缓存重新加载时约为 100k(平均 1.5 秒)。 时间基于我相当平均的宽带连接。 我对此相当满意。 虽然我认为对于移动设备来说它太重了,如果我有更多时间,我会找到优化它的方法。
不用说,页面大小越小越好,因为需要传输到网络的信息越少,页面加载速度越快。 但当然,您的页面加载速度不仅仅取决于页面大小。 请求数量非常重要,就像读者 basitian 说的那样。
我不认为这仅仅是页面重量的问题。 从技术角度来看,您至少应该将重量和请求数量考虑在内。
当然,您的服务器处理它们的速度和用户的互联网连接速度也很重要。 请记住,考虑一下您的个人互联网速度与世界其他地区的用户的互联网速度相比如何(假设您的受众是全世界,如果这是一个网站,很可能就是这样)。 Jan-Marten de Boer 说
在我所在国家的大多数农村地区,只有 500kb/s 的 DSL 速度是常态。
在这篇文章的前面,我写道我的宽带“相当平均”。 在运行 快速速度测试 时,我获得了 21MB 下行和 6MB 上行。 这是 **Jan-Marten 的 40 倍**。 真是大开眼界,不是吗?
页面的加载方式是另一个需要考虑的因素。 阅读 Mike Hopley 的这条评论,他概述了 10 秒页面加载可能发生的四种情况。 有好有坏,最好的情况是在第一秒过去后,页面的文本内容已准备好阅读,并且页面的进一步加载不会打乱内容。 Jake Archibold 用另一种方式表达:“页面加载所需的时间不是真正的问题,真正的问题是页面交付用户想要的内容所需的时间。”
Dyn 的 Lara Swanson 也持有相同的观点。 她认为 200k 是一个更合理的目标,而且文档完成时间比页面完整加载时间更重要。
我并不关心文档完成后的异步代码的渲染,也不关心不会阻止用户阅读和使用页面的资源。
我认为最佳做法是在所有方面尽力而为,并尽一切努力提高它们。 减少页面大小。 合并或减少请求。 加强您的服务器并使用 CDN。 确保您的加载过程干净,没有太多重排。 尽可能延迟加载或异步加载。
总之,有一些 有趣的平均值 由 Google 的 Sreeram Ramachandran 在 2010 年整理(分析了 42 亿个网站)。
每个页面 44 个请求
7 个脚本
3 个样式表
29 张图片
总页面大小为 320k
此投票和所有帖子投票的完整实时结果位于 投票存档 中。
页面的速度不仅仅取决于资源。 除了速度较慢的浏览器外,还有速度较慢的计算机和手机,它们需要更长的时间来处理所有 CSS 样式和 JavaScript 代码。
我仍然认为 100kB 或更少是理想的。 仅仅因为我们这些参加投票的“网页设计师”拥有速度很快的电脑和网络连接,并不意味着我们的受众也如此。
@Xeoncross - 100KB 完全不合理。 如果你在 *设计* 东西,根本不可能保持这么低 - 除非你想把图片扔掉。
@Chriscoyier - 请记住,在速度测试中,兆位 [Mb](速度测试结果提供给您)小于兆字节 [MB]。 21Mb = 2.625Mb。 我认为 Jan-Marten de Boer 提到的是他在下载东西时实际看到的速度。
胡说。 如果愿意,人们可以设计出没有图片的漂亮网站。 用图片来增加页面的重量并不会让你成为更好的网页设计师。 好的设计是看不见的,如果图片增加了页面加载时间,那纯粹是糟糕的设计。
我是一名受过教育的平面设计师,我在网页设计工作中很少使用图片,而且会继续这样做,直到带宽不再是一个可访问性问题。 我的页面很少超过 100KB,人们很难说它们设计不好。
我同意 rob 的观点..如果你像 chris 那样强大地使用 css,就可以删除很多图片..Chris 做得很好..这个投票得出了有趣的结果..
@Rob - 我不是说不可能,我是说它不合理。
抱歉,我不同意你的观点。 我总是将我的页面保持在 100Kb 以下(实际上,我通常尝试保持在 50 Kb 以下),并且每个页面上会有 6 到 8 张图片。 自从拨号连接时代以来,我还没有改变我的页面构建技术。
我的互联网速度是可能的最快速度,3.9Mbps,这比澳大利亚大多数农村地区的网速都快,而我的大多数客户和他们的客户都来自这些地区。
在我的连接下,我不愿意等待一个加载速度慢的页面。
快速连接的用户在加载我的网站时会获得额外的好处,因为加载速度几乎是即时的,我相信这一点会得到他们的赞赏。
在我看来,加载缓慢的网站很烦人。 在设计方面,优化应该始终发挥重要作用。
如果你的受众不会停留下来观看加载,那么出色的设计有什么用呢?
非常感谢您进行这项调查。 我发现结果非常有趣。 我认为,除了“合理页面大小”之外,您还应该询问调查受访者他们自己的互联网连接速度。(我个人的家庭有线连接下载速度约为 700kb/s,3G 手机下载速度约为 1.5kb/s。) 我怀疑一个人认为“合理页面大小”与他/她可用的带宽之间存在很强的相关性。
500KB! 不久前,标准应该是现在的 1/10。
是的,但现在网络使用更多更重的代码 :) 并且预期的计算机规格也高得多。
我的下载速度为 650 kbps,上传速度为 320 kbps。 我居住地的唯一其他选择是 26 kbps(拨号)
@TheDoc 您的网站仅包含 54kB,但设计仍然很好。 我的网站根本不包含任何后端代码(完全基于 JavaScript),但它仅包含 92.7 kB 的 jQuery。 使用轻量级图像和雪碧,100kB 是完全可以实现的。 只有重量级的 JavaScript 应用程序或摄影网站需要超过几百 kB。
其他 95% 的内容型网站可以用 50-300kB 的资源来完成。
您是如何让您的页面如此 *快* 的? 真是太棒了! CSS-Tricks 在我的 1.8 GHz、1.25 GB 内存 iMac G5 上运行非常流畅,而且互联网连接很差。 真是太棒了!
我写了一篇关于 HTTP 请求重要性的文章,(http://wp.me/p1SZlG-3c)可能会成为另一个好的信息性投票,看看人们对它们的看法。
就我个人而言,我宁愿多 500 kb 的大小,也不愿多 15 个 HTTP 请求。
我知道这与主题无关,但在澳大利亚,我和许多其他人只有 150kb/s 的下载速度和 50kb/s 的上传速度.. 所以当你说到平均时,这就是我所期待的!
我以为只有我们印度人网速这么慢,还把它称为宽带 :)
我这里(印度最现代的城市之一)的最高速度是 2Mb(实际下载速度约为 200 kbps)。 我的网站如果在美国进行测试,可以在 2 秒内加载。 但是,google 页面速度显示平均时间为 100 秒(!!),因为大多数流量来自使用速度慢的连接的人,甚至包括拨号连接。
所以最终用户的机器的互联网速度非常重要。 继续优化..
如果我们说低于 100k 页面的网站是不可能的,那是因为我们把自己的利益放在首位(即优先考虑设计)。如果我们把用户放在首位(即优先考虑内容的易访问性),那么低于 100k 页面的网站就很容易实现。
这是真的,但我也要说大多数人确实欣赏美观的网站。大多数人更容易理解图片,而图片占用了很多空间。
网站过去只是文本,这对那个(短暂的)时期有效,但现在人们想要更多,更多意味着更大。想想所有图片密集型的网站,比如 Flickr,他们的首页就有 300k 的图片。制作只有文本的网站已经不再理想了。
如果您使用 Google Analytics,请在您的跟踪代码中包含以下内容:
_gaq.push([‘_trackPageLoadTime’]);
…您将在 Analytics 仪表板中看到页面加载时间的样本。每隔 20 个请求左右就会进行一次采样,它非常强大,可以查看跨地理区域的页面加载时间。
超过 2MB?7% 的人认为这不是一个严肃的建议。我认为 200-300KB 对用户(台式机和移动设备)来说是不错的。但除了小部件!;o)
21Mbps 的下载速度当然不是平均水平。;-) 加拿大最常见的宽带速度是 10Mbps 下行(有线)和 6Mbps 下行(ADSL)。比这更快的速度当然也可用,但普通家庭不会订阅。
我有一个 10Mbps 的理论连接速度,速度测试表明它通常只有 6Mbps 左右。真让人郁闷。;-)
我喜欢你这些调查总是比结论能引发更多讨论。;-) 结果刚出来,就有人指出,经过优化的重量较大的页面可能比没有优化的较小的页面加载速度更快!当然,很难创建一个能覆盖所有情况的调查(“可接受的页面加载时间”仍然会遇到“根据哪个标准,哪个国家的标准?”的困惑)。
“一个页面上多少个 HTTP 请求是可接受的?”然后又因为异步和同步请求、使用 CDN 分发某些资源等等而被颠倒过来。
啊,性能…
我认为这次调查很好。无论如何,无论多少个 HTTP 请求,我们肯定都有一個尺寸的門檻,超過這個門檻,我們就會感到不舒服。感谢您分享调查和结果。;-)
这些信息很有用。然后,采取一些措施来使网站快速加载也非常重要。我对这个很感兴趣,也很享受它。您可以看看我的网站,我写了第一本手册。它是用捷克语写的,但我希望这没问题。您可以使用 Google 翻译来查看它。让我们一起让网络更快!:)。
您在全球范围内的互联网连接速度相当好。在我的国家,平均速度约为 5 Mb/s (=125 kbps)。您在这里可以获得的最佳连接速度为 25 mb/s。(双 ADSL)我的所有家人和大多数朋友都使用 5 Mb/s 的线路。
移动互联网更糟糕,它的文档速度为 7 Mb/s,但如果您进行速度测试,它大约只有 2 Mb/s。我们经常在家也使用移动互联网,因为有线互联网要贵得多。
而且它靠近我们国家的最大城市。一家统计公司表示,在我们国家,80% 的互联网连接速度低于 2 Mb/s。
当然,在市中心有更好的线路(甚至 120 Mb/s),但对大多数人来说,没有比 DSL 更好的了。
所以,您甚至认为 750kb 并不多吗?
我同意大多数人的观点,500k 似乎是最佳选择。尤其是在大多数观众希望在外观漂亮的情况下尽可能快地获取信息的情况下,这可以通过良好的宽带连接来实现。
我认为我是那些投票支持超过 1MB 的人之一:网站的目的是什么?
如果您运营着一个摄影网站,那么每页都小于 500k 几乎是不可能的(不,在我看来,smush-it 不是一个选项,因为输出在我看来很糟糕)。
讨论很不错!
@Ferdy:感谢您的代码行!
我同意调查结果,但正如 Matteo 所说,一些内容丰富的网站,例如摄影网站、画廊,几乎不可能在 500k 以下创建。
而且,我很高兴你们所有人都有比我的地区更高的互联网带宽。最近,一些互联网服务提供商开始提供光纤,可以提供最高 5-6Mbps 的下行速度,但实际在我的国家最常见的是 256Kbps。我使用的是 1Mbps 的互联网线路!
感谢这些帖子和评论。
我只想再提一下关于“加载时间”的事情。带宽对 Google 来说是花钱的。因此,页面加载时间越长(超过 2 秒),Google 爬取这些页面的次数就越少,在 Google 搜索中更新结果的频率就越低。例如,一个好的加载首页是包含在 #SEO 安全工具包中的最佳实践之一。
我希望在阅读这篇文章之前就能看到它。页面加载速度会影响 SEO 吗?
Google 排名,是的,肯定会的
http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
页面渲染会影响 SEO 吗?当然会。这从 1990 年代就已经为人所知。参见 Jakob Nielsen
http://www.useit.com/alertbox/9703a.html.
但渲染时间,正如其他人提到的那样,不仅仅是页面重量。HTTP 调用(javascript、@font-face、预加载视频)通常比页面重量更能延迟页面渲染。