- 前言
- 规则
- PageSpeed 分析
- Enable gzip compression
- Leverage browser caching
- Optimize images
- Specify image dimensions
- Minify JavaScript
- Specify a cache validator
- Minify CSS
- Remove query strings from static resources
- Enable Keep-Alive
- Defer parsing of JavaScript
- Yslow 分析
- Add Expires headers
- Make fewer HTTP requests
- Use a Content Delivery Network (CDN)
- Use cookie-free domains
- Reduce the number of DOM elements
现在流行的说法都是百度谷歌开始抛弃打开速度慢的网站了,但是对于网站速度的问题,影响因素有很多的,但是一个网站的性能问题却是绝对的,一般来说网站打开速度快的网站性能不一定好,但是网站性能比较好的网站速度也不会差到哪里去,今天借助我的友链的一个网站,来分类剖析网站性能优化的那些问题。
前言
规则
PageSpeed 分析
我们先来看一下 PageSpeed 的具体分析报告,看下图
下面开始具体的每条进行分析和解决。
Enable gzip compression
如何检查自己的网站有木有进行 gzip 压缩,可以使用下面这个网站试试:
站长之家网页 GZIP 压缩检查
Leverage browser caching
解决办法也很简单,只需要在服务器 htaccess 文件里面添加下面代码
- Apache
## 文件缓存 ## <FilesMatch ".(html|gif|jpg|jpeg|png|ico|js|css)$"> Header set Cache-Control "max-age=2592000" </FilesMatch>
- Nginx
#图片缓存 30 天 location ~ \.(jpg|png|jpeg|gif|ico)$ { expires 30d; } #js css 缓存一小时 location ~ \.(js|css)$ { expires 1h; }
当然,JS 和图片如果储存在 CDN 了就不用设置了
Optimize images
Tips:关于图片压缩,有很多的解决办法
- ①:使用本地的图片压缩软件(如 Antelope)批量压缩之后再上传
- ②:安装图片优化插件 (如 re sumsh it)
Specify image dimensions
Minify JavaScript
下面推荐个 js 压缩工具,当然,你压缩完一个文件之后要检测下相关功能是否受到影响。
JS 在线压缩
Specify a cache validator
设定一个缓存验证,有的插件或者主题会使用.css.php 或者 js.php 动态的加载静态文件,这个就导致浏览器没发正确的获得缓存验证
Minify CSS
压缩 css,这个道理和上面的压缩 js 一样的,压缩无用代码,减少文件大小,加快加载嘛
同样的,我们也可以使用在线工具去压缩,这里推荐个:
在线压缩 CSS
Remove query strings from static resources
移除静态文件的查询符,简单的说就是静态文件的链接里面不能带有问号的,问题不大没设置也无妨
Enable Keep-Alive
启用 HTTP Keep-Alive 或 HTTP 持久连接允许相同的 TCP 连接发送和接收多个 HTTP 请求,从而减少后续请求的延迟。打个比方吧,你从卧室版一堆东西到客厅,是没开一次门都关上,还是搬完东西再关门?
Defer parsing of JavaScript
Yslow 分析
雅虎的 Yslow 分析成绩也是挺惨的,但是问题比较集中
Add Expires headers
给静态文件添加过期头,其实这个问题和之前说过的浏览器缓存是一个道理的,也可以直接使用上面的代码
Make fewer HTTP requests
js 请求有 20 个,css 请求有 9 个,不要忘了,还有若干图片请求。。。。。。
Use a Content Delivery Network (CDN)
这是让你使用 cdn 的 ,根据自己情况,特别是像国内阿里云腾讯一样的默认只给 1M 带宽的,你懂的!
Use cookie-free domains
简单说就是使用一些不带 cookie 的域名来专门做静态文件的传输,其实上还是 CDN 的问题,解决了 CDN 也就解决了这个。
Reduce the number of DOM elements
减少 DOM 元素的数量,这里没有好的办法,只能从 WordPress 主题下手了,这个需要你有一定的技术了。