/

VPS主机网站加速

speed up website

博客架设在美国VPS服务器上,图的是服务稳定免备案,但缺点也是显而易见的,先不论GFW的风险,每次的访问请求都要走太平洋海底光缆一个来回,再加上国际出口带宽的限制,网站速度自然很难与国内服务器相比。

对于个人博客,预算有限,不可能花大价钱提升服务器硬件,也不觉得有必要购买CDN服务,那么只有榨干现有服务器资源、提升效率。如果你认为本站访问速度还不错也有折腾的兴趣,建议你继续往下阅读。

服务器端的优化

启用PHP自带的OpCache缓存组件

PHP从5.5版本开始内建OpCache模块,也就是之前的Zend Optimizer,它将预编译的脚本文件存储在内存中供以后使用,从而避免了从磁盘读取PHP 代码并进行编译的时间消耗。打开php配置,确保配置如下:

; 开关打开
opcache.enable=1
; 可用内存, 酌情而定, 单位 megabytes
opcache.memory_consumption=256
; 对多缓存文件限制, 命中率不到 100% 的话, 可以试着提高这个值
opcache.max_accelerated_files=5000
; Opcache 会在一定时间内去检查文件的修改时间, 这里设置检查的时间周期, 默认为 2, 定位为秒
opcache.revalidate_freq=240

安装mod_pagespeed

mod_pagespeed是Google推出的一个Apache服务器模块,目的就是加速网站并节约带宽资源。mod_pagespeed 可定制选项较多,可根据自身需求定制,Digital Ocean介绍了mod_pagespeed详细的安装方法, 前往这里。关于pagespeed各项设置,如果有不清楚的地方,最好的参考是Google官方说明

设置浏览器缓存

将CSS、JS、背景图片等内容缓存在浏览器,下次访问同样的内容将直接从浏览器缓存调用,对于开启浏览器缓存功能,先新建缓存规则如下并保存至/etc/apache2/mods-available/expires.conf (其中‘A86400’代表缓存有效期为86400秒)

<IfModule mod_expires.c>
 ExpiresActive on
 ExpiresDefault A86400
 ExpiresByType image/x-icon A2592000
 ExpiresByType application/x-javascript A604800
 ExpiresByType application/javascript A604800
 ExpiresByType text/css A604800
 ExpiresByType image/gif A2592000
 ExpiresByType image/png A2592000
 ExpiresByType image/jpeg A2592000
 ExpiresByType text/plain A86400
 ExpiresByType application/x-shockwave-flash A2592000
 ExpiresByType video/x-flv A2592000
 ExpiresByType application/pdf A2592000
 ExpiresByType text/html A3600
</IfModule>

然后执行如下代码后重启服务器:

a2enmod expires

保持与服务器连接KeepAlive

通常一个网页HTTP请求,会同时请求包括HTML、CSS、JS、JEPG等多个文件,在不开启KeepAlive的时候,相应会对每个请求建立一个TCP连接,这会一定程度造成服务器负担加重同时降低网速,开启KeepAlive后,能使得浏览器只生成一TCP来下载多个网页文件。开启方法为在Apache配置文件中找到KeepAlive的设置,并将默认的Off设置改为On

KeepAlive On

开启Gzip压缩

简单说Gzip类似PC端的Winrar,开启Gzip后服务器端会对输出文件进行压缩,具体效果可以参考这里:网站启用GZip压缩后,速度快了3倍。开启的方法也很简单,对于LAMP服务器架构,只需要执行如下代码然后重启服务即可,默认已经设置好了配置文件:

sudo a2enmod deflate

* 对于非VPS的用户,你对服务器的权限可能不足以支持你做以上操作,请咨询管理员,或者参考下面部分优化网页

网页优化

去除不必要的代码加载

比如现在张鹏的博客使用的Wordpress最新版本默认会加载Google字体、Emoji表情等,这些加载项并不是每个人都会用到,该关掉的就关掉吧。去除Wordpress头部不必要加载项可以参考这篇文章:WordPress 技巧:删除 wp_head 中无关紧要的代码

图片压缩

图片无疑是网页内容中占用流量最大的一部分信息,大部分的原始图片都可以压缩以减少文件大小,所以尽量在上传到服务器之前进行压缩。我推荐使用免费开源软件Caesium,软件非常小巧,简单易用,程序安装时无法选择中文,可以先使用日语安装,装好之后在设置里面设置为中文界面。

HTML、CSS压缩

绝大部分的开发者都会遵循一定的规则进行代码缩进,同时也会添加一些注释方便调试,去除这些不必要的内容可以在一定程度上加速网站。CSS压缩工具有CSS tidy工具,在线版本可以前往http://tool.chinaz.com/Tools/CssFormat.aspx,mod_pagespeed模块默认也会压缩CSS文件。对于Wordpress的HTML代码压缩机,可以参考WordPress前端html代码压缩优化一文。

DNS 预解析缓存

DNS 的解析速度一般在 100ms 以内,但 DNS 解析要发生在任何对服务器的请求之前,这样就会增加页面加载的时间,减少DNS解析时间和次数是个很好的优化方式。DNS Prefetching使具有此属性的域名不需要用户点击链接就在后台解析,所以这个方式能减少用户的等待时间,提升用户体验。只需要在网页添加如下内容即可:

<link rel="dns-prefetch" href="//www.example.com">

扩展阅读参考三个 HTML5 不常见特性简介

合并多个相同类型文件

合并多个CSS文件、JS文件、将所有网页设计元素图片合成一张大图再使用CSS Split技术控制不同位置的使用等,能有效减少文件请求次数从而加快网页加载速度。

Javascript异步加载

JS异步加载可以确保JS后面的内容可以提前展示,用户端的体验就是网页内容打开的速度更快了。比如Google Adsense在国内的访问速度很成问题,很容易导致网站的展示速度变慢,最新的Adsense广告代码就使用了异步加载来解决这个问题。仔细观察,会发现新的Adsense代码多了一个内容如蓝色部分: <script async src=” ”

其他加速

移动客户端不加载部分内容

对于手机客户端等屏幕宽度不足的设备,在网页布局上我们通常会使用CSS控制隐藏掉一些内容,比如两栏布局中的侧边栏,这种方法控制了内容不可见但是浏览器实际还是下载了这部分内容,也就是说网页下载的总体大小其实没有变化。

更彻底的方法是判断屏幕宽度,对屏幕宽度过小的设备不加载相关代码。比如用JS控制的方式举例,将原本展示的内容移到http://www.example.com/js/content.js里,在网页原位置放置如下代码,这样只有在浏览器宽度大于600像素才会加载相关内容:

<script language =javascript >
 var strContent = "";
 if(window.innerWidth >= 600) {
 strContent = "<script async src=\"\/\/www.example.com\/js\/content.js\"><\/script>\n";
 document.write(strContent);
 }
</script>

如果你对张鹏的博客使用的VPS服务器感兴趣,欢迎您使用我的推荐链接注册: http://www.linode.com/?r=4b75c69a62d5d6111e46c3c31a110c6b5ce05a02

Leave a Reply

Your email address will not be published. Required fields are marked *