Posts Tagged ‘网站优化’

让我的博客变得社会化一些 2009年07月19日 No Comments

.        这两天终于可以花时间对我的站点进行一些修修补补和优化，主要是对页面色调进行了重新搭配，将以前白色的主色调换成了现在的黑白两色，这样可以增加一些持重的感觉（个人观点），并且变更了页面的布局，在文章标题前面增加了一个类似Office Word logo的小图标；同时，为了跟得上社会，我也将一些Web2.0应用直接用图标的形式放在了页面右上方，这些图片是放在一个CSS Sprites里面的，如果有兴趣，你可以将图片保存到本地，会发现它们其实是一张图片，而不是零散各自独立的小图标，这样做的好处是可以减少Http请求次数，提高访问速度；图标有些大但容易发现（这让我想起百度老年），最后，对CSS文件也进行了一些优化，将原来的7个CSS文件合并成1个管理，减少不少HTTP请求。
.       这次在页面右上角增加了一个邮件链接、一个Twitter地址和一个饭否地址，同时将以前的Feedburner订阅地址也集中到一起了，并进行了一些排版（要感谢blues的意见，否则会比现在难看），其实我制作的CSS Sprites里面还包含的Delicious和Digg的图标，等以后有空再将它们集成进我的博客文章里面。

Filed under 老日记
标签：,

5招轻松提高网站访问速度 2009年07月17日 No Comments

.        一些著名博客站点（如月光博客）由于拥有独立服务器托管和良好带宽，页面访问迅速极快，而小博客往往是花小钱租借空间，访问并不理想。曾经我也发誓等哪天有钱了也给自己的空间升升级，可想到雅虎兴起、杨致远成名后还在用电话线上网的故事，本人决定将页面优化进行到底。这里分享几点页面优化的心得。
.        一次Web访问概括起来讲就是“前台-后台-前台”，用户通过浏览器向服务器发送HTTP请求，服务器接收到请求后调用后台程序运行计算并向浏览器回送浏览器可识别可解释内容（如HTML、脚本文件、CSS、图像、Flash动画、视频和音频等），最后又重新通过浏览器将这一切呈现给我们，因此，要改变访问速度，就可以在这个过程中“动手脚”。
1.    网页尽量少包含图片（这招实用易操作）；这有两个方面，一个是用于装饰网站的基本图片，另一个是文章中用户做插图的图片。曾经用本人的网站做过测试：将网站首页保存到本地，当文章包含几张普通插图时有680K，而去掉图片后只剩下120多K。图片是消耗网站加载速度的一大原因。
2.   减少HTTP请求次数；刚刚我们粗略分析了一次Web访问的全过程（“前台-后台-前台”），经研究，一次HTTP请求中只用了10%~20%的时间来接收和渲染页面，而有80% ~ 90%的时间用在发出请求上，因此减少HTTP请求是节约时间的有效手段。通常可以通过合并文件来减少，假设一个网站包含1个HTML文件、2个Javascript文件、2个CSS文件以及零碎的11个小图片文件，1+2+2+11=16，也就是说需要发送16次HTTP请求，而如果我们将2个Javascript文件合并在一起，CSS文件及图片文件也用相同方法合并，这时请求数减少到 1+1+1+1=4（次）。如果加载的文件更多，这样改进的效果将更加明显。
3.   压缩文件；将需要加载的文件如CSS、脚本经过一些专门的压缩工具压缩成较小的包，这有助于提高网页下载速度。当网页中包含较大的脚本文件时，用压缩工具可以看到惊人的压缩比。
4.   合理安排文件加载顺序；由于文件的加载顺序一般是按照其在文本中出现的先后顺序来进行的，我们将CSS文件包含在<HEAD>标签中，而Javascript文件往往放在最后加载(一般在</body>之前即可)。
5.   尽量少用<TABLE>标签构建页面布局；用<TABLE>元素构建网页布局是传统的构建方法，但不得不说这是一个落后且需要淘汰的方法，我们提倡使用<DIV>标签来规划页面布局，因为<TABLE>构建的网页需要整个TABLE包含的内容都加载后才会呈现，对于网速慢的网络浏览器容易出现白屏，给用户带来极差的体验，而用<DIV>构建的网页采用局部加载，即使网络不佳，页面也是逐步呈现而不是白屏等待。
.        以上五点是本人的一些实际操作经验，虽然网站优化还有很多学问，但做了以上5点，我相信网站一定会出现令人高兴地变化。

Filed under 老技术
标签：