文档章节

网页性能

0000001
 0000001
发布于 2014/05/29 14:53
字数 1082
阅读 35
收藏 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
粉丝 35
博文 141
码字总数 46256
作品 0
朝阳
前端工程师
测试网页打开速度的18种专业方法

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

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

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

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

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

OneAPM蓝海讯通
2016/01/25
23
0
移动网站速度一年提升30%:浏览器改进为主因

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

oschina
2013/05/12
2K
2
关于加载本地加载ga.js文件的问题

Google Anlytics 分析代码是异步加载的,一般来讲不会影响网页性能,但是技术部的网页性能报告里老是提到ga.js的状态为Aborted,说明ga虽然是异步跟踪,但某些情况下对网页性能与加载时间确实...

我叫leo-
2016/03/29
248
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7防火墙firewalld操作

firewalld Linux上新用的防火墙软件,跟iptables差不多的工具。 firewall-cmd 是 firewalld 的字符界面管理工具,firewalld是CentOS7的一大特性,最大的好处有两个:支持动态更新,不用重启服...

dingdayu
今天
1
0
关于组件化的最初步

一个工程可能会有多个版本,有国际版、国内版、还有针对各种不同的渠道化的打包版本、这个属于我们日常经常见到的打包差异化版本需求。 而对于工程的开发,比如以前的公司,分成了有三大块业...

DannyCoder
今天
2
0
Spring的Resttemplate发送带header的post请求

private HttpHeaders getJsonHeader() { HttpHeaders headers = new HttpHeaders(); MediaType type = MediaType.parseMediaType("application/json; charset=UTF-8"); ......

qiang123
昨天
3
0
Spring Cloud Gateway 之 Only one connection receive subscriber allowed

都说Spring Cloud Gateway好,我也来试试,可是配置了总是报下面这个错误: java.lang.IllegalStateException: Only one connection receive subscriber allowed. 困扰了我几天的问题,原来...

ThinkGem
昨天
27
0
学习设计模式——观察者模式

1. 认识观察者模式 1. 定义:定义对象之间一种一对多的依赖关系,当一个对象状态发生变化时,依赖该对象的其他对象都会得到通知并进行相应的变化。 2. 组织结构: Subject:目标对象类,会被...

江左煤郎
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部