上次有介绍了六个移动友好测试工具,今天再来介绍一个是微软出品,Bing搜索。
在站长工具集里有一个 Mobile Friendliness Test Tool。
首先打开工具网页,该网页网址是 https://www.bing.com/webmaster/tools/mobile-friendliness

然后输入要测试的网址到输入框,点击 Analyze ,稍等一会儿,就可以得到结果,主要测试了5个项目。

1) Viewport配置是否正确

2) 页面内容是否符合移动设备的宽度

3) 页面文字的大小是否适合阅读

4) 链接或者按钮是否足够大,大到可以用手指点按

5) Zoom设置,就是放大缩小是否允许。

另外,如果某些资源被 robots.txt 禁止也会报告出来。

bing-mobile-test.png如果综合看各种移动测试工具的测试标准,你也一定会得出自己的结论,有哪些是必定要的,哪些是可以尽量做到的,哪些是可有可无的。

通常 Web 服务器所谓的log文件,就是当浏览器载入一个页面时,会向服务器发出请求,服务器会做出适当的返回,而这些访问都会记录在 log 文件中。
log 文件是一个文本文件,下面是一个例子,各种不同的格式有不同的写法。
log_sample.png

下面来介绍四种常见的格式

Common Log Format (CLF),也称之为 NCSA Common Format

这是一个标准化的格式,是最为常见的格式,一开始的时候是由 NCSA 定义的。绝大部分的 log 分析软件都接受该格式的文件。

例子:
127.0.0.1 user-identifier frank [10/Oct/2000:13:55:36 -0700] "GET /apache_pb.gif HTTP/1.0" 200 2326

在Apache Web 服务器中的定义方式是这样的:

LogFormat "%h %l %u %t \"%r\" %>s %b" common

Combined Log Format

这是 CLF 格式的一个扩展形式,包括 referring URL 和 User Agent 字段。

在Apache Web 服务器的配置文件中可以这样来定义:

LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-agent}i\"" combined

W3C Extended Logfile Format

一种可定制的Log格式,只收集用户所需的信息。

在Nginx服务器的配置文件中,我所用的格式是这样的:

现在网站优化及网站推广blog已经使用的是 Perl Fastcgi模式了,从速度上来说要比原来的mod_perl快不少,到底要快多少,下面细细说。
首先本站原来使用的是 Apache Web 服务器,用上了 SSL 之后,就得陇望蜀希望用上 HTTP/2,这样已能原生支持 HTTP/2 的 Nginx Web 服务器就成为第一选择了。

在选用 Nginx 之后,Perl的支持方式就需要改变了,在 Apache 中可以直接用 mod_perl 方式,虽然不是很快,但能够接受,在 Nginx 下,有了更好的选择,那就是 Perl Fastcgi。

手头没有过去的资料,就以另外一个用 MovableType 所驱动的 Blog 为比较对象,都是 MovableType 6.2.2,一共有748篇文章,重建所有文章,包括单篇归档,首页,分类归档,按月归档等等,共耗时 11分23秒。
这个 Blog 是托管在 Dreamhost 虚拟主机,当然是 Apache Web服务器。
mod_perl_rebuild.png

本站现共有1122篇文章,也重建所有的页面,共耗时10分37秒。
perl_fastcgi_rebuild.png

用 mod_perl 的情况下,是平均 0.9131秒一篇;用 Perl Fastcgi 的是平均 0.5677秒一篇。就是说如果把上面的比较对象从 mod_perl 改为 Perl Fastcgi ,重建时间会从11分23秒减少为7分4秒。
速度上来讲是快了38%。性能也是要好38%。


三个设计网站,Twitter,Facebook,Google Plus,均是在国内不存在的网站。没关系,我喜欢用,也用的最多,所以就先只放着三个。

在文章单页归档的页面,在文章的底部,版权说明的下面就是分享按钮,如下。
share-buttons.png

三个按钮,依次是Facebook,Twitter,和Google+。

这三个按钮代替了之前我所设置的,利用Addthis的通用插件所设置的社会化分享按钮,Addthis 的做法是会载入一段 JS ,根据需要执行并显示分享按钮或者其它的的分享统计。

现在的三个按钮相对简单,采用了之前在土木坛子看到的理念,开始尝试的时候想用他的代码的,但后来还是用了直接的图片按钮,加上利用MovableType的模板,把网址和标题等直接写入到链接中的办法。所以说更加简单,更加直接,没有JS。

本站的文章主要会在Twitter,Facebook上分享,如果你有用这两个的话,那么请关注我的账号。

Twitter页面: https://twitter.com/binghuiyin
Facebook页面: https://www.facebook.com/G2Soft/

昨天已经有朋友发现我的Twitter账号上的头像已经换成"高清大图"了,挺有意思的,这是我的大女儿帮我照的,她自拍的水平是相当的高的,这好像是另外一个梗。

