根据某网站来做一个WordPress网站性能优化实例

文章目录[隐藏]

现在流行的说法都是百度谷歌开始抛弃打开速度慢的网站了，但是对于网站速度的问题，影响因素有很多的，但是一个网站的性能问题却是绝对的，一般来说网站打开速度快的网站性能不一定好，但是网站性能比较好的网站速度也不会差到哪里去，今天借助我的友链的一个网站，来分类剖析网站性能优化的那些问题。

前言

Gtmetrix.com是一个在线检测网站性能的工具，这个是 WordPress 官方推荐的网站，该网站只需要输入你的网站首页既可以对你的网站做一次彻底的身体检查，该网站是使用谷歌的PageSpeed和雅虎的Yslow来检测网站性能的，关于这两个工具的更多细节，大家可以百度一下，谷歌两下，这两个工具在网站溪能检测领域具有非常高的权威，云落是经常使用Gtmetrix.com来做网站性能检测。

规则

看上图，网站性能根据排序，分为 A/B/C/D/E/F，A 最好，后面的反之，因为是来自加拿大的测试服务器，所以加载时间这些我们不看，没有参考价值，我们主要看 pagespeed 和 yslow 这两个标签，下面的推荐项目，分数，类别，优先级，下面我们具体的分析下这个网站的问题。

PageSpeed 分析

我们先来看一下 PageSpeed 的具体分析报告，看下图

下面开始具体的每条进行分析和解决。

Enable gzip compression

这个意思是需要启用 Gzip 压缩，减少从服务器发送的文件的大小，以增加传输到浏览器的速度。

如何检查自己的网站有木有进行 gzip 压缩，可以使用下面这个网站试试：
站长直接 Gzip 检测
关于如何开启 Gzip,115 遇见有一篇很全面的文章

http://www.511yj.com/wordpress-seo-gzip.html

另外云落再添加一种，在 wp-config.php 文件添加下面代码也可以

define( 'ENFORCE_GZIP', true );

Leverage browser caching

这个就是开启浏览器缓存，我们都知道缓存一般分为服务器端缓存和客户端缓存【也就是浏览器缓存】，用户打开一次我们的网站就会从我们的服务器下载若干静态资源，我们应该让下载到客户浏览器缓存里面的文件继续使用，不需要压力重复从服务器里面下载文件。

解决办法也很简单，只需要在服务器 htaccess 文件里面添加下面代码【云落自用的】

## 文件缓存 ##
<FilesMatch ".(html|gif|jpg|jpeg|png|ico|js|css)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

其实这一个项目和雅虎的一个项目很相似的，下面说道再说。

Optimize images

这个项目很简单，就是优化图片而已，一般是 jpg 和 png 图片，如果你不会优化的直接点击右侧的optimized version，可以直接下载压缩版本的。

关于图片压缩，其实有很的解决办法：

方法一：就是使用本地的图片压缩软件批量压缩之后再上传，使用下面这个工具就可以做到

Antelope：优秀的图片压缩工具推荐下载

文章目录[隐藏] 前言软件介绍软件使用后语相关链接 Antelope 是一款非常不错，简单的图片压缩软 […]

方法二：安装图片优化插件，这里推荐云落正在使用的 re sumsh it，也是云落修改优化之后的版本

百度网盘

Specify image dimensions

给图片指定尺寸，简单说就是省去浏览器的麻烦，就是说如果你给一个图片指定了尺寸，浏览器就会直接按照你指定的去显示图片，如果没有指定的话，浏览器回去自己检查图片尺寸，然后根据实际情况再显示图片，这个无形之中就是增加了浏览器的负担，毕竟浏览器的主要任务是渲染整个页面。

我们来举个栗子：

<img src="xxoo/xxoo.jpg">

这段代码是高速浏览器，这里有一个突破，地址 xxooxxoo，至于尺寸没有标明，那么需要浏览器自己检测这个图片了

<img width="250px" height="250px"  src="xxoo/xxoo.jpg">

后面这句告诉浏览器，这里有个图片，地址 xxooxxoo，尺寸是 250*250，那么浏览器会直接按照你写明的尺寸进行展示，这个无形之中就帮助浏览器减轻了负担，版浏览器减轻了负担，不就是加快了网页的展示了嘛！

Minify JavaScript

压缩 js 文件，这个很好理解，很多 js 教程教你怎么使用的时候，给你的经常是未压缩版本，主要是为了方便给你二次开发的，但是你开发完毕投入使用的时候，请注意要进行压缩一下，方形，正常的压缩是不影响使用的，比如 jQuery 就是的。

下面推荐个 js 压缩工具，当然，你压缩完一个文件之后要检测下相关功能是否受到影响。
js 在线压缩

Specify a cache validator

设定一个缓存验证，有的插件或者主题会使用.css.php 或者 js.php 动态的加载静态文件，这个就导致浏览器没发正确的获得缓存验证

其实自定义 css 代码并不需要这样加载，WordPress 自带的自定义里面就有加入自定义 css 的入口的，当然如果你非要使用 php 加载，也可以这样，下面代码加入 htaccess

<IfModule mod_headers.c>
    <FilesMatch ".(php)$">
        Header set Last-Modified "Tue, 31 Aug 2018 00:00:00 GMT"
    </FilesMatch>
</IfModule>

Minify CSS

压缩 css，这个道理和上面的压缩 js 一样的，压缩无用代码，减少文件大小，加快加载嘛

同样的，我们也可以使用在线工具去压缩，这里推荐个：

在线压缩 CSS 工具

Remove query strings from static resources

移除静态文件的查询符，简单说静态文件的链接里面不能带有？问号的，关于这个针对这个站点我们分两步看。

第一步：接触缩略图里面的问号，由于这个站点缩略图使用的 timthumb 方案，可以采用七牛，又拍，OSS 等云存储的解决方案，采用图片处理+自定义图片样式名就可以解决。
第二步，针对缩略图以外的查询符，我们可以使用下面这个方法来解决：

WordPress优化：禁用网站静态资源版本查询

文章目录[隐藏] 前言函数代码推荐阅读通过禁用 WordPress 静态资源的版本查询来实现 WordP […]

Specify a Vary: Accept-Encoding header

这个还是头部的问题，主要说我是不是可以压缩的，问题不大没设置也无妨

解决方法也简单，在 htaccess 文件放入下面代码

<IfModule mod_headers.c>
  <FilesMatch ".(js|css|xml|gz|html)$">
     Header append Vary: Accept-Encoding
   </FilesMatch>
</IfModule>

Enable Keep-Alive

启用 HTTP Keep-Alive 或 HTTP 持久连接允许相同的 TCP 连接发送和接收多个 HTTP 请求，从而减少后续请求的延迟。打个比方吧，你从卧室版一堆东西到客厅，是没开一次门都关上，还是搬完东西再关门？其实很好理解的
解决办法也简单，还是 htaccess 文件

<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>

Defer parsing of JavaScript

延迟加载 js 文件，简单说就是将 js 文件放在最后执行，放到 WordPress 里面就是加载 js 文件的时候需要这样执行

wp_register_script('default', get_template_directory_uri() . '/assets/js/global.js', false, '1.0', true );//底部加载
wp_enqueue_script('default');

Yslow 分析

雅虎的 Yslow 分析成绩也是挺惨的，但是问题比较集中

Add Expires headers

给静态文件添加过期头，其实这个问题和之前说过的浏览器缓存是一个道理的，也可以直接使用上面的代码

云落这里也可以提供一份完整一点的，其实都差不多

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On 
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

Make fewer HTTP requests

减少 http 请求，简单说将一些不必要单独存在，经常是一起运行的静态文件合并到一起

js 请求有 20 个，css 请求有 9 个，不要忘了，还有若干图片请求。。。。。。

Use a Content Delivery Network (CDN)

这是让你使用 cdn 的，关于 CDN 其实说的很多，但是经常有人问我：用了 XXX 怎么感觉没快，反而慢了？使用 XXX 加速是真的吗？怎么没有感觉到？总之各种问题。

关于 CDN 我这里简单的做个比喻，平时我去打酱油都去小区大门口的大超市，没事都要跑大半个小区，突然有一天我们楼下开了个小店，我现在直接去楼下小店打酱油，你说，去门口超市打酱油速度快还是去楼下打酱油速度快？道理是明显的。

Use cookie-free domains

简单说就是使用一些不带 cookie 的域名来专门做静态文件的传输，其实上还是 CDN 的问题，解决了 CDN 也就解决了这个。

Reduce the number of DOM elements

减少 DOM 元素的数量，这里没有好的办法，只能从 WordPress 主题下手了，这个需要你有一定的技术了。

按需加载

按需加载这个是云落后加的，这个是一种思路，而不是具体方法，简单说，当前页面不需要的都应该被禁止加载，我这里简单的举例说明：
第一：图片弹窗
一般来说图片弹窗会应用于文章页，首页使用这个功能的很少，所以关于图片弹窗的 js 和 css 都应该安排在文章页加载，简单来说就是做个is_single()的判断而已。
第二：代码高亮
同上一般来说代码高亮同样是运用在文章页的，但是很多代码高亮插件为了考虑兼容性，在首页同样加载相关 js 和 css 文件，那么同样应该被挪移到文章页。
第三：短代码
云落很喜欢使用短代码，但是使用短代码也会加在一些代码，并且并不是每篇文章都会使用某个短代码，如果直接加载了相关资源，是不是有点浪费？我们可以通过判断短代码是否存在来加载资源。举例：

function secret_css() {
	global $post;
			if ( has_shortcode( $post->post_content, 'secret') || has_shortcode( $post->post_content, 'vip')  ){
    echo '<style type="text/css">.wxpic{float:left;width:18%}.wxtips{color:#32B9B5;float:left;width:72%;padding-left:5%;padding-top:0;font-size:20px;line-height:150%;text-align:left;font-family:Microsoft YaHei}.yzts{margin-left: 40px}@media (max-width:600px){.yzts{margin-left:5px}.wxpic{float:left}.wxbox #verifycode{width:35%}.wxbox #verifybtn{width:22%}.wxpic,.wxtips{width:100%}.wxtips{font-size:15px;padding:2px}}</style>';}}
add_action('wp_head', 'secret_css');

第四：后台资源
很多文都说 WordPress 后台也很卡，我可以详细的看看后台有木有多加载资源，我们一般可以根据当前所在页面来加载一些必要的资源。