关闭

如何给wordpress提速以及进行性能优化–初级入门版之3

609人阅读 评论(0) 收藏 举报
关于此系列的前两篇讨论可以参见proudeng博客的链接:
如何给wordpress提速以及进行性能优化–初级入门版之2
如何给wordpress提速以及进行性能优化–初级入门版之1
由于本篇讨论的问题跟浏览器相关,会涉及到http的cache机制,所以如果对于http的cache机制不了解的话,可以参考下面proudeng博客的一篇博文。
wordpress性能优化中需要了解的http协议–关于cache

上面的这篇博文可以做为关于http的cache机制的一个简答的介绍,参考一下,应该一些基本的概念都有了,所以,在本博文中,就不再罗嗦一遍了。
最上面的的两篇讨论分别讨论了在优化网站性能,提高网站响应速度的努力中,对网页内容以及服务器端的优化,按照我们预先的设定,还剩下最后的一个环节没有讨论,就是基于浏览器特性所做的优化.什么叫做基于浏览器特性所做的优化呢?这个词很难给人一个直观的第一印象.实际上我们所要讨论的就是,我们要熟悉浏览器的一些习性.只有熟悉了浏览器的一些习性和特性,我们才能投其所好.让浏览器舒服,我们也就会达到我们优化性能,提升速度的目的.

下面我们还是会将上两篇中出现的浏览器到服务器的连接图给再次的展示出来.这至少能够让我们再次的看到,浏览器在整个连接过程当中的角色和处的位置.
http_request_process

所以,我们的目的是,要先了解浏览器的一些特点,然后我们会根据浏览器的这些特点,舒舒服服的给浏览器喂合适的食物,或者使用浏览器给我们提供的机制,好好的利用它,从而提高网站的响应速度和性能.
那么,浏览器有哪些主要的影响性能的特性呢?下面会列出几点比较重要的特性(这几点特性并非我总结出来,而是被广泛熟知的基本特性,在Yahoo和Google关于优化的主题文章中也被广泛提及.)

  • 浏览器能够并行跟服务器建立起多个连接.但是对于每一个域名,有并行连接的上限值(比如firefox 3,对于每一个域名,能够并行的建立6个连接)

  • 当浏览器在下载javascript等脚本文件时,此时的浏览器就不能够并行的下载其他的文件了.(原因未深究,可能跟脚本的特性有关吧,不熟悉,不知)

  • 浏览器会对自己向服务器请求的资源进行缓存,所谓缓存,就是保存服务器传送过来的资源,如果浏览器下次再次访问此资源的时候,就可以直接使用此缓存的文件.而不用再次向服务器请求此资源。

  • 浏览器从向服务器发起连接,到向用户显示页面要经过下面几个过程,有图为证:

    • 浏览器端进行DNS解析,找到服务器的ip地址

    • 浏览器端通过TCP跟服务器建立起连接

    • 因为有网络延迟,所以需要等待服务器开始传输页面数据

    • 浏览器收到数据,开始渲染页面

    • 传输完成

    • 页面渲染完毕




http_request_process
当然,浏览器的特性还有很多,为什么只列出上面这几个呢?因为针对上面的这几个特性,存在已知的优化方法。

浏览器的并行连接


所谓并行,总要知道什么跟什么在一起并行,在这里所说的并行,指的是对同一个域名,可以同时请求的资源数量。就比如上面所指出的,貌似在Firefox3中,对于每个域名,可以同时发起6个请求。
所以就能看出来,这其中是存在瓶颈的,找一个比较极端的例子来说,如果是象一个淘宝的商家,其主页上面有很多的图片,比如说有30个,是很正常的,当有浏览器对此页面发出请求时,明显这些图片,没个图片都是一个文件,都要下载到浏览器。但是每次只能够下载6个文件,所以,访问这样的一个页面,就需要分好几批发出多次请求之后,才能完整显示。这显然会影响页面的显示速度。如果网站中图像文件比较多的话,就会出现这样的问题,一个可行的思路是,将内容分散到不同的域名中。因为既然对于一个域名,能够同时发出6个请求,那么我如果将上面的30个图片分散到6个不同的域名中,那不就可以同时都下载这30个图片了么?实际上,很多的网站确实是这么做的,比如你去看苏宁易购,网易这样图片的数量很多的网站时就会发现这种现象,所有的图像都是分散到一些子域名中的。比如苏宁易购中的图片就放在了image1.suning.cn,image2.suning.cn,image3.suning.cn这样的一些子域名中的,这种做法确实能够提升网站的访问速度,因为相当于突破了并行连接的限制么。
对于图像的处理方法

