今天优化网站速度出现的一些问题

js加载不当出现的一些错误 1.js文件的加载可能滞后与页面中的js代码,所以代码都应该在document.ready中执行,可能出现错误。 2.使用ajax代码加载js文件,则可能滞后于document.ready执行,可能出现错误。 没有404页面出现的问题 1.通过firebug发现,页面加载里面有两个 网站根链接 liangpeng.net 貌似网站加载的两遍一样,而且每次加载时间都不短,严格排查原来是某个插件引用的一个css文件不存在,而且网站没有进行404处理,导致重定向到了主页。

关于网站加载速度的优化,请参见 WordPress 提速一二三 写得比较使用,相比其他诸如减少数据查询类文章要好很多,可以一观。 下面是我认为对我有用的非废话内容:

转自:北极冰仔 http://hellobmw.com/archives/tips-for-wordpress-speed-tweak.html

压缩 CSS 和 JavaScript

1. 清理 CSS CSS 可以在线使用 CSSTidy 清理一下,可以减少很多不必要的冗余(如:空格、换行等等),尤其在选择“最差可读性”之后,整个 CSS 文档内容压缩为一行。但清理前请务必备份原始 CSS 文件,一是为了方便以后修改,二是有些选项使用不当会完全破坏 CSS。强烈建议使用最保守的清理方式。

2. 打包 JavaScript JavaScript 脚本可以使用 packer 压缩,去除空格、换行后变为一行;勾选 Base62 编码将会压缩为更小的格式,但如果接下来你还想继续使用 gzip 进一步压缩 JavaScript,不推荐 Base62,实践证明普通 packer + gzip 才是最佳拍档。

3. 使用 gzip 进一步压缩 Gzip 是一种非常优秀的压缩方式,详细信息可以自行阅读 gzip home。使用 gzip 压缩 CSS 和 JavaScript 需要服务器支持 gzip,压缩 CSS 的方法与压缩 JavaScript 的方法基本是一样的,注意把 Content-Type 设置为 text/css。这里还运用了另外一个提速的技巧:强制性的浏览器缓存

尽量减少 HTTP 请求数

HTTP 请求是很费时间的,主要花费(浪费)在建立连接的过程中。真正传输 1K 和 10K 数据的时间相差无几,但哪怕你请求的是一个仅有几字节的东东,一样需要花费可观的连接时间。

CSS SpritesInline Images with Data URLs 就可以帮上大忙了。

CSS Sprites 的思想是把很多张小图片(如:图标)整合为一张大图,再利用 CSS 的 background-position 属性在正确的地方显示正确的图标。这样的好处就是把原来的 n 个 HTTP 请求减少至 1。

Inline Images with Data URLs 的思想是干脆直接把装饰性的小图片写在 CSS 或 HTML 中,不需要 HTTP 请求。当然不能直接在文本中写二进制的 0101,但经过 base64 编码后就可以了。基本的用法是:

data:[<mediatype>][;base64],<data>
例:

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" width="16" height="14" alt="embedded folder icon" />
可以借助 PHP 来生成 base64 的图片内容:

<?php echo base64_encode(file_get_contents("../images/folder16.gif")) ?>
那么 CSS 就可以写成下面的样子:

background: url(data:image/gif;base64,<?php echo base64_encode(file_get_contents("../images/folder16.gif")) ?>) top left no-repeat;
Inline Images with Data URLs 的局限:

  • IE 5-7 不支持,IE 8 据说会支持。为了兼容 IE,把这些部分单独写入 IE 专用的 CSS 文件中。具体可以查看本站使用的两个样式表。
  • 文本形式的图片占用比二进制更多的字节。Base64 格式比二进制大 39%~45%,在 gzip 压缩后,这个比例减小至 8%~9%。最好在 base64 编码之前优化图片本身。
  • 浏览器对 inline 图片有大小限制。Opera 最大支持 4,100 字节,Firefox 最大支持 100K。所以最好只应用在小图片上。目前本站在 6 个小图片上使用了该技巧。 补充一点:CSS SpritesInline Images with Data URLs 是可以同时使用的。