禁用Google网络字体提高网站加载速度
Update: WordPress 技巧:禁用 Google Fonts,加快 WordPress 后台打开速度:将下面的代码放到当前主题的 functions.php 文件:
add_filter( 'gettext_with_context', 'wpjam_disable_google_fonts', 888, 4);
function wpjam_disable_google_fonts($translations, $text, $context, $domain ) {
$google_fonts_contexts = array('Open Sans font: on or off','Lato font: on or off','Source Sans Pro font: on or off','Bitter font: on or off');
if( $text == 'on' && in_array($context, $google_fonts_contexts ) ){
$translations = 'off';
}
return $translations;
}
最近,Google在国内访问拜GFW神威而抽风,不仅仅是Google的搜索和GMail邮件服务,其它的Google相关服务也受到影响,比如Google Font网络字体。
如果有网页使用了Google网络字体,现在加载网页会变得异常缓慢,原因就在于Google网络字体无法加载。对于使用了Google字体的WordPress博客主题,有人建议使用插件禁止使用Google网络字体,也有方法建议使用替代网络字体加载。
我直接用非插件的方法,在主题函数中将Google网络字体注释掉,这样就网页加载时就不再产生Google网络字体请求,速度也就不会受到Google被墙的影响。注释方法很简单,例如,在Twenty Twelve主题函数functions.php中找到googleapis一行,在最前面和最后面各加上 /* 和 */ 即可,注释后的样子如下所示:
Fixing Google Custom Search Engine Monetization Saving Issue
As a blogger using WordPress, I recently switched to Google Custom Search Engine instead of the default search box, just to give better user experience when searching the whole blog. Google Custom Search Engine not only index the posts of a blog, but also the comments left by readers who often bring nice content for a blog.
However, there is a slight disadvantage of Google Custom Search Engine compared with the search box of WordPress. Google Custom Search shows advertisment based on the queries searched. Of course, it is comprehensible that Google relies on ads revenue whenever offers “FREE” services to users.
博客使用Google自定义搜索
上次在简化博客主题的时候,我把博客自带的搜索功能去掉了,结果有好几位朋友建议我还是加上搜索功能。我后来加上了WordPress自带搜索框,勺子又抱怨搜索结果每页只显示一个——因为我把博客每页设置成只显示一个页面,目的是为了保持专注。
其实,最强大的搜索应该通过Google的站内搜索技巧:关键词 site:tumutanzi.com,可是这个技巧也许只有我自己会这样使用。用户永远是懒的。没有办法,我只好求助Google自定义搜索引擎(Google Custom Search Engine)。
在Google的设置页面添加一个自定义搜索单元后,将代码放到博客主题中想要出现搜索框的地方(我把它放在了日志后面),就实现了通过Google搜索博客的功能。使用Google自定义搜索替代WordPress自带搜索的好处是明显的:
- 全面、精准、强大的搜索功能,甚至支持语音(目前只支持Chrome PC)和图片搜索,不但能搜索博客文章,还包括评论留言,这是WordPress自带搜索目前不支持的缺点。
- 搜索界面高度定制,搜索内容与范围也可以定制。
- Google自定义搜索不占用博客主机资源,虽然用WordPress自带搜索也不会太大的开销。
不过,Google自定义搜索也不是没有缺点:
- 需要额外加载Google的JS代码,在中国大陆范围内可能存在加载速度的影响——墙的功劳。
- Google在搜索结果页面会添加相关广告,影响用户体验,而且,如果没有AdSense账号的话,此广告收入完全归Google,毕竟这是Google提供自定义搜索的利益驱动。
综合而言,我还是愿意使用Google自定义搜索替代WordPress自带搜索功能。因为我的博客有近700篇日志,将近80万字,留言评论也有20, 000多条,我在博文中写下来的信息难免不全,留言和评论相当于UGC模式(User-generated Content 用户创造内容),部分评论内容是很重要的补充信息,而WordPress自带搜索居然不支持搜索评论内容。
我的博客可以算一个人综合网站,她记录了我所想、所见的许多东西,内容五花八门,而通过强大Google自定义搜索,就可以更方便地找到自己写下来却已经忘掉的东西。
搜索还得靠Google。
工具是工具、问题是问题
考虑网站速度的时候,估计很多人像我一样,纠结过虚拟主机还是VPS服务器。像我这种180美元的虚拟主机,肯定会有很多人觉得没有必要,还不如直接购买VPS。
我认为,高端虚拟主机好用的话可能更好。VPS太费精力去维护,也不容易维护。好的虚拟主机(通常也贵)不只是一款主机,更多的是主机后面的技术人员提供的专业服务,专业的事情就应该交给专业人员去做——除非你为了学习服务器原理。
我以前曾试图用Jekyll等静态博客方法生成博客,但发现操作起来对非程序员们并不简单。并且,纯静态页面的方法功能过于简单,虽然对于大部分写博客的人来说是足够的。
但是,用WordPress等CMS程序维护博客网站,具有灵活的功能和配置,同时利用缓存插件,又能实现网站全部静态化,大大提高访客访问速度,降低主机负担。动态网站实现静态网页速度。这并不是一个坏的方案架构。
有人抱怨WordPress越来越复杂,不适用于博客。把一个苍蝇拍变成一个高射炮,固然把事情搞复杂了,但是用这个高射炮来打苍蝇,应该比原来的苍蝇拍更厉害才对。所以,用WordPress的话,只坚持使用最基本的功能,不折腾即可。
就WordPress博客而言,完全可以做到既利用它的强大灵活功能,又做到静态化网页的轻便与快捷。因此,它依然适用于博客网站。
在主机和程序上,我们最初的问题就是为了写博客,找到合适、够用的就好。实际上,只不过是国内这种特殊情况,才需要独立的主机空间和程序。像国外,直接用Blogger或者WordPress.com的服务再绑定域名,什么麻烦都省了,没有围墙就不担心红杏出墙。
工具当然重要,但一味地追求工具,就会忘记最初的问题是什么,这就是所谓的“工具是工具、问题是问题”。
提高WordPress博客访问速度:缓存静态化网页
有时候,我也访问博友们的网站。每当网页加载速度很慢的时候,我几乎会第一时间就放弃访问,我没有理由去等待它不知何时才能打开。作为网站的主人,有必要保证网站具有够快的访问速度。
土木坛子在全世界各地的加载速度应该还不错,有朋友说在国内加载几乎秒开。这是怎么做到的呢?说来可能让你失望,我选用的香港主机,每年要180美元左右。这种高端虚拟主机提供了足够的硬件资源,足够一个小博客的访问加载实现秒开的速度。
不过,除了硬件投资外,我也从软件层面配置了一下。和大部分博主一样,我用的是CMS开源博客程序:WordPress,我的设置说起来很简单,使用WP Super Cache缓存插件将博客网页完全静态化。
WP Super Cache是个非常不错的缓存插件,很容易使用,但也有一点小技巧。具体而言,把博客的固定链接形式改成非默认后(即链接里不能带有问号,是否HTML后缀无所谓),然后启用插件的缓存功能,在高级配置选项里面,把推荐的选项都打开。如果愿意,在插件的CDN设置里还可以调用诸如七牛的免费CDN加速服务,至少可以提高图片等静态文件的加载速度。
如此操作后,所有页面在第一次被访问后都会形成静态页面留在服务器上,如果网页内容没有改变,下一次被人访问时服务器就会提供已经形成的缓存静态页面,既减轻服务器的压力,又提高了网页加载速度——至少省略了动态页面生成时间。
那么,能否再提高一点呢?可以。我启用了插件里的预加载配置,即使用预缓存功能(Preload),这个功能是指主机自动将所有网页预先访问,形成静态缓存页面。即使页面第一次被访客访问,也会得到缓存静态页面。如此以来,整个网站就相当于一个静态网站,但又兼有动态网站的功能。所有页面由网站程序通过管理数据库生成,但又实现了自动静态化。
由于静态化是通过自动预缓存实现,该过程对主机不会造成集中负载,主机CPU等开销不但不会变高,相反还会降低——主机几乎不再为访客生成页面而服务,哪怕是第一次访问。
既然搭建网站写字,就应该给访客提供良好的访问速度。资金充沛的话就使用好一点的主机服务器,无法提高硬件也至少在软件上简单配置一下。我就是这么做的,并不难,相信你也可以做到。
WordPress博客相关博文调用代码
前几天“不能吧”博主问我要一个关于在WordPress博客中实现无插件的相关文章代码,这段代码其实很简单(我不记得是从哪里获得的,如有谁清楚,请提供作者信息):
<?php
$backup = $post;
$tags = wp_get_post_tags($post->ID);
$tagIDs = array();
if ($tags) {
echo '<h3>相关日志</h3>';
echo '<ul>';
$tagcount = count($tags);
for ($i = 0; $i < $tagcount; $i++) {
$tagIDs[$i] = $tags[$i]->term_id;
}
$args=array(
'tag__in' => $tagIDs,
'post__not_in' => array($post->ID),
'showposts'=> 5, //设定相关日志数量,可以自行更改;
'caller_get_posts'=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<li><a href="<?php the_permalink() ?>" rel="bookmark" title=”<?php the_title(); ?>”><?php the_title(); ?></a></li>
<?php endwhile;
echo '</ul>';
} else { ?>
<ul>
<?php
query_posts(array('orderby' => 'rand', 'showposts' => 5)); //如果无相关日志,即提供随机日志,数量5可以更改;
if (have_posts()) :
while (have_posts()) : the_post();?>
<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endwhile;endif; ?>
</ul>
<?php }
}
$post = $backup;
wp_reset_query();
?>
将这段代码贴到想要显示相关日志的地方,即可实现有相关日志显示相关日志,无相关日志显示随机日志的目的。我是放在主题文件(默认的2012主题)content.php 中的下列语句后:
FarBox--革命性的写作平台
大部分在网络上写字的人很可能都是从BSP平台开始,比如在新浪上开个博客,然后就可能发现不太自由,就开始注册域名、购买主机、安装WordPress之类的程序、数据库、设置一堆密码账户、折腾主题、插件,再打开在线编辑器,码字、排版、发布……复杂吗?我不觉得简单。做这种事情的人已经不是博主,而是一名了解十八般武艺的网站站长,站长和博主能是一回事?
用WordPress之类的内容管理程序(CMS),通过PHP、数据库、主题一系列组合拳,能实现很强的功能,因为它就是一个无所不能的个人网站。可惜,WordPress之类的程度变得越来越重,网站也越来越重。也许有人会说选择其它的轻量化的程度,可是,无论博客采用何种程序,都逃不过PHP(或ASP)+数据库+主机之类的命。我承认功能的强大,但对于一个小博客,并不觉得这是必需,写个博客犯得着如此复杂吗?
博客最重要的是博主写下的文字。对于WordPress之类的网站,所有的个人数据都放在远处那个看似强大实际上非常脆弱的服务器主机上,万一被黑客攻击或者程序版本升级,一个字一个字敲下来的文字可能消失得无影无踪。即使个人数据没有问题,博客日志也难得像一篇完整的文章,而是被强大的数据库拆散成各个字节片断,要导出来重新部署并不是那么顺利。
也许有极客们会推荐使用Jekyll+Github的形式,使用静态网站的技术写博客,我试了后发现它真的很极客,像我这样使用Ubuntu和用WordPress写博客多年的人都没有折腾好,说明Jekyll确实属于极客们。
直到遇到FarBox,彻底让人眼前一亮。它类似Jekyll+Github,却比Jekyll更简单直观。所有日志用很简单的MarkDown语法编写,完全纯文本,却能实现常用HTML排版效果-在这里是通过FarBox后台自动实现。所有日志以纯文本模式保存在个人Dropbox账户里,Dropbox-地球上最好的云端文件同步软件,没有之一。
即使哪天FarBox倒闭了,所有文章还是会静静地躺在Dropbox云端里;即使Dropbox哪天倒闭了,所有文章还是会静静地躺在自己的电脑中;即使哪天人倒闭了,那还要这些文章干什么?
试过几种国内国外Dropbox+MarkDown博客方案,我个人认为FarBox是最好的。也许有人会说FarBox不免费。FarBox对于小流量博客相当于事实上的免费,30万的请求量才能达到100元人民币的付款条件。事实上,没有限制的免费几乎没有未来,没有开发人员永远免费地开发项目,免费是最昂贵的收费。
就算FarBox将来哪天倒闭不干了,所有的日志都存在个人电脑上,完全可以托管到其它服务或者个人主机上。这便没有了后顾之忧。这些存在于个人电脑上的日志,每一篇形成一个单独的纯文本文件,随时可以修改同步,真正静态、云端、跨平台、纯文本。
一群中国的网络服务开发者,使用着国外的硬件资源(Amazon云端),为国人开发产品,就不可避免地对博客内容有所控制-不能谈论政治等敏感内容。在言论自由面前,这不是一件值得炫耀的事情。但是,把言论自由寄托在FarBox开发人员身上,这不现实也没有道理。作为开发人员,必须保证服务在中国大陆可以顺利使用。
FarBox这种Dropbox+MarkDown方案体现了“化繁为简”的思路,抛弃服务器概念和数据库,将数据同时保存在个人电脑和云端,又能呈现简洁可靠的文字。官方还提供Windows和Mac客户端写作软件,以及提供在线将WordPress XML导出日志转换成MarkDown格式的免费服务(但有小BUG,可参考WordPress博文转成Jekyll和Farbox博客)。它不只是一种技术,更是一种哲学。写作者只要专注写字就好——博客本应如此。从这个意义上来说,FarBox在我眼中算得上一种革命性的写作平台,是Revolution, 而非Evolution.
当然,土木坛子肯定会继续使用WordPress,毕竟用了多年的WordPress,已经熟悉的经验不是想放弃就能放弃,而且作为一个被GFW墙掉的博客,使用FarBox有不可预知的风险。但我以后会使用MarkDown写作,先发布在土木坛子,然后再粘贴到我的FarBox站点上,就当用FarBox来备份博客。
世界每天在变,互联网更是如此。当变化值得拥抱时,我会拥抱。
WordPress博客文档编辑器和排版问题
好友爱思卓客博主来邮件问:
一直觉得WordPress写文章,发文章比较麻烦,耽误时间,其中一个最重要的原因是文档的编辑不友好,插入图片等不方便,不知你哪里是否有些建议?你目前你用的什么文档编辑器。谢谢。
我回答他后,觉得可以和大家分享一下我的经验。整理后,我的回答如下。
我非常看重良好的博文排版,这样的文字读起来非常舒服,这需要细心排版,需要好的编辑器。WordPress的在线编辑器不算太差,但离完美是有距离的,何况每个人的需求不一样。
我一般先以纯文本形式写好(我使用Chrome writebox扩展,支持与drobpox同步),段与段之间用空行隔开,然后把它们复制粘贴到HTML模式下的WordPress编辑器中,再回到Visual模式,添加超链接,标示引用内容,加粗需要强调的内容,用Picasa插件添加插入图片……对我而言,格式处理就是这几项,其它的格式能不用的就不用,简洁就是美。
我的排版我自认为简洁不混乱,阅读时也有较好的用户体验——至少没有太长的段落,虽然离可能吧的绿条式排版效果有差距,不过那需要相当程度的折腾,我就不折腾了。
博客评论个人信息自动填写代码
博客具有互动性,体现之一就是博客文章的评论内容。来而不往非礼也,对评论者进行回访自然不是一个坏事。然而对别人的博客进行评论时,初次需要填写昵称,邮箱,网址,自然有些麻烦。有没有更简单的方法呢?有!
对于WordPress, Z-Blog, Typecho这三款博客程序,可以将以下三段JS代码各自保存成相应的书签——在浏览器的收藏栏(或叫书签栏)中新建一个书签,内容为各段代码,名称任意。
以后需要填写评论信息的时候就可以点击相应书签,就可以自动填写信息了,再也不会出现写10秒的内容,花30秒去填写评论者个人信息——估计卢松松同学可能就是靠这招来闯遍博客界的评论。
Windows, Ubuntu下的Firefox, Chrome, IE9浏览器均通过验证。请将代码中的评论者名称,邮箱和网址作相应更改,注意引号应该为英文状态下的半角形式。
WordPress的代码如下(对Emblog无效):
javascript:(function(){document.getElementById('author').value='你的昵称'; document.getElementById('email').value='你的邮箱'; document.getElementById('url').value='你的网址';})()
Z-blog的代码如下:
javascript:(function(){document.getElementById('inpName').value='你的昵称'; document.getElementById('inpEmail').value='你的邮箱'; document.getElementById('inpHomePage').value='你的网址';})()
Typecho的代码如下:
javascript:(function(){document.getElementById('author').value='你的昵称'; document.getElementById('mail').value='你的邮箱'; document.getElementById('url').value='你的网址';})()
网上已经有人提到过以上方法,但由于引号状态不为英文状态(可能是由于采用中文雅黑字体导致英文标点发生问题),导致出错,足见天下大事必作于细,写博文亦如此。至于Em-Blog程序,理论上应该也可以实现,但我没有成功过,希望知情人留言贡献,土木坛子替EmBlog博主们先谢谢了。
Update: 受IsayMe博主的指点,上面的三段代码可以合为一段变成一个书签(请将昵称、邮箱和网址作相应更改),代码自动选择博客程序,就不必人肉去查看博客程序类型再决定书签代码了。感谢IsayMe博主,博友力量就是大!
三合一代码如下:
javascript: void function() { var formArray = ["commentform", "comment_form","frmSumbit"], nameArray = ["author", "author", "inpName"], emailArray = ["email", "mail", "inpEmail"], urlArray = ["url", "url", "inpHomePage"]; for (i = 0; i < formArray.length; i++) { var form = document.getElementById(formArray[i]); if (form != null) { var name = document.getElementById(nameArray[i]), email = document.getElementById(emailArray[i]), url = document.getElementById(urlArray[i]); name != null && (name.value = "土木坛子"), email != null && (email.value = "youremail@gmail.com"), url != null && (url.value = "https://tumutanzi.com"); break } } return ! 1 } ()
更新:升级版本,一码解决WordPress, Z-Blog, Typecho, Emblog四种博客程序的评论填充问题。感谢 https://leonax.net/ 博主的功劳。请自行修改相应信息:名称、邮箱、网址。
你的博客能否通过W3C验证?
Wordpress博客程序是许多博主的不二选择。我相信许多博主都或多或少地折腾过Wordpress主题,只是折腾后,博客的网页代码可能就不够标准了。不信的话,可以去W3C验证一下,输入博客网址,网页的错误和警告数量一目了然,比如主题折腾狂IsayMe和博士牌民工都不幸中招。
不过网页有错误的博主也不用灰心,因为现在几乎所有的浏览器都能兼容有错误的网页,也就是说W3C检测出来的错误并一定会影响网页的实际显示效果,它不是一个必须遵守的标准——从这一点来讲W3C不是一个成功的标准。所以只要主流浏览器能够正常显示网页博主们即不必过分在意W3C验证。更何况许多著名网站都通不过W3C验证。比如:Google.com有35个错误,2个警告。Amazon.co.uk有588个错误,105个警告,这里列出了更多没有通验证的著名网站,你还担心什么呢?
我的博客主题在我修改之后很荣幸还能顺利通过验证,虽然不是必须通过验证,但对于我这种完美主义者,任何一个错误我都无法容忍。