WP笔记

提升WordPress的运行速度的小方法

标题设置为提升WordPress的运行速度的小方法，因为这个问题高深的方法太多了，所以不谈Gzip、cache插件、主机、CDN之类相关的优化方法，只谈一些站内优化的个人经验，有些方法的效果还有待检验，有不对的地方请指正。

精简head信息

打开你的WordPress网站，看一看<head></head>之间的内容，究竟有多少javascript和css文件以及一堆有用的没用的meta标签出现？head标签过长不论对SEO还是网站加载速度都有不利的影响，精简的head信息不仅能减少蜘蛛爬行的阻力，还能减少http请求，加快网页载入速度。

作为一个精简head信息的优秀案例，请大家移步大前端，该网站head精简程度令人赞叹，只有如下所示几行信息

<head>
<meta charset="UTF-8">
<meta content="width=device-width" name="viewport">
<title>大前端-记录前端的那些事儿！</title>
<meta content="前端开发, web前端开发, HTML5, CSS3, 前端, web开发, 移动应用开发, div+css, 浩子, 大前端, javascript, jquery, 网页设计, 设计作品" name="keywords">
<meta content="大前端-记录前端的那些事儿！专注web前端开发和用户体验设计！.." name="description">
<link media="all" href="http://www.daqianduan.com/wp-content/themes/d7/style.css" rel="stylesheet">
</head>

设置网页编码、关键词、元描述和样式表，还有一个兼容手持设备的device-width，再无其他内容。作为一个用WordPress搭建的网站，实属精致。

要想实现如此精致的head，需要定制一些内容，比如

favicon

大家会发现大前端网站的head中并没有favicon的link标签，但网站还是能正常展示favicon。通常我们这样添加favicon

<link rel='shortcut icon' href='your URL' type='image/x-icon'/ >

Sola没有用过Windows主机，在LAMP主机上，只要将icon命名为favicon.ico，放置在域名根目录下，浏览器就可以自动识别，不需要写上面那句话。

javascript

javascript脚本应该尽可能放置在footer（</body>标签之前），大多数脚本都不是异步方式载入，如果脚本载入慢，会拖慢整个网站的载入速度，所以如果脚本不是必须在head中载入，就放到footer中。

在主题中，用wp_enqueue_script载入脚本，该函数最后一个参数是设置脚本载入位置的，设置为true则在footer载入

wp_enqueue_script( 
     $handle
    ,$src
    ,$deps
    ,$ver
    ,$in_footer 
);

例如载入一个依赖jquery的自定义脚本，且设置为footer载入，代码如下

