4

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

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

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

和 html/css/jquery 的一般提示？

欢迎所有建议...

谢谢你。

4

5 回答 5

4

使用Sprites可以更快地加载图像。使用它只需要你加入你的图像。CSS Sprite Generator可以帮助你。

如果你想给你的背景一次加载的错觉，请尝试使用隔行扫描的PNG。

于 2012-07-31T08:09:24.330 回答
0

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

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

尤其是在这里：

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

于 2012-07-31T08:10:28.543 回答
0

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

  • 减少请求的数量。您可以制作精灵并将所有图像放在一起。
  • 使用 APC 和其他缓存机制
  • 使用内存缓存
  • 阿帕奇缓存模块
  • 您可以使用Google 的modpagespeed。并充分利用它们。

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

于 2012-07-31T08:11:58.030 回答
0

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

于 2012-07-31T08:12:50.783 回答
0

适用于 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 标头
  • 指定缓存验证器
  • 指定字符集
  • 指定图像尺寸

    • 于 2012-07-31T08:14:26.230 回答