程序员人生 网站导航

WordPress 网站 SEO 优化

栏目:服务器时间:2015-05-20 11:04:50

by falcon wuzhangjin@gmail.com of TinyLab.org
2014/07/20

前言

本站建站有1段时间,买的阿里云,搭的WordPress, 刚开始1直有各种问题,致使没法访问,尝试过:

  • 升级Web服务器:从Apache到Nginx
  • 创建文件并配置Swap服务
  • 升级RAM:从512M到2G

但是发现有时访问还是很慢,特别是连接多了以后,服务器就down掉,所以得继续抽空优化。

兼容性问题

先做HTML的W3C兼容性测试,如果不兼容,很多阅读器可能没法访问,果然,通过http://validator.nu/1测,发现1大堆问题。最重要的问题莫过于:

Almost standards mode doctype. Expected “”

查了1下,发现首恶居然是M$引入”BOM”(Byte Order Mark, UTF8文件的Magic Number,但是并没有标准化),不知道哪一个插件作者用Windows开发的,致使文件里头带有BOM字节,而标准HTML在文件头是不允许有额外字节的,否则,有些阅读器就解析不了,比如M$ IE。这就是原来在IE上阅读不了该站的本源(所有页面靠左对齐了)。

通过以下命令可以确认网页开头到底有无额外的BOM字节,如果有的话,会是这个模样:

$ curl -s http://www.your-web-site.com/ | head ⑴ | sed -n l
357273277
$

前3个字节是8进制的,对应106进制恰好是:EF、BB、BF。

在Windows下可以用notepad++等直接去掉和添加BOM字节,在Linux下可以用vim做到:

$ vim test.c
:set fileencoding=utf⑻

:set bomb
:set nobomb
:set bomb?

以上3个设置分别为添加/删除/查询bomb标志。

WordPress,如果安装插件很多,那得把含有BOM的文件1个1个找出来。我们可以用grep,只需要匹配文件头是不是有BOM字节就能够:

$ grep -r -I -l $'^xEFxBBxBF' test.c
test.c

找到以后,可以用sed -i做替换(注:千万记得备份):

$ sed -i -e '1s/^xEFxBBxBF//g' test.c

这里是批处理(Again:操作前,千万要备份):

$ grep -ur -I -l $'^xEFxBBxBF' /test-dir | xargs -i sed -i -e '1s/^xEFxBBxBF//g' {}

关于更多的不兼容性问题,就根据测试的结果1个1个解吧。

本节参考:

  • Why Firefox highlights HTML transitional doctype in red?
  • UTF⑻编码中BOM的检测与删除

性能问题

接下来,我们测试1下默许配置的性能,有蛮多免费的站点:12 个最好的免费网站速度和性能测试工具。

当前试用了Google PageSpeed Insights和Load Impact。

前者允许用户分析网站页面的内容,并且会提供加快网站访问速度的建议,后者允许用户做些 web 利用的负载和性能测试。它不断增加网站流量来丈量网站性能。Load Impact 会选择1个全球负载区,测试摹拟客户,带宽,接收数据和每秒要求等。愈来愈多客户变活跃,这个工具会用个漂亮的图表来展现丈量的加载时间。

通过Load Impact测试以后发现,访问时间跟并发数成线性关系,那意味着,前面提到的并发访问多了以后,全部服务性能逐渐降落了,到最后Nginx都没法提供服务了。

化动为静;缓存起来

这个问题,通过查找资料并分析,发现务必要做几个工作:

  • 把动态页面转换为静态页面

这个跟Android上的ART1个原理,页面1旦编辑完就能够生成1个静态的html页面,用户访问时就能够直接从磁盘乃至内存里头拿html代码,无需额外的PHP解析开消(包括处理器和内存)了。

  • 把1些SQL访问缓存

大量并发的数据库访问会带来很大的IO性能开消,可以把1些SQL查询的结果缓存起来,这样可以节省IO开消。

上面两个的选择很多,经过对照,分别采取了:

  • 页面缓存:Hyper Cache
  • SQL缓存:DB Cache Reloaded Fix

除杂去冗,化繁为简

后面综合Google PageSpeed Insights的测试结果,又做了以下几项优化:

  • CSS Minify:Autoptimize,注:不能使用其JS优化,有严重Bug。
  • JS Minify:HeadJS Plus
  • HTML Minify:WP-HTML-Compression

线性转并行;同步转异步

需要特别强调的是 JS 异步加载优化,这个效果非常明显也很典型。

该站用到了第3方统计,发现通过国外 VPN 进来的时候,统计站点的 Javascript 加载严重拖慢了全部系统,致使文章带有代码高亮插件的内容没法正常渲染。

