快速加载网页的理想页面大小是多少？

首先，“页面大小”是什么？

页面大小是指呈现页面所需的所有元素的总和。 这包括 HTML 文件、CSS 文件、图像、脚本、多媒体……所有内容。 一般来说，**您的总页面大小应以 200k 为目标。** 另一个重要的指标是对象的总数（或 HTTP 请求总数）。 一个只有 100k 但有 92 个 HTTP 请求的页面可能比一个只有 21 个 HTTP 请求的 200k 页面更糟糕。

如何确定我的页面大小？

您可以查看页面使用的每个元素的文件大小并将其加起来。 幸运的是，有一种更简单的方法。 只需使用 网页速度报告，这是一项非常棒且免费的服务。 此服务不仅告诉您总页面大小，还提供不同互联网连接速度的下载时间，以及有关页面上可以改进的特定区域的提示/警告。 我最喜欢的功能是它按从大到小的顺序列出页面中的所有对象，因此您可以快速查看页面上哪些对象占用空间最大，并首先解决这些问题。

不同页面的堆叠情况如何？

CSS-Tricks 今天的页面大小为 217k，相对健康。 我觉得稍微偏重一点是可以接受的，因为我的很多受众都是技术娴熟的，并且很可能使用快速连接访问。

一个极端优化的优秀示例是 BBC.com。 他们的页面看起来与其他任何主要网站一样大、华丽且内容丰富，但他们的页面大小却只有 141k，非常精简。

Digg.com 不是您期望非常重的网站，因为它们实际上没有使用很多图像。 这是一个很好的例子，说明您需要注意的不仅仅是图像。 **Digg.com 上的前 14 个最大页面元素不是图像**。 Digg 使用 JQuery 和 Prototype javascript 库，它们分别是 85k 和 71k，是迄今为止最大的罪魁祸首。 这对 Digg 有影响吗？ 他们的页面加载速度慢吗？ 嗯，没有。 他们的服务器速度非常快，即使瓶颈在用户端，也能弥补这一差异。

请记住，页面大小会发生变化，尤其是在您的博客上。

在博客上，您的页面大小会有相当大的波动，因为某些文章会比其他文章更大，并且包含更多图像。 每次在文章中包含图像时，请考虑其优化程度。 即使是尺寸相对较小的 JPG 文件以最高质量保存，也可能达到约 100k。 这仅仅一张图片就占据了理想大小的一半！ 有关图像优化的更多信息，我有一篇关于 何时使用不同图像格式 的文章。 免责声明：自从我写了那篇文章后，我开始更多地使用 PNG-8 图像格式。 它非常棒，并且可以完成 GIF 大部分功能，而且文件大小更小。

并非总是页面大小的问题。

有时，页面大小并不是导致页面加载缓慢的唯一因素。 如果页面是动态的，则可能是数据库速度慢、未优化，或者数据库调用过多。 动态语言的代码也可能是罪魁祸首。 如果页面必须进行大量的计算和分析才能确定要显示的内容，则可能会遇到延迟。 在这些情况下，我有一个关于如何创建 CSS 页面加载器 的示例（此处示例）。