那么对于wordpress这样的小系统来说,有啥好方法呢?其实也可以仿造大网站的做法,如果你有主域名的话,开辟一个或者两个子域名,专门用来放图像的链接。
另外一个很通用的做法就是采用外链。比如blog.proudeng.com这样的我的博客,本身服务器就是在国外,虽然可以开子域名,但是毕竟距离这么远在这里,传输图片肯定也快不到哪边去。而且本身我的博客上都是中文的文字,也不指望国外的读者访问,所以就可以直接在国内找一个外链提供商,将自己的图片存放在外联提供商处,不仅增加了并行连接的上限,而且也对于每个图片而言,因为服务器在国内,也提高了下载的速度。一举两得阿!!
我现在用的外链提供商是六间房,六间房的界面相当的简单,我相当的喜欢,虽然有时候会被强制打上logo.我也一直在用。网上搜了几个外链提供商,用起来还可以的:

  • 六间房.我觉得这个很好,免费。流量,空间大小之类的在网站上没找到描述

  • poco.免费,有流量跟空间大小的限制

  • 又拍网.免费,有流量和空间大小的限制


六间房不错的,可以试试。
不过使用这些免费的外链提供商来说,我们最好自己备份一下自己的图片,万一哪一天网站关掉了,那就哭都来不及了。最好在自己的网站上也备份一个拷贝。
对于脚本的处理方法

在wordpress中,使用javascript是必不可少的。wordpress有一个插件叫做"Use Google Libraries",使用这个插件,可以使用google的javascript的函数库,代替使用自己本地的函数库。
这个插件我也使用了,没有对比使用前后的性能差别,没有量化的数据,只能是直觉的相信google,不管怎么样,这可以降低本地的服务器的负载,并且不管在哪里,google服务器的性能应该都很好吧。且罢,使用之。

脚本文件/css文件在页面中的位置


这两类文件在页面中的位置问题的讨论,在yahoo和google中都有涉及。主要的原则就是脚本文件尽量往页面的底部放,css文件尽量的往页面的顶部放。
至于为什么,上面也提到了,虽然浏览器能够对于同一个域名的资源进行并行的访问,但是如果访问的是一个脚本文件的话,那么,就不会再并行的访问其他的5个文件了,非要等到此脚本文件下载完成之后,才能再访问其他的资源。这就是为什么脚本文件要放到页面的最后,是要尽量的提高下载的速度。
至于css文件为什么要尽量的往页面的头部放,主要是因为,先下载了css文件的话,对于用户来说,在下载页面的过程中,就能够看到页面慢慢的从部分到整体的显示出来。如果css文件放在底部的话,则面对用户的一直是一个空白的页面,直到最后突然全部的页面显示出来,这对用户体验来说比较不好(这些都是yahoo和google说的,我接触的不是很多,体验不是很充分。。。)

关于缓存


关于缓存,在如何给wordpress提速以及进行性能优化–初级入门版之1中探讨了服务器端的缓存。现在这里的缓存的概念是浏览器端的缓存。这个缓存机制是通过http协议来实现的,其机制可以参照wordpress性能优化中需要了解的http协议–关于cache中的描述,应该已经描述的比较的清晰了。
实际上对于浏览器端缓存的处理,一般的是在Apache服务器端来配置这个http的缓存机制,当然html文档中我们也可以对单个的html文档做单独的设置。这些对于只是用用wordpress的普通用户来说就没有必要了解了。其实一些缓存的指导思想也是很简单,比如说对于某些永远也不会变的图片来说,缓存机制设置为永远可用之类的。
其实比较好用的在入门版之一中描述到的一个叫做"WP Widget Cache"的插件,就是可以用来简单的设置边栏的小widget的缓存特性的。可以使用一下。

关于HTTP连接过程


这个过程了解一下也是蛮好的,参照上述的图,从中可以看出很多的东西,比如简单的说,一眼就能看出来的就有:

  • 在国外的服务器为什么响应会比较的慢呢?因为浏览器端发出请求,跟服务器端传送数据时,都是有延时的,这个延时明显是跟传输距离成正比的(通常情况下)。上图的"Time to First Byte"就是服务器传给浏览器时候的传输延迟,可见占了整个时间的很大的一部分

  • DNS解析也是需要时间的。所以,结合上面的”浏览器的并行连接“部分讨论的内容,可见,也不是说为了提高并发率,子域划分的越多越好,因为明显,如果DNS解析所耗费的时间超过了并发所带来的好处的话,那就是得不偿失了么?所以,在yahoo上,好像建议是,子域划分为2~4个比较的好,综合的效率比较的高。


over.终于告一段落。
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:16420次
    • 积分:374
    • 等级:
    • 排名:千里之外
    • 原创:22篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条