您的浏览器不支持CSS3,建议使用Firfox、Chrome等浏览器,以取得最佳显示效果

网站搭建从零开始(八) 网站加速技术

网站搭建从零开始 494℃ 0 2年前 (2014-12-17)

系列博客说明

《网站搭建从零开始》系列博客 http://www.paincker.com/category/mobile-web/website-primer

对于完整的学习,强烈建议先阅读《网站搭建从零开始(〇) 内容概要与学习方法》 http://www.paincker.com/website-primer-0


网站搭建好以后,有一个很重要的事情,就是对网站的访问速度进行优化。特别是国外服务器,网络速度比较慢,如果网站访问速度又没有去做优化,访客等太久会严重影响访问体验。

本文以WordPress为例介绍一些网站加速技术,其中大多数方法同样适用于非WordPress搭建的网站。本篇只做简单列举,而不涉及具体的实现,因为具体实现网上已经有大量博客做了介绍。

一、优化网络速度

选用合适的服务器

如果有可能,使用国内服务器,显然会比国外服务器要快很多。如果经济允许,使用双线主机效果会更好,双线主机对国内电信和网通两种不同的线路分别进行了优化,能实现国内电信网通用户都可以快速访问。相应的还有多线主机,对移动等网络也进行了优化。

但是考虑到国内服务器备案比较麻烦,价格相对也贵一些,或者还有其他因素,很多时候只能选用大陆地区之外的服务器。例如香港主机,或者是国外主机。国外主机,例如Linode在日本东京的机房,相对来说离国内距离近一些,按理说访问速度也会稍微好一点。国外主机访问慢,据了解,主要的因素就是GFW导致的,这也是没办法的事。

使用CDN加速技术

CDN加速有两种,一种是服务器购买后就带有CDN加速的功能,例如我在网上就见过,号称免备案的国内主机,其实是用的香港主机和国内的CDN镜像服务器组成的,并非真正的国内主机。另一种,是自己可以购买到的CDN加速服务,例如百度加速,加速乐等等。百度加速要求网站进行备案,加速乐则没有这样的要求。至于加速的效果,我自己访问的时候没有感觉到有什么区别,可能是因为我的网络和服务器之间连接比较通畅;对于其他网络,可能会有一定的效果,没有去做验证。关于CDN加速的原理请自行了解。

使用CDN引用jQuery等公用库

在很多网站中都会用到jQuery等公用库,其本质上也就是一个几十到几百KB的一个js文件。对于一个网页来说,几百KB其实已经算是一个不小的容量了。如果你的jQuery库就放在自己的服务器上,并且服务器访问速度不理想,这样的话用户访问你的站点时,还需要从你的服务器上下载完jQuery库才能正常打开页面。一个简便易行的做法,就是使用CDN引用jQuery公用库,例如新浪、百度、Bootstrap等网站,都会提供公用jQuery库的引用地址。这样的话,用户浏览器可以直接从那些高速站点下载这个公用库文件,大大加快了访问速度。这里要给出的一个建议是,为了保险起见,对于一个库可以设置多重引用,如果前一个站点的引用加载失败,就自动使用下一个站点的引用;可以把对自己站点中相应库文件的引用放在最后。

可参考《推荐一些国内的Jquery CDN免费服务》 http://www.paincker.com/jquery-cdn

禁用谷歌字体

WordPress较新的版本中默认使用了谷歌字体,但是谷歌在国内几乎无法访问,这样页面就会卡在那等待字体加载完成。为了避免这种情况,就需要禁用默认的谷歌字体了。

可参考《WordPress后台禁用Google Open Sans字体提高加载速度》 http://www.paincker.com/wordpress-disable-google-font

二、优化服务器响应时间

使用高配置服务器

如果有条件尽可能使用VPS而不是普通的虚拟主机,例如Linode的VPS,使用的是全固态硬盘,处理用户请求的速度一般会比使用机械硬盘的服务器要快。而服务器的其他配置也可能会影响请求处理的速度,特别是对于那些访问量、数据量较大的站点来说更是如此。

禁用不必要的插件

WordPress中有很多插件,虽然好用,但是安装的插件太多,对于服务器来说,增加了负担。因此尽可能禁用不必要的插件,有利于提高用户访问速度。

使用WP-Optimize 优化数据库

动态网页每次响应请求时,一般都需要访问数据库,而数据库操作一般也是比较慢的。使用WP-Optimize插件优化一下数据库,删除一些不必要的内容,对于网站提速有一定的帮助。

使用合适的主题模板