function my_scripts_method() {
	wp_enqueue_script(
		'custom-script',
		get_template_directory_uri() . '/js/custom_script.js',
		array('jquery'),
		'1.0',
		1,
		true
	);
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

关于wp_enqueue_script，可以参考文章《wp enqueue script学习手记》。

WordPress产生的标签

WordPress会产生一些默认的标签，例如wp generator、prev和next link，下面的代码可以让你移除这些标签

//放在functions.php中
remove_action( 'wp_head', 'feed_links' );
remove_action( 'wp_head', 'feed_links_extra',3);
remove_action( 'wp_head', 'rel_canonical' );
remove_action( 'wp_head', 'feed_links' );
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head');
remove_action( 'wp_head', 'wp_generator' );
remove_action( 'wp_head', 'wp_shortlink_wp_head', 10, 0 );

在使用前，最好明白这些都是做什么的，根据自己的需要去掉标签，例如rel_cononical，这个是比较有用的标签。安装All In One SEO插件，有一项也是设置Canonical URL的。

关于 rel="canonical"

什么是规范网页？为什么要指定规范网页？

规范网页是一组内容高度相似的网页的首选版本。

如果 Google 知道这些网页的内容相同，我们可能只会将搜索结果的一个版本编入索引。我们的算法会选择我们认为可以最好地回答用户查询的网页。不过，现在用户可以通过将 <link> 元素和 rel="canonical" 属性添加到该网页非规范版本的 <head> 部分，为搜索引擎指定规范网页。添加此链接和属性可以让网站拥有者识别出哪些网页具有相同的内容，从而向 Google 提出建议：“在内容相同的所有网页中，此网页最有用。请将该网页排在搜索结果中靠前的位置。

link:http://support.google.com/webmasters/bin/answer.py?hl=zh-Hans&answer=139394

关于插件

WordPress插件之丰富是让WP受欢迎的一大因素，同时也给WP带来一些问题，为什么说插件安装多了会拖慢网站速度？不仅仅是安装插件过多要消耗更多资源，还有以下几个问题：

  • 插件常常带有我们需要的和不需要的功能，一般用户无法去掉不需要的功能
  • 当插件需要引入自己的样式表和脚本时，就会产生更多http请求，让head标签变长
  • 很多插件在head中引入脚本，某些插件在不需要的页面也会引入脚本

所以，要给网站提速，就要管理一下插件的行为。比如，安装wp-codebox（代码高亮插件），就会在head中产生一个javascript链接（codebox.js），且不谈该插件没有根据是否需要引入脚本，一个代码高亮的脚本完全没必要放在head中，为了精简head，需要在主题中处理一下，将脚本移动到footer。

方法是：在functions.php中添加如下代码，先用wp_dequeue_script将codebox.js从脚本队列中移除，在用wp_enqueue_script重新添加到footer。

add_action('wp_print_scripts', 'move_codebox_script');
function move_codebox_script() {
    wp_dequeue_script('codebox');
    wp_enqueue_script('codebox', get_bloginfo ( 'wpurl' )
 . '/wp-content/plugins/wp-codebox/js/codebox.js',
 array('jquery'), '0.1',1,true);
}

所有的插件都可以用这种方式处理，且不限于脚本，你还可以用wp_dequeue_style注销它的样式表，将所有插件样式表合并到主样式表中或者单独的一个文件，这样可以有效减少http请求。

参考文章：《禁止评论自动转换URL为可点击的链接》

关于图片

如果你的网站使用了大背景图片，载入速度也会变慢，这时候需要压缩背景图片，如果既要压缩图片，又不想失真的太厉害，可以用文章《用PhotoShop压缩PNG图片》中提到的方法，通过色调分离功能（减少颜色数）压缩体积。

Transients API

WordPress有自建的缓存机制，其中一种叫做Transients API，可以将数据（例如查询结果）直接保存到wp_options表中，并设置过期时间。

如果你需要做一个比较消耗资源的mysql查询，而查询结果又不需要实时更新，可以借助Transients API存储结果，减少查询次数。

Transients API的使用方法可以参考官方文档：http://codex.wordpress.org/Transients_API

例如：将$special_query_results存储，设置过期时间为12小时

set_transient( 'special_query_results', $special_query_results, 60*60*12 );

一个完整的例子

<?php
// 获取已经存在的transient数据
if ( false === ( $special_query_results = get_transient( 'special_query_results' ) ) ) {
	// 如果不存在，生成并存储新的transient

	$special_query_results = new WP_Query( 'cat=5&order=random&tag=tech&post_meta_key=thumbnail' );
	set_transient( 'special_query_results', $special_query_results );
}
// 正常使用该数据，就像没有用transient时一样

结语

提速网站除了优化主机、使用缓存插件和CDN之外，还有很多细节问题可以关注。

使用插件时，如果有能力去掉没用的功能，就去掉，自己能定制一下是最好的。

写主题时，应该注意脚本加载的位置和顺序。

缓存一些费时费资源的查询。

7条评论

  1. head标签里面的内容对载入速度影响不大，Transients API这个没研究过。

  2. sola, 有没有研究过W3 Total Cache？ 本文后面跟这个插件有异曲同工之处，合并CSS，JS脚本，缓存数据库查询，自动去除网页上的垃圾代码。W3 Total Cache 我刚用，好多项目还是一知半解，要用好它真有点难入手。

    1. W3 Total Cache功能比WP Super Cache多，设置也麻烦不少，我也只是装过一次，没正式用过，不过我最近可能需要研究一下这个插件，等研究好了跟你交流下

  3. 在留言板看到的，原来文章目录是这个意思啊。
    我用火狐的，文章目录在左边没有显示完全。之前一直没留意到

评论已关闭。