【问题标题】：Tips for a faster website [closed]更快网站的提示[关闭]
【发布时间】：2012-07-28 23:01:54
【问题描述】：

我想知道是否有任何提示和技巧可以让我的网站更快地加载？

例如，在我的网站中，我有 4 组背景图像，它们在悬停时会切换..
有没有办法在之前加载它们？
有没有一个 jquery 插件呢？

如果我在 php 中回显一个 div，其中包含我网站中的所有图像，但在 DOCTYPE 之前不显示任何图像。有用吗？

以及 html/css/jquery 的一般提示？

欢迎所有建议...

谢谢。

【问题讨论】：

如果您真的想要一个更快的网站，请简化它。不要添加许多千字节的 js。输出一些格式良好的 HTML 代码。浏览器要做的越少，它就会越快。用户必须下载的数据越少，下载速度就越快。你的答案是编写干净高效的代码——而不是求助于拐杖和创可贴。预加载图片不是一个坏主意，但它可能无法解决设计不佳的网站。
webmasters.stackexchange.com 呢？
查看此链接developers.google.com/speed/tools

标签： php jquery html css optimization

【解决方案1】：

适用于 Chrome 的 PageSpeed Insights

如果您下载适用于 Google Chrome 的插件，它会列出这些有助于加快网站速度的事实。

https://developers.google.com/speed/docs/insights/using_chrome

避免使用 CSS @import

在外部样式表中使用 CSS @import 会在网页加载期间增加额外的延迟。

避免元标记中的字符集

避免错误请求

将图像组合成 CSS 精灵

延迟解析 JavaScript

启用保活

启用压缩

内联小 CSS

内联小 JavaScript

利用浏览器缓存

使着陆页重定向可缓存

缩小 CSS

缩小 HTML

最小化重定向

最小化请求大小

优化图像

优化样式和脚本的顺序

首选异步资源

将 CSS 放在文档头部

从静态资源中删除查询字符串

从一致的 URL 提供资源

提供缩放图像

指定 Vary: Accept-Encoding 标头

指定缓存验证器

指定字符集

指定图像尺寸

【讨论】：

不错的未经授权的复制/粘贴，并删除了解释（其中一些建议在没有额外评论的情况下非常糟糕）。
@Quentin 当你做出这个断言时，我正在编辑它。我敢打赌，你也是反对它的人。仅发布 10 秒后。

【解决方案2】：

使用 Sprites 可以大大加快您的图片加载速度。使用它只需要你加入你的图像。 CSS Sprite Generator 可以帮助您。

如果你想给你的背景一次加载的错觉，请尝试使用interlaced PNGs。

【讨论】：

感谢您的帮助！如果我有几张中等大小的图片（网站的背景），最好有一张大的精灵图片吗？
如果您使用精灵，它将加快背景之间的切换。因此，虽然初始加载时间可能会稍长一些，但您的后续加载时间会很短。

【解决方案3】：

理解这一点的一种交互方式是在 firefox 上使用 Firebug 插件的 Y-Slow 扩展。该插件将评估您当前的网站，并在 CSS、压缩等方面为您提供适当的改进提示。

【讨论】：

【解决方案4】：

我认为你可以做一些事情。

减少请求数。您可以制作sprites 并将所有图像放在一起。
使用 APC 和其他缓存机制
使用memcache
Apache 缓存模块
您可以使用来自 Google 的 modpagespeed。并充分利用它们。

但我认为最好的方法是拥有一个具有良好结构的良好编程网站。然后意味着不要加载太多类，只加载你需要的类等等。在这里您可以查看设计模式。

【讨论】：

【解决方案5】：

我认为您可以在这里找到一些非常好的提示：

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

尤其是这里：

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

【讨论】：