这几天都在修改本站的社交分享策略,其目的就是为了更大的提高文章的曝光率,让更多的人能够接触到我的Blog。

首先是在网站的左侧添加了一串分享按钮,包括 Facebook,Twitter, 新浪微博,百度收藏,Google +,点击这些按钮可以把所在文章分享到你的社交账号里。这是悬浮按钮,就在那里,不会随着页面拖动而移动。

addthis.png按钮的样子就是这样。

其次,在单篇文章页面,文章结束之后,在Tags标签之后,是一串水平放置的社交按钮,包括 Facebook Likes, Tweet, Pinterest,Google+等等。这里是有显示分享的次数,但不包括Tweet的次数,因为Twitter已经不再提供分享统计次数了。

share-addthis.png

这样当读者在看网站看文章的时候,可以方便的分享到自己常用的社交网站,当然还以直接订阅本站的 Feed,在自己所喜欢的阅读器里看本站全文输出的文章,比如DavidYin就是每天都要看 Feedly 里的几十篇文章的。

这里是本站的 Feed。

feed-icon7b.jpg

点击上面的图标就可以订阅"网站优化与网站推广Blog的Feed"。

六个移动友好测试工具

移动优先是目前网站优化的最新趋势。用各种工具对网站进行检测,看网站对于手机用户的友好兼容度如何。

Google Mobile-Friendly Test Tool

使用 Google 所提供的 Mobile-Friendly Test 工具,对网站进行测试,得到的结果是

Awesome! This page is mobile-friendly.

看下面的截图,是检测结果。当然此结果是令人满意的。

mobile-friendly-test.png

从图中可以看出Google 的测试是基于一个Nexus手机来的。

如何迁移到新VPS

本站已经迁移到新VPS,位于东京的服务器,在Vultr。都是SSD的储存,比较快,还有就是价格同DigitalOcean差不多,五美元一个月,是768MB内存。

安装的时候是这样的顺序。

  1. 在建立VPS的时候选择 Ubuntu 14.04 x64 系统;
  2. 登录SSH后,更新系统先;
  3. 安装 proftpd 服务器,MariaDB数据库服务器;
  4. 安装 Nginx mainline Web服务器;
  5. 安装 php5-fpm 服务,perl-fcgi 服务;
  6. 数据库dump出来后,直接传到新VPS,导入;
  7. 网站程序打包后,直接传到新VPS,解开放置在适合的位置;

基本就是这样的顺序,不过在设置的过程中尽量复制原来的配置文件。

在过程中,还是碰到一个坑,之前没有记下来的。

昨天本来要写一篇的,不过一直打不开本站,所在的 VPS 也连不上,即使 Ping IP 地址也不通。同时也收到了网站监控的警告消息,网站不能访问了。
本站是放在一个VPS上,该VPS是由 Cloudatcost 服务商所提供。当时购买是一次性付费购买的资源。

在发现故障的当时,就从服务商的控制面板中,重启了VPS,从控制面板中的状态里看上去是正常的,但是还是无法访问,于是就提交了工单,寻求客服技术支持了,到刚才之前,我还两次追加了提问,但没有答复,也没有效果。
我想也许是周末的缘故,于是直到刚刚,已是周一下午了,我又一次在控制面板里重启了VPS,这次有效果了,网站可以访问了。

这已经不是第一次发生这样的情况了,自从转用 Cloudatcost 的VPS之后,几乎每月都会有一两次不能访问的情况出现,而且这种挂掉就是完全不能访问,网络不通的感觉,Ping都不行,而从服务商的控制面板来看,VPS状态正常,重启之后就可以访问了。

看来 Cloudatcost 的服务还是不能用于生产环境,用来测试或者开发或许还可以。或者用来做其它的功能,那种即使挂掉都不会影响服务中断的。

不管你用何种网站统计分析软件或者服务,最后都要来看看统计分析报告,而从那么多的报告中,最不能错过的就是这五个。从这些报告中可以知道你的网站的情况,弱点,强项,改进的方向等等。

好的,就让我们来逐个看看这五个统计分析报告。

1) 转化率报告

在统计分析中会有设置转化目标,这个报告就是看实际上网站的转化目标的实现情况的。

conversion-report.jpg这是Google Analytics的转化率报告。它有很多的细节报告,此图只是其中一个,上面可以看到在指定时间内的目标完成数目,完成的转化比例,如果是购物类的,还可以设定价格,得到转化的金额。

2)最热门的页面或者内容

在这个报告中,受访页面会按照访问次数来降序排列,这样就可以看出来有哪些是最受欢迎的内容了。

top-pages-report.jpg上面这个报告是用AWStats的统计分析软件来获得的。里面列出了前十大访问次数最多的页面。

3)来源网站

你的网站的用户来自各种地方,有直接输入你的网站网址的,有从搜索引擎来的,有从别人的网站上的链接点击过来的,这都会在统计中留下来源网站这个资料。

全部文章归档