5

网站访问速度优化

 4 years ago
source link: https://zhiqiang.org/it/speed-website-2015.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

网站访问速度优化

作者: 张志强

, 发表于 2015-01-11

, 共 1167 字 , 共阅读 89 次

前面文章已提到，阅微堂搬迁到了阿里云。受预算的限制，服务器只有单核的 CPU ，内存只有 1G ，同时又安装的是 windows 系统，导致服务器性能极低下。网络带宽也只有 1M （即最大理论下载速度只有 128k/s ），访问速度受到极大的影响。不得已，采取若干中方法降低服务器性能和带宽压力，提升页面访问和显示速度。

1. 全站静态化

WP Super Cache 将整个博客静态化了，并且在访问过程中不用调用 PHP 模块，极大降低了对 CPU 以及内存的占用，是降低服务器性能压力、提升访问速度的主要功臣。

2. 使用 CDN 静态库

博客使用的 jquery、bootstrap、字体等静态文件全来自于公用的静态 CDN。我选择的是百度静态资源公共库，这里提供的资源最全。这种方式存在多个好处：

  1. 降低对服务器资源的占用。
  2. 公开库通常由大厂商维护，有多个 CDN 节点，访问速度比自己的服务器要快得多。比如百度静态资源公共库由百度遍布全国各地 100+个 CDN 节点提供加速服务。
  3. 由于有很多网站调用同样的静态文件，这些文件很有可能在本次访问前已经缓存到本地，极大地增加网页渲染的速度。

3. 用字体替代图标

之前网页设计者通常使用一种 css sprite 的技术，将图标拼到一张图上，通过 css 调整显示位置以显示正确的图标，以降低浏览器申请服务器资源的次数。这样做太费时费力。现在取而代之的一种技术是字体图标。

这种技术下，图标和普通文字的显示方式一样，这意味着它可以随意缩放，可以设置背景色、字体颜色，以及通过 CSS 实现更复杂的效果。

我使用了的是http://fontawesome.io/，目前最流行的开源图标字体库，内有 400 多个图标。

4. 使用 instantclick

我在几个月前就安装了 instantclick，效果非常好。instantclick 主要的原理是有两个，

其一是用户在点击链接跳转时，在将鼠标移到链接上到点下去，这中间有大约 100ms 不等的时间， instantclick 利用这个间隔提前下载链接内容，当需要跳转时，就节约了大量下载网页内容的时间；

其二， instantclick 显示跳转后的页面时，会重用之前的网页框架，直接利用前一个网页缓存的静态文件内容（比如 CSS、JS 文件），这大大降低了本地网页渲染所需要的时间。

不过 instantclick 主要降低二次访问所需要的时间，对于用户的第一次访问无能为力。

5. 全站启用 CDN

我的域名解释一直托管在安全宝上，而安全宝提供免费 CDN 服务，配置非常简单，我已将其打开。CDN 对于大访问量可大大降低原服务器的性能和带宽压力，但本博客访问量不高，从后台显示数据看， CDN 的回源率很高。现在开着这个，就当做一次试验吧。

Q. E. D.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK