zoukankan      html  css  js  c++  java
  • 优化Wordpress的方法总结

    Wordpress的功能非常强大,诸多的插件、花哨的界面,使得它的读取速度也大大降低。因此,如何优化以加快访问者的浏览速度便成了wper们思考的问题。我将诸多高手的方法进行了整理和总结,再结合自己优化的经验汇成此文,希望能对大家有所帮助。

    To be, or not to be: that is the question:
    这是我想讨论的第一个问题----就是有没有必要做优化。在我看来,绝大多数个人博客是不需要做优化的。花很多时间对一个日访问量不到100的博客做优化还不如花这点时间来好好充实自己的博客内容。
    在准备自己的个人博客时最应该考虑的有2个问题。

    首先是选一个合适的Linux主机。
    其次尽可能使用最新版本的WordPress,新版本在后台有很大的改进,方便你自己使用、更新。
    当你博客的访问量稳步上升后,优化才是你应该考虑的问题。

    优化所有的图片(images):
    图片其实是影响网页读取速度的关键,稍大一些的图片就可能达到100K;因此,在上传自己的图片之前,务必用Photoshop的"保存至网页"(save for web)功能,对图片进行优化。(例如,保存成GIF, PNG格式等等)


    关闭一切不必要的插件(plugins):
    在安装插件之前,首先问一下自己,你是否必须要此插件。尽可能的减少插件数量。

     开启缓存(Cache)功能:

    首先你可以开启WordPress自带的缓存功能:
    打开WP根目录下的wp-config.php文件,在最后一行之前添加 define('ENABLE_CACHE',true);
    将WP-content目录下的cache目录属性改为777,以保证系统能够写入cache。
    如果您的blog日访问量在200以上,建议安装WP-Cache或者WP Super Cache插件,否则不推荐使用。我自己使用的是WP-Cache。
    让WP-Cache也用上Gzip:
    如果你安装了WP-Cache,一定知道WP-Cache要求必须关闭WP的内置GZip功能,但是我们可以在wp-cache-phase1.php中添加代码来实现Gzip压缩功能。 打开wp-cache-phase1.php,大概在35行左右找到如下代码:
    foreach ($meta->headers as $header) {
    header($header);
    在此代码前添加下面的代码:

    if ( extension_loaded('zlib') ) ob_start('ob_gzhandler');
    减少HTTP请求---合并JS和CSS文件:
    不少插件都有自己的JS文件,系统在读取这些文件时候会产生大量的http requests,产生的延迟约为0.2秒/个。因此将所有的JS和CSS文件合并,会减少很多HTTP请求,大大加快页面的读取速度。
    但是我不建议大家自己手动合并代码,这里我采用的是阅微堂的合并的方法 。
    具体是建立一个新的all.js.php文件,内容是:

    1 <?php
    2 require_once('目录/wp-blog-header.php' ) ;
    3 include ("/blog/a.js" ) ;
    4 include ("/b.js" ) ;
    5 ?>
    其实就是将header.php里面的那些js文件都include到all.js.php,然后在header里面包含all.js.php文件即可:

    <script xsrc="all.js.php" type="text/javascript"/>
    另外还要做的一件事情是需要把原来那些js文件从head里面去掉。通常这些js文件都是通过

    add_action('wp_head','fun' );
    这样的钩子添加到head里面的。在function函数的定义处去掉对应的代码,或者直接把这条语句删除即可。
    对CSS文件也可以用同样的处理方式。CSS文件一般都不多,这时候可以直接手动把它们都贴到一起。 另外js文件的载入位置也很重要,放在越后面越好,让浏览器先下载html代码。像Google Analytics的js代码最好放在文件最后。

    合理放置css文件和js文件:
    一般来说,css文件放在页面头部,而JavaScript脚本则最好放在页面尾部,让浏览器先下载html代码。像Google Analytics 或者Google Ajax Search 这样的大型js代码最好放在文件最后。
    压缩代码:
    在管理界面的 Options->Reading选项中,开启WP自带的压缩功能(WordPress should compress articles (gzip) if browsers ask for them)
    利用CSS 优化工具压缩CSS代码,注意。为了方便自己编辑,最好保留一份未经过压缩的代码。
    利用Shrinksafe 压缩JS代码,同样的,最好保留未经过压缩的JS代码,以便将来更改时候便于阅读。
    静态化处理:
    为了免得生成太多的文件,我只对首页做初始化。其实这个想法和用WP-Cache差不多,所不同的是 WP-Cache生成缓存页面是靠浏览完成,而我说的方法却是由服务器来完成。我的网页中,Comments都是用javascript实时显示的,所以我要做的只是在更新或添加post后刷新一次主页。所用的程序如下:
    01 <?php
    02 function wwwcopy($link,$file)
    03 {
    04 $fp = @fopen($link,"r");
    05 while(!feof($fp))
    06 {
    07 $cont.= fread($fp,1024);
    08 }
    09 fclose($fp);
    10 $fp2 = @fopen($file,"w");
    11 fwrite($fp2,$cont);
    12 fclose($fp2);
    13 }
    14 //Example on using this function
    15 wwwcopy("您的动态网页(如 http://www.cnblogs.com/zhongbin)", "放置静态网页的绝对地址(如/home/jason/public_html/wordpress/index.html)");
    16 ?>
    记住要把index.html的属性设置成666,这样结果就是别人访问你的网站时候,会直接先读取静态的首页,大大加快了速度。

    当然,如果你需要更多静态化页面的帮助,也可以考虑安装 cos-html-cache 这个插件。

    利用Gzip对css、js还有html文件进行压缩:
    这步其实是第六步的延续,因为gzip的压缩比很好,以至于我们可以不用预先压缩css和js代码就可以达到很好的压缩比。
    首先建立一个文件style.css.php,放在自己的theme目录里面。然后在header.php文件中把读取style.css改为读取style.css.php。 随后在style.css.php文件添加如下代码:

    1 <?php
    2 if(extension_loaded('zlib')){ob_start('ob_gzhandler');}
    3 header("Content-type: text/css");
    4 # echo the file’s contents
    5 include($_SERVER['DOCUMENT_ROOT']."/wp-content/themes/default/style.css");//请自行更改css文件位置
    6 if(extension_loaded('zlib')){ob_end_flush();}
    7 ?>
    js文件的压缩方法相同,把all.js改名all.js.php,然后将上面要添加的代码中的text/css改成text/javascript即可。

    而html文件,可以用rewrite的方法,比方说我的index.html事实上是利用php读取的index2.html规则,请在.htaccess文件中添加如下代码:

    RewriteRule index.html /readhtml.php [L]
    readhtml.php文件的内容和之前读取css文件的类似:

    1 <?php
    2 if(extension_loaded('zlib')){ob_start('ob_gzhandler');}
    3 header("Content-type: text/plain");
    4 # echo the file’s contents
    5 include($_SERVER['DOCUMENT_ROOT']."/index2.html");//请自行更改html文件位置
    6 if(extension_loaded('zlib')){ob_end_flush();}
    7 ?>
    利用Image Map减少meta部分的image读取量:
    本部分比较复杂,如不懂可跳过。
    在阅读这部分内容之前,你可以点一下这个链接。Image
    你所看到的就是我这个博客使用的背景图。其实现原理就是把一些常用的image用一个大的image来代替,并且在css文件中设置为背景。然后利用div的控制实现鼠标的悬停指向。

    这里以我siderbar下方的meta图标为例。
    我使用的Two Columns的模版,因此,除了index.php文件外,还会有一个siderbar.php文件,meta信息都会放在这个文件中。一般我们在 meta部分会添加不少图标,所以我们可以将不同的图标放到一个大的gif文件中,然后利用Slice Tools对图片进行分割。

    分割完成可在每个Slice上右击鼠标,读取Slice的属性,记下 下图中的X,Y,W,H坐标值。
    如图所示的就是图标Creative Commons的坐标(可点击看大图)。

    接着在CSS文件中建立一个class

    1 .creativec {
    2 float:left;
    3 margin-top:2px; //可自己更改
    4 margin-left:0px; //可自己更改
    5 background: url(images/bg.gif) no-repeat -41px -82px; //前者为X坐标,后者为Y坐标
    6 110px;
    7 height: 29px;
    8 }
    有人还会在上面这段css定义中添加一句:

    text-indent: -9900px;
    主要用来将文字隐藏,但我不建议这样做,这样的话,在firefox中点击会出现长长的虚框,影响美观。
    我的做法是此链接的title文字部分,用“&nbsp;”。回到我的例子,我们就可以在sidebar.php添加如下的信息。注意我在写它的title时候用的是空格符号&nbsp;。

    <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/" title="Some Rights Reserved" class="creativec" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;</a>
    把所有你会用到image都用这种方式修改。上传更改过的所有文件,重新读取,你会发现你网站loading的速度会快很多。你可以按照每个image所产生的http requests约为0.2s来计算。

    阅微堂还给出了一个全站静态化的绝好方法,值得借鉴,尤其是javascript读取cookie的方法,相信对不少人都会有用。

    还有一些方法或需要服务器根目录的读写权限,或者需要数据库的root权限,不具有普遍性,就不列出了。

  • 相关阅读:
    Java高级之类结构的认识
    14.8.9 Clustered and Secondary Indexes
    14.8.4 Moving or Copying InnoDB Tables to Another Machine 移动或者拷贝 InnoDB 表到另外机器
    14.8.3 Physical Row Structure of InnoDB Tables InnoDB 表的物理行结构
    14.8.2 Role of the .frm File for InnoDB Tables InnoDB 表得到 .frm文件的作用
    14.8.1 Creating InnoDB Tables 创建InnoDB 表
    14.7.4 InnoDB File-Per-Table Tablespaces
    14.7.2 Changing the Number or Size of InnoDB Redo Log Files 改变InnoDB Redo Log Files的数量和大小
    14.7.1 Resizing the InnoDB System Tablespace InnoDB 系统表空间大小
    14.6.11 Configuring Optimizer Statistics for InnoDB 配置优化统计信息用于InnoDB
  • 原文地址:https://www.cnblogs.com/zhongbin/p/3922315.html
Copyright © 2011-2022 走看看