网页性能
博客专区 > 0000001 的博客 > 博客详情
网页性能
0000001 发表于4年前
网页性能
  • 发表于 4年前
  • 阅读 34
  • 收藏 1
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

摘要: 网页性能

YSlow 和 Page Speed 优化

WordpressYSlow 和 Page Speed 是两款知名的网页性能分析工具,可以对你的页面载入效率进行打分,并给出改进性能的建议。

很多做主题的朋友都会参照这两项进行优化,并分享改进的经验。

那我也赶下潮流,稍微花了些时间,把 YSlow 和 Page Speed 的分数都提高到了 A 级,当然这只是首页的成绩。

晒测试成绩

成绩如图:

YSlow 和 Page Speed 优化

测试的项目为全部,也就是 YSlow 23项、Page Speed 28项。
Use a Content Delivery Network (CDN) 这一项基本是 0 分,嘛,小网站无视。
另外还有一些图片缩放、CSS 选择器部分导致扣分。

如何提高 YSlow 和 Page Speed  的分数

其实也不难,下面从几个常见的方面说说怎么提高等级。大多来自朋友们分享的经验。

减少页面文件大小

  • 优化图片:压缩体积,减少使用缩放的图片

  • 压缩 CSS  和 JS 文件

减少 HTTP 请求数,减少 DNS 查询

Http 请求数当然是越少越好,这方面的优化也很简单:

  • 合并 JS 、CSS 文件

  • 给背景图片做 CSS sprite

  • 不要外链太多其他域名的文件

Use cookie-free domains

Use cookie-free domains 这一项对分数影响很大,建议折腾。

当浏览器向服务器请求一张静态的图片前,会先发送同域名下的 cookie,服务器对于这些 cookie 不会做任何处理。因此它们只是在毫无意义的消耗带宽。所以你应该确保对于静态内容的请求是无 cookie 的请求。

wp-config.php 加入
define('COOKIE_DOMAIN', '你的博客域名');

这样你的所有子域就 Cookie-free 了,然后用子域名来作图床是很好的选择。
对于不加 WWW ,而是直接用顶级域名的,那么上面设置之后,子域名还是会带 Cookies,只能用另外的域名做图床了。

Add Expires headers

Expires   header,就是过期时间的header报文。这个文件过期时 间,其实就是通过header报文来指定特定类型的文件在浏览器中的缓存时间。有些文件(例如样式表中调用的背景图片和文章中调用的图片)其实在很长一段 时间内我们都不会对它们有什么改变,这类文件可以设置非常长的缓存时间,这样浏览器以后就不需要再从服务器下载这些文件而直接从缓存中读取,从而大大加速 网站的载入速度。

这个我们只要在 .htaccess 文件添加几行代码即可。
# Expire images header
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000

Configure entity tags (ETags)

.htaccess 中添加:
FileETag none

其他方面的优化

  • 尽量不使用内嵌脚本、样式,应从外部加载

  • 把 CSS 文件放在源代码的开头,把 JS 放在页面底部加载

  • 优化 CSS 选择器(网页分析其实部分目的也是为了提高这方面的技巧)。

  • 开启 Gzip ,这方面插件和代码的实现方法都有很多,有的主机控制面板还可以直接设置。

  • 使用缓存插件(Hyper Cache、WP Super Cache 等)、数据库缓存插件(WordPress Object Cache、DB Cache Reloaded 等)

参考资料

以前把相应的链接放在了文章每段中,都有同学反映说我没给出方法。。。
囧,难道是因为链接样式不显眼么。这次试试单独放一段。

感谢这几位博友提供的经验。

Gtmetrix:在线测试 YSlow 和 Page Speed

YSlow 和 Page Speed 都是基于 Firebug 的插件,使用 Firefox 的朋友就方便了,直接装扩展即可。

A.shun 这里用来测试的是在线网页性能分析工具 Gtmetrix,同时进行 YSlow 和 Page Speed 的测试,也会详细列出各个项目的成绩,给出改善的建议。


标签: 网页性能 Yslow
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 35
博文 140
码字总数 46256
×
0000001
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: