如果你想体验一下 prerender,并且现在使用的是 Chrome 13+ 版本,那么请稍候两秒,再点击这个链接:关于,同别的页面点击到关于页面的速度比较一下吧!注意:本站目前只有本篇文章页内使用了 prerender,供体验用。

Chrome 13 发布了,虽然我不用 Chrome,但是 prerender 这个功能着实吸引了我。那么啥是 prerender 呢?

prerender 字面解释就是“预渲染”,是一种加快用户可见页面加载时间的技术,说起来其实很简单:如果当前页面中存在<link rel="prerender">元素,则 prerender 功能被激活,创建一个指向元素中设定好的地址的隐藏标签,页面中需要的资源会被预读,JavaScript 也会被执行。当用户点击预读页面时,则该隐藏的标签会被激活。

说白了就是,网站制作者事先估计浏览此页面的用户下一步会浏览哪个页面,提前设定好的而已,并不是什么智能的功能。不过如果页面的导向性很明显,比如一篇内容很棒的文章分成两页,那么大部分用户都会点击到第二页,此时预读的效果就十分明显了。


对于我的 wordpress 博客而言,根据统计分析,是这么设想的:

  • 入口点为首页的用户,那么置顶的文章或是第一篇文章的吸引力会更强。
  • 入口点为某篇文章(大多数来自于搜索引擎),那么一次性跳出的可能性很大。
  • 点击 index 页面的第二页之后、分类页面、搜索页面或标签页面的用户,很有可能是想了解一下我都写过什么,看看有什么感兴趣的话题,那么预读下一页,可能会更有效果。

按照上面的目标,把下面代码放到<header> <link rel="prerender" href="" />href=""内:

<?php
global $wp_query;
$max_page = $wp_query->max_num_pages;//获取最大分页数量
if(empty($paged))$paged = 1;
$pagenum = $paged + 1;
if(is_home() && $paged>=2){//如果是 index 页且在第二页以后就预读下一页
	$preURL= "page/" . $pagenum . "/";
	if($pagenum > $max_page)$preURL = "";//如果是 index 页且在最终页就预读首页
};
if(is_category() || is_tag() || is_search()){//如果是标签、分类或搜索页面
	if(is_category()){//分类页面
		//自定义了 archive 页的文章数量,所以要根据默认设置的每页3篇文章计算每页25篇文章有多少页。
		if($paged>=ceil($max_page*3/25)){//如果大于等于则预读首页
			$preURL = "";
		}else{//否则预读下一页
			$preURL = "category/" . single_cat_title('', false) . "/page/" . $pagenum . "/";
		};
	};
	if(is_tag()){
		if($paged>=ceil($max_page*3/25)){
			$preURL = "";
		}else{
			$preURL = "tag/" . single_tag_title('', false) . "/page/" . $pagenum . "/";
		};
	};
	if(is_search()){
		$preURL = "?s=" . $s ."&paged=" . $pagenum;
	};
};
if(is_home() && $paged<2){//如果是首页则预读最新文章或置顶文章
	the_permalink();
}elseif(!is_single()){
	echo "/" . $preURL;//写入之前处理好的地址
}else{
	echo '';//文章页不作处理
};
?>

注意:

  1. 上面代码 PHP 解释后可能会产生 HTML 代码换行等错误,需要删除代码最前两行与href="之间的换行。
  2. 根据固定链接格式不同,需要对参数进行修改。
  3. 对于分页的文章来说,在 HTML 编辑模式下手动在文章中加入标签效果会更好。

这只是一个抱砖引玉的例子而已,实际上完全要根据自己博客的内容和用户浏览习惯而定(配合缓存插件的话效果会更好吧,我猜测),设置不好,就是白白的浪费流量和服务器资源了。

当然,prerender 也是有局限的,下列情况就不能使用 prerender:

  1. 指向下载文件
  2. 指向存在 HTML 音频或视频的页面
  3. 指向含有 POST、PUT 或 DELETE 等 XML HTTP 请求的页面
  4. 指向需要验证用户或采用 HTTPS 的页面
  5. 指向含有恶意程序的页面
  6. 指向含有弹出窗口的页面
  7. 指向高资源占用页面

我还特意测试了一下,prerender 功能只支持一个 prerender 标签,也就是说想在一个页面内对其它两个页面进行预读目前还是无法实现的;还有很重要的一点,当前 prerender 的有效时间只有 30 秒,也就是说 30 秒之后预读的页面就会被清空,当然 Chromium 小组也说了,未来会对缓存时间增加更多的控制可能。

综上所述,目前的 prerender 功能还不太成熟,或者说是过多的限制让人觉得吸引力还不够强,不过作为关注 IT 的玩家,早点搞明白这个东西不是什么坏事哈。

  1. [...] 本文章转载修改自小虾同学的《给 WordPress 加上 Chrome 的 Prerender》 [...]

  2. [...]如果要在 wordpress 中加入 prerender,可以参考这篇文章:给 WordPress 加上 Chrome 的 Prerender[...]

  3. 好吧,我才知道 HTML5 有这功能。
    直接引用一下这段代码大丈夫?喜欢博主这思路~
    不过小改动了一个地方,文章页的时候预读首页~(想想感觉这样会更合理)

  4. [...] 原文地址:http://xia.im/chrome-prerender-in-wordpress/ <link rel=”prerender” href=”<?phpglobal $wp_query;$max_page = $wp_query->max_num_pages[...]

  5. 终于知道这个是干什么的了,在文章页打开关于页面,直接秒开