如何让页面加载感觉更快？

Question

我想减少我的页面加载和显示所花费的时间，假设我从一个空的浏览器缓存开始，并且页面在 html 文件中可能有也可能没有内联 css 和 javascript。 更改文件发送到浏览器的顺序会减少显示时间，从而使页面加载速度看起来更快吗？

例如，如果一个页面有一些 .css、.js、.png 文件等，是否会先加载 css，显示速度更快？

是否有标准/特定顺序来加载文件类型？

Answer 1

以下几个步骤可以优化 web 页面的性能。

• 将 css 放在顶部。

• 将 javascript 放在底部。

• 缓存一切。

• 设置远期到期 header。

• 适当时返回 304。

• 将唯一的 url 用于 css 并使用 js 传播更改。

• 除此之外，在需要时使用ajax 。

Answer 2

当心太多的 HTTP 连接。 建立 HTTP 连接需要时间，如果您的 HTML 文件中链接了很多元素，它很容易耗尽加载时间。

如果你有很多小图标、字形等，将它们组合成一个精灵，这样只加载一个图像。 例如，Facebook 使用了 sprite 技术 - 如果您检查它加载的图像，您会发现这一点。

您还可以将 CSS 个文件合并为一个文件 - 与 Javascript 个文件相同。

此外，如果您有 JavaScript 在加载时影响页面内容，请确保使用在 DOM 准备就绪时通知您的事件，而不是等待直到所有资源都不会触发的主体load事件，例如作为图像，加载了 CSS 个文件、JavaScript 等。

Answer 3

js 文件会阻止页面加载，直到它们被执行。 如果可能，包括那些在关闭正文之前的内容

Answer 4

雅虎对此有很好的文章。

http://developer.yahoo.com/performance/rules.html

Answer 5

首先确保您的虚拟主机商没有慢速服务器。 这可能发生在非常便宜的共享网站虚拟主机上。 你应该检查你是否从你的 html output 中删除了所有不必要的东西。你可以检查你的内容是动态的还是 static。如果它是动态的，尝试将它转换为 static 内容。

在某些情况下，您可以简单地激活 CMS 的缓存功能，这也有助于更快地发送网站内容。 只是在慢速连接上，最好使用 gzip 压缩 output stream。但这会花费时间。 服务器和客户端都必须压缩/解压缩。 你也必须检查一下。

如果您使用 javascript 并且执行被延迟，您也可以使用ready事件在加载 html 文档（而不是所有图像等）后执行 javascript，就像使用 document.onload 事件一样。

Answer 6

您可以使用一些技巧来节省页面加载时间：- CSS图像精灵而不是为每个目的调用每个图像这将最大限度地减少您网站的 HTTP 请求，从您的HTML 标记和CSS中删除不必要的 div 标签或不必要的代码

我们可以通过CSS获得良好结果的地方，因此我们不应该在那里使用Jscripts 。 应该始终保持干净的 HTML 标记，没有任何不敬的代码。

合并文件是一种减少 HTTP 请求数量的方法，方法是将所有脚本合并到一个脚本中，同样将所有 CSS 合并到一个样式表中。 当脚本和样式表因页面而异时，合并文件更具挑战性，但将这部分作为发布过程可以缩短响应时间。

Answer 7

解决方案原来很简单，将所有不同的文件组合成一个大文件并使用 zip 压缩该文件。不幸的是，如果您手动执行此操作，您将遇到维护问题。 该单个压缩文件不再可编辑。 因此，在编辑了其中一个原始源文件后，您必须将其与其他文件重新组合并重新压缩。