一些高质量的WordPress主题模板考虑到了很多东西,包括前面说的谷歌字体的禁用,包括很多插件中才会有的功能都已经集成进来,从而不再需要安装相应插件。好的主题模板对于网页内容往往也做了一些优化,能减小网页尺寸从而加快速度。

三、优化网页内容

去掉网页中不必要的元素

有时候网页中会有一些不是很必要的元素,但是却占据了较大的尺寸,例如一些大的图片甚至Flash动画等内容,尤其是对于手机访问者来说,对访问速度的影响比较明显。

HTML代码压缩

网页HTML源代码的格式基于标签,而不需要依赖换行符,也就是说,如果你愿意,可以把整个网页的源码写成一行。虽然这样写起来可读性会大大下降,但是对于网页加速确实有一定的作用,毕竟节省了很多换行符。

CSS代码压缩

CSS代码基于大括号等分隔符,和HTML一样不依赖换行符。同样的道理,它也可以进行压缩。我做过一个实验,之前用过一套主题,里面最主要的一个CSS文件在有正常换行的情况下,尺寸是110KB左右,而进行了压缩删去所有换行符之后,只剩了80KB,减少了不小的体积。

这里推荐一个CSS在线压缩工具 http://tool.lu/css/ ,该站点同时也有一系列其他的在线工具,例如HTML压缩,用起来也很方便。

对于需要比较频繁修改CSS的情况,我推荐使用上面工具中的“净化”,使得每个元素压缩成一行,这样不仅尺寸足够小,又能很方便的进行编辑。

JavaScript代码压缩

JavaScript压缩和前面的HTML、CSS压缩类似,推荐使用的压缩工具是 http://css-js.cn

可参考《CSS和JavaScript在线代码压缩工具推荐》 http://www.paincker.com/css-js-tool

四、图片的优化

减小图片尺寸和显示质量

现代的网页少不了图片之类的元素,因此图片的优化也很有必要。首先第一条就是可以考虑减小图片的像素大小,能大大减小图片尺寸。如果对于图片质量要求不高,适度降低图片显示质量换来更快的访问速度,也是可以考虑的。

图片压缩

图片可以通过一些手段进行压缩,同时保证其显示效果没有明显变化。对于JPG图片,可以使用WP Smush.it插件进行压缩,可以设置在上传时自动压缩,也可以压缩已有图片。对于PNG图片,可以通过TinyPNG网站进行压缩,一张PNG图片的尺寸减小到了1/5甚至更小,但是显示效果却几乎没有变化。也可以使用插件Compress PNG for WP,调用TinyPNG的API进行PNG图片的自动压缩,但是TinyPNG的免费服务有一定的使用限制。

TinyPNG的官网:https://tinypng.com
可参考《使用TinyPNG和Compress PNG for WP插件自动压缩上传的PNG文件》 http://www.paincker.com/compress-png-for-wp

使用CSS绘制图表和切割小图片

网页中常常有一些很小的图标之类,一方面可以考虑使用CSS直接进行绘制;另一方面,可以把多张图标放到一张图片中,利用CSS进行切割,比单独加载每张图片速度会快一些。

jQuery延迟加载图片

很多网站都采用了lazyload延迟加载的方式显示图片,刚打开网页时图片并不加载,直到访问者滚动到相应的位置,图片才会一张一张慢慢加载出来。这样可以节省流量,同时也减小了等待网页显示所需要的时间。

五、页面压缩和缓存技术

使用gzip压缩页面

页面压缩对于网页访问速度也很好的提升效果,很多站点都采用了页面压缩技术。网页采用gzip进行压缩后,再传输到用户浏览器,然后解压并显示出来。传输的过程中往往会节省超过一半的流量,甚至达到70%~80%,大大加快了访问速度。

具体操作可参考《在WordPress中启动Gzip网页压缩》 http://www.paincker.com/wordpress-gzip

页面缓存技术

对于WordPress,使用WP-SuperCache插件对动态页面进行缓存,避免每次请求时都临时生成页面,这样也会加快访问速度。

本篇介绍就到这里,如果考虑到了这么多因素之后,网站访问速度应该会比较快了。欢迎大家访问我的站点 http://www.paincker.com 。我的站点采用了一定的加速优化,但是由于服务器的原因,部分网络下还是不能较快的访问甚至访问不了,只能有机会换国内的服务器了。

0

暂无评论

评论前:需填写以下信息,或 登录

ERROR: si-captcha.php plugin: GD image support not detected in PHP!

Contact your web host and ask them to enable GD image support for PHP.

ERROR: si-captcha.php plugin: imagepng function not detected in PHP!

Contact your web host and ask them to enable imagepng for PHP.

用户登录

忘记密码?