因而乎,想到了异步加载 Javascript 应当能解决问题,通过查找确切发现大部份阅读器都已支持 async 或 defer 属性,后者确保履行时序,前者则不会保障 Javascript 的加载顺序。

对我们这里的特例,统计站点与站内其他资源有任何依赖关系,完全可以用 async 属性,用法以下:

<script async src="siteScript.js" onload="myInit()"></script>

异步以后,效果相当明显,系统其他部份顺利加载,统计就让它慢吞吞地干吧。

需要注意的是,上面的方法好像效果不好,对站长统计,会致使那个统计图标不显示,这样的话,可以用类似下面的思路(站长统计和百度统计都已支持,可以直接复制过来):

<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_322289'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s22.cnzz.com/stat.php%3Fid%12122212%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>

性能测试和优化建议

后面又尝试了其他几个测试服务:

  • neustar展现各地的连接速度,并且详细地展现了各个资源的获得时间,可以很方便地辅助开发者定位问题并做针对性优化。
  • Web Page Analyzer非常强大,提供了详细的网站分析数据并且会提供提高网站性能的建议。它提供大量的 web 页面速度报告,global report,外部文件计算,加载时间,网站分析数据和改良建议。
  • Octa Gate Site Timer 允许用户检测每一个用户加载1个或多个页面的时间。当页面加载的时候,SiteTimer 存储每一个项目加载的数据和用户接收的数据,这些数据会用1个网格来显示。
  • Pingdom 是个非常杰出的工具,帮助用户生成大量网站的报告(页面大小,阅读器缓存,性能等级等),肯定网站的加载时间,而且允许用户跟踪性能的历史记录,能在不同位置进行网站测试。
  • GTmetrix 可以帮助用户开发1个快速,高效,能全面改良用户体验的网站。它会为网站性能打分,然后提供可行性的建议来改良已发现的问题。

本节参考:

  • WordPress缓存插件Hyper Cache使用方法与缓存加速效果对照分析
  • wordpress插件之缓存类插件总结与点评
  • Improving Page Load Speed

搜索引擎收录问题

这里触及3个动作,分别是:

  • robots.txt协议:告知搜索引擎能不能搜,哪些目录可以搜
  • SiteMap协议:告知搜索引擎我这个网站有哪些东西
  • 直接提交给搜索引擎进行收录

首先是robots.txt,这个可以通过1些网站自动生成1个配置文件:robots.txt,例如http://tool.chinaz.com/robots/,生成后这个文件放在网站根目录下。

接着是安装1个SiteMap自动生成的插件,例如:Baidu Sitemap Generator。生成后,在robots.txt的最后加入以下两行,例如,本站:

Sitemap: http://tinylab.org/sitemap_baidu.xml
Sitemap: http://tinylab.org/sitemap.html

在最后,我们可以主动给各大搜索引擎提交收录,各大收录的入口地址这里有1份清单。

经过这3步以后,搜索引擎的收录问题就不大了。

更多SEO

除上述问题外,通过1些专门的SEO评测站点可以获得更多有价值的优化信息。

  • SEO综合查询

该站提供了各家搜索引擎的收录情况,域名,备案,服务性能,站点描写与关键字设置情况等。通过该工具查到该站的主题没有添加站点描写和关键字信息。

  • Website Review

这个网站则提供了另外的1些视角,比如上面的兼容性问题测试就是该站提出的建议。

通过SEO综合查询和相干的检索后,找到了手动为各种场景添加关键字和描写的方式,那就是在header.php的head部份添加以下内容:

<?php if (is_home()) { $description = "网站描写:不超过200字符。"; $keywords = "网站关键字:不超过100字符"; } elseif (is_single()) { if ($post->post_excerpt) $description = $post->post_excerpt; else $description = $post->post_title . ':' . substr(strip_tags($post->post_content),0,200); $keywords = ""; $tags = wp_get_post_tags($post->ID); foreach ($tags as $tag ) { $keywords = $keywords . $tag->name . ", "; } } elseif (is_category()) { $keywords = single_cat_title('', false); if (category_description()) $description = category_description(); else $description = $keywords; } elseif (is_tag()) { $keywords = single_tag_title('', false); if (tag_description()) $description = tag_description(); else $description = $keywords; } $keywords = htmlspecialchars(trim(strip_tags($keywords))); $description = htmlspecialchars(trim(strip_tags($description))); ?> <meta name="keywords" content="<?=$keywords?>" /> <meta name="description" content="<?=$description?>" />

记得把首页部份的描写和关键字修改成你自己的内容。

小结

上面的优化其实都是最基础的,要真正优化SEO,那就是要逐渐丰富与站点主体相干的内容,保持延续的更新和保护,吸引足够的忠实读者。

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