文档章节

网页性能

0000001
 0000001
发布于 2014/05/29 14:53
字数 1082
阅读 39
收藏 1

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 的测试,也会详细列出各个项目的成绩,给出改善的建议。


本文转载自:http://shun.im/21431

共有 人打赏支持
0000001
粉丝 34
博文 141
码字总数 46256
作品 0
朝阳
前端工程师
私信 提问
测试网页打开速度的18种专业方法

网站的加载速度是决定网站等级的重要因素,值得站长特别关注。原因很简单,没有人愿意为了打开一个网页而等老半天,换句话说,如果你的网站打开速度 很慢,将流失大量的访客,甚至出现多米诺...

james_laughing
2016/12/14
76
0
《前端之路》之 网页生成的过程及对性能的影响

11: 网页生成的过程及对性能的影响 网页生成的过程 网页生成过程,大致可以分成五步 在这五步里面,第一步到第三部都非常快,。 重排和重绘 网页生成的时候,至少会渲染一次。而我们需要关注...

SmallW
2018/08/13
0
0
网页增重不可控?试试 OneAPM Cloud Test

再次发生了!HTTP Archive 报告在收集了 50 万个最受欢迎的网站的技术信息,经过整理分析后指出:2015 年,网页的平均「体重」增加了 16%,达到了 2,262 KB,近似于 2014 年的增长幅度。 注:...

OneAPM蓝海讯通
2016/01/25
23
0
如何加速响应式网站的速度

响应式网站设计主导已经有一段时间。如果你打算设计一个网站,选择建立一个本质上响应式的网站是你需要抉择的。尽管响应式的网站有性能问题,但这些可以通过小的调整、压缩和图像大小调整来解...

oschina
2013/09/05
1K
0
移动网站速度一年提升30%:浏览器改进为主因

新浪科技讯 谷歌首席网络性能工程师史蒂夫·苏德斯(Steve Souders)称,根据谷歌分析(Google Analytics)服务追踪的数据,移动浏览器的网页加载速度比一年前快了30%。 苏德斯还称,对桌面浏览器...

oschina
2013/05/12
2K
2

没有更多内容

加载失败,请刷新页面

加载更多

大数据教程(11.9)hive操作基础知识

上一篇博客分享了hive的简介和初体验,本节博主将继续分享一些hive的操作的基础知识。 DDL操作 (1)创建表 #建表语法CREATE [EXTERNAL] TABLE [IF NOT EXISTS] table_name [(col_name ...

em_aaron
今天
0
0
OSChina 周四乱弹 —— 我家猫真会后空翻

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @我没有抓狂 :#今天听这个# 我艇牛逼,百听不厌,太好听辣 分享 Led Zeppelin 的歌曲《Stairway To Heaven》 《Stairway To Heaven》- Led Z...

小小编辑
今天
1
0
node调用dll

先安装python2.7 安装node-gyp cnpm install node-gyp -g 新建一个Electron-vue项目(案例用Electron-vue) vue init simulatedgreg/electron-vue my-project 安装electron-rebuild cnpm ins......

Chason-洪
今天
3
0
scala学习(一)

学习Spark之前需要学习Scala。 参考学习的书籍:快学Scala

柠檬果过
今天
3
0
通俗易懂解释网络工程中的技术,如STP,HSRP等

导读 在面试时,比如被问到HSRP的主备切换时间时多久,STP几个状态的停留时间,自己知道有这些东西,但在工作中不会经常用到,就老是记不住,觉得可能还是自己基础不够牢固,知识掌握不够全面...

问题终结者
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部