如何调整和优化网站性能来加快/加速网页页面的加载载入速度

12月 25, 2021 / 程序员

建立这个WordPress博客时间并不长，但是可以说一直在尽力优化网站性能，加快页面的载入速度。几个月下来，靠身体力行并汲取了很多牛人的经验，自己对其也算有一点了浅薄的认识，所以做出一个初级的一个性能优化文章。
针对WordPress，可以把影响WordPress速度的因素归结为三点（单击小标题可直接跳转至该内容）：

  1. 服务器端：一般就是指服务器进行MySQL数据库查询和将PHP解析为HTML的时间。
  2. 网络传输：服务器端与用户客户端之间传送数据的时间。
  3. 客户端：即浏览器解析HTML文件，渲染页面和执行JS脚本的效率、客户端的缓存、页面的CPU和内存占用等。

上面分的三类，往往都是互相关联的，许多优化方法，能归到以上三个分类的任意分类中。这里也只是简单的介绍一下优化的方法，使用分类会更加清晰一些。

用户打开某一页面的时间基本等于：服务器端时间+网络传输时间+页面解析和渲染时间（此项几乎可以忽略不计）

所以正文就以这三个因素分别说明其加速原理和实现，在此之前先介绍Firefox的三个扩展：

  • FireBug对于网络传输的监控和HTML、JS脚本的查看功能十分强大。
  • Yslow与PageSpeed，这两个扩展对影响页面速度的因素分析和评价十分详细，并且给出了比较完整的解决方案。

使用上述三个插件，便可以对自己网页的性能和可优化之处有比较全面的了解。

服务器端：

服务器端的主要任务就是将动态网页PHP解析为静态的HTML文件，并将它传输到客户端。在解析的过程中，还需要向MySQL查询数据。影响服务器端的，主要有以下几点因素：

  1. 服务器的性能：服务器的性能越强大，共享用户越少或者给用户分配的资源越多，则可以认为服务器的性能强大，这 样PHP文件的解析速度或者说页面生成速度就越快。建议：购买性能更加强大的虚拟空间，或者VPS，甚至是独立服务器，但是相应的成本提升巨大。实现难 度：☆或★★★★★ ，加速效果：★☆
  2. PHP页面源代码：页面越简单，则生成的速度就越快。
    • 复杂程度：以博客首页为例，显示50篇文章与5篇文章，在数据库查询和页面生成速度上的差距是显而易见的，页 面中放入了太多的元素不仅影响了页面的生成与传输速度，也容易对用户的体验有负面的影响。建议：将每页的文章数量设定在一个比较合理的数量上，并合理使用 more标签。实现难度：☆ ，加速效果：★★★
    • 去除或修改不必要代码：大多数主题为保证主题的通用性，采用了许多获取信息的函数，但是一般情况下，大多数用户并不会将自己的主题发布，而是直接在现有的主题上加以修改。以本博客为例，主题header.php中有：< ?php wp_title(‘|’, true, ‘right’); ?> < ?php bloginfo(‘name’); ?> //既然博客的名称和地址除特殊情况下都不会有变动，那为何不使用纯HTML 代码来代替PHP语句呢？，所以改为： <title> < ?php wp_title(‘|’, true, ‘right’); ?> 企鹅君s Blog </title> //再比如 < ?php if($blogOption[‘top_sns_twitter’]!=”){ ?> <li><a href=”<?php echo $blogOption[‘top_sns_twitter’];?>” title=”Follow我的Twitter” target=”_blank”>Twitter</a></li> < ?php } ?> //如果打算长期显示，就不必让服务器再去数据库中查询是否开启该图标和其 地址了。 <li><a title=”Follow我的Twitter” href=”http://twitter.com/ neverweep” target=”_blank”>Twitter</a></li>大多数情况下，header.php、index.php等等中都有这样可以替换的代码，如字符集声明，feed地址等，可以根据自己的需要和主题进行替换。 此外，主题中有”_e”的地方，都可以直接将该语句替换成中文，可以避免读取语言包的时间。建议：尽量去除不必要的PHP语句，比如某些判断语句是否必要，某些PHP语句是否可以用其它纯HTML的方法实现等等。这些都可以减少微量的MySQL查询和页面生成时间。实现难度：★★ ，加速效果：★
  3. 插件：插件自身的性能表现和插件数量的多少，都影响着页面的生成速度。
    • 比较相同功能的插件，从中选取性能表现较优的插件。以博客的最近评论插件为例，为实现ajax评论，我测试了两款基于ajax的最近评论插件，mg12的最近评论要比qiqiboy的功能更强大的RC reply ajax的数据库查询次数要少一倍还多。
    • 剔除不必要的插件，安装一些非常酷炫的插件是否有必要？尽量删除对于博客和用户没有太大价值的插件来换取速度上的提高是值得的。
    • 用纯代码方式替代插件实现功能。以WP-codebox为例，这个插件的功能是将文章中特定标签内的代码高 亮，使代码可读性明显增强。但是每次都将无格式文本代码生成为具有丰富表现力的HTML代码是需要占用大量资源的，所以不妨临时开启wp- codebox，再查看网页源码，将格式化过的代码的HTML替换到正文中，再关闭wp-codebox，这样做即可一劳永逸的使某篇文章实现”静态化 “，大大降低了该文章页面的生成时间。此外，用willin大师的小墙替代akismet等等方法都可以降低插件的使用数量。
    实现难度：★★★ ，加速效果：★★★★
  4. 缓存： 采用各种缓存插件，可以显著减少服务器端占用的时间。
    • 页面缓存：推荐WP super cache或Hyper Cache，其原理就是将PHP页面静态化为HTML，这样访客所获取的页面几乎不再需要服务器处理，基本将服务器端时间消除了。但是这种缓存插件对于页 面也有某些不利的影响，比如会造成文章点击次数统计不准确等。加速效果：★★★★★
    • 数据库缓存：推荐DB Cache Reloaded Fix ，可以将数据库查询缓存至硬盘，以极低的空间占用可以换来强大的性能提升。此外这个插件还提供了一个很实用的功能：将页面生成时间和数据库查询次数等信息插入到页面中，对分析服务器端性能非常有帮助。加速效果：★★★
    • Widget缓存：推荐WP Widget Cache，由于大多数博客所有页面上的小部件都是一致的，并且大多数情况下都不会有短时间内的变动，比如分类Widget的输出甚至可能永远不会变动，搭配上述两种插件可以再次减少生成静态化页面时的数据库查询次数。加速效果：★★
    建议：这三类缓存插件可以互相搭配使用，对于访问量不大的博客来说，只使用数据库缓存或者再搭配页面缓存即可 。缓存类插件启用非常简单，但是通过合理的设置使插件工作在完美状态则比较困难，比如缓存文件的过期时间等设置项就需要结合访问量等因素综合考虑。实现难度：★★☆ ，加速效果：★★★★
  5. 优化数据库：定期优化数据库，数据库体积越大则优化后的速度提升就越明显。可以通过登陆phpmyadmin选择优化，也可以通过插件DB Backup来优化。
    实现难度：★ ，加速效果：★

小结：就我的博客文章页来说，页面生成时间大多在0.4-0.7秒之间，上述大多数因素对于速度的影响其实都非常小，甚至不到0.05秒。不过有时 某些因素可能会大大减缓页面生成时间，比如利用wp-codebox高亮40行左右的代码后，生成时间会减缓到1.3秒甚至1.8秒。总体来说，剔除无用插件和使用缓存类插件对于博客服务器端的加速效果会更明显。

网络传输：

网络传输上很难改变的一个因素是服务器到客户端之间的带宽和响应速度，所以就需要尽量减少传输文件的数量和大小。Firebug中的网络面板，将每 个文件的传输时间都以瀑布图的方式显示出来，非常直观清晰。页面中的每个文件都需要向服务器发送HTTP握手请求，一般情况下，握手花费的时间会比传输一 个1KB的文件还长，所以精简文件个数是加快网络传输的重中之重。

  1. 减少HTTP请求数量：
    • 去除不必要的图像，将图像用CSS Spitite合并。减少不必要的图像，在不影响体验和美观的前提下，尽 量用文字代替图像。用CSS Spitite合并图像，可以将许多图标和按钮图像合并在一张图像上，以一次请求和总体更小的数据传输量代替多次请求和许多零碎的数据传输量，效果十分明 显。比如本博客右上方的社会化链接图标，其只用了一张PNG图像，然后分别设置每个图标DIV的背景图像呈现出当前的效果。其CSS代码如下。1 2 3 4 5 6 7#top-sns a{background:url(img/icons-css.png) no-repeat left top;display:inline;float:right;height:28px; width:28px;background-position:0 0px;} #top-sns a.email{background-position:0 -28px;} #top-sns a.facebook{background-position:0px -84px;} #top-sns a.twitter{background-position:0px -56px;} #top-sns a.sns{background-position:0px -112px;} #top-sns a.buzz{background-position:0px -168px;} #top-sns a.gmail{background-position:0px -140px;}推荐使用基于Adobe AIR的CSS Spirites样式生成工具，只要在PS等图像工具中先排列好图标，再在这个工具中分别选定图像的区域大小便可以输出可用的CSS代码，十分便捷。另外就是要注意不是所有的图像都适用于用CSS来表现。
    • 使用WP Minify合并压缩JS，CSS，HTML文件，其具体使用方法参见http://neverweep.com/2011/04/wp-minify 。
    实现难度：★★★ ，加速效果：★★★★
  2. 减少传输文件大小：
    • 开启网站Gzip，这是最有效的减少传输数据量的方法，对HTML，JS，CSS文件的压缩率很高。判断网站 是否开启了Gzip可以到firebug网络面板中，点击上述的任意文件，查看头信息Tab中的响应头信息，contenten-coding为Gzip 即为开启了Gzip功能。目前大多数服务器均默认开启了Gzip，如果发现没有开启，可以在以“WordPress gzip”为关键字进行搜索，在此不再累述。
      实现难度：★★☆ ，加速效果：★★★★★
    • 对图像文件进行优化。网站主题中的图像文件，建议使用http://smush.it 或者PageSpeed中的压缩服务，这个功能可以在不降低图像质量的前提下尽量压缩图像文件。另外推荐除动态图像外均使用PNG-8格式储存图像，这种 格式一般比GIF具有更高的压缩比。针对博客中上传的照片，推荐将图像分辨率调制1024X768以下，并使用Advanced JPEG Compressor优化，这个工具可以直观的对比压缩前后图像质量的变化，选项也很丰富，可以在可接受的前提下尽量减少图像的体积。 （如果有条件，尽可能选择速度更快的图片托管服务器）。
      实现难度：★★☆ ，加速效果：★★★★
    • 精简无用的JS代码和CSS代码。一般博客中需要加载许多JS和CSS，可是其中有些功能或样式我们的博客中 用不到。这时可以将无用的代码删除或注释掉，再经过WP Minify处理后大小就能显著减小。以wp-codebox为例，在本博客中只需要显示代码的功能而已，代码框折叠等功能并不需要，所以可以将wp- codebox自带的JS文件清空保存即可。
      实现难度：★★★☆ ，加速效果：★★☆
    • 使用CDN加速。对于一般的网站，使用CDN加速的成本很大，必要性也不高。但是Google为我们提供了一 个使用CDN的可能，一般WordPress博客都会加载Jquery等JS库，使用Google CDN不仅可以减小服务器的负担，更重要的是由于其通用性，很可能访客的缓存中已经缓存了该JS库，这样就避免了再次加载所需的时间。比如需要引用 1.4.4版的Jquery，只需要在header.php中适当位置加入<script src=”http://ajax.googleapis.com/ajax/libs/ jquery/1.4.4/jquery.min.js”></script>使用外部Jquery库后还需要在前台禁止加载WP自带的Jquery库，需要修改/wp-includes/script-loader.php，将：1 2 3 4$scripts->add( ‘jquery’, ‘/wp-includes/js/jquery/jquery.js’, false, ‘1.4.4’); //改为 if(is_admin()){ $scripts->add( ‘jquery’, ‘/wp-includes/js/jquery/jquery.js’, false, ‘1.4.4’);}实现难度：★★ ，加速效果：★★★
    • 使用WP Minify合并压缩JS，CSS，HTML文件，其具体使用方法参见http://neverweep.com/2011/04/wp-minify 。
      实现难度：★★★ ，加速效果：★☆

小结：网络传输时间占据的时间最多，所以在精简文件数量和大小上多下功夫能产生明显的效果。合并压缩文件，启用gzip后访问速度会有质的提升。

客户端：

  1. 设定文件过期时间。设定比较适当的文件过期时间，可以减少再次访问的用户的时间。以apache为例，只要修改文件根目录下的.htaccess文件，在最后加入
    ### mod_expires
    ExpiresActive On
    ExpiresByType application/x-shockwave-flash A2592000
    ExpiresByType image/x-icon A2592000
    ExpiresByType image/png A2592000
    ExpiresByType image/jpeg A2592000
    ExpiresByType image/gif A2592000
    ### mod_expires其中最后的A2592000表示过期秒数，范例中的值为一个月。中间是文件的MIME类型，application/x-shockwave- flash表示flash文件，image/x-icon表示favicon.ico文件，image/jpeg 表示jpeg和jpg文件，
    实现难度：★ ，加速效果：★★
  2. 避免降低性能的图像、JS和CSS。以背景图像为例，可以在CSS设定图像得到repeat达到平铺的效果， 但是如果平铺的图像分辨率过低。比如采用1X1像素，那么将会占用访客极大的CPU资源，相反采用10X10图像，资源占用将会有很大的下降。CSS中要 避免大量使用text-shadow，box-shadow等属性，这同样也会对访客的资源造成很大负担。此外，由于IE中javascript的执行效 率较差，所以也要避免占用资源过大的JS，比如半透明、渐变等JS效果。
    实现难度：★★ ，加速效果：★★★★
  3. 指定图像大小。图像的HTML代码一般为1 2 3<img src=”http://yoururl.com/image.gif” alt=”image” /> //指定高度和宽度 <img src=”http://yoururl.com/image.gif” alt=”image” width=”120″ height=”90″ />制定图像的高度和宽度，有利于减少浏览器渲染的时间，并对可以在图像没有下载完成的情况下保持页面的结构，此外，尽量避免缩放图像，比如给一个10X10的图像指定高度和宽度为5X5，这样会减慢浏览器的性能。
    实现难度：★ ，加速效果：★★
  4. 使用更有效率的CSS选择器。比如如下DIV结构1 2 3 4<div> <div id=”div1″></div> <div></div> </div>对于网页上唯一的div1来说，使用 #div1 就比 .div #div1 更有效率。
    实现难度：★★ ，加速效果：★
  5. 避免不存在的链接。保证网页中的文件链接的有效性，可以避免返回HTTP 404等错误信息，防止时间的损耗。
    实现难度：★ ，加速效果：★★
  6. Cookie Free：当浏览器向服务器请求文件前，会先发送同域名下的cookie，但是服务器对于这些 cookie不会做任何处理。所以，除了尽量保持cookie体积小之外，还可以通过Cookie Free的手段避免请求时发送cookie。如果博客首页为http://neverweep.com，则所有此域名下得二级域名都会发送此 cookie，这样的域名除了使用另外的域名来做Cookie Free之外没有别的办法了（我的博客就是这样）。如果博客首页为http://www.neverweep.com，那么http: //img.neverweep.com的内容将不会发送cookie，从而加快了速度。
    实现难度：★☆ ，加速效果：★★

小结：客户端除缓存设置外影响并不大，因为渲染往往都在几十到几百毫秒内即可完成。不过有些因素会明显拖慢用户的浏览器，加大CPU占用，这也是需要为访客考虑的。设置一个合理的文件过期时间，优化页面在浏览器上的性能表现。