网站的高性能架构之页面性能优化措施

页面性能优化主要指的是WEB前端页面在浏览时的表现。比如打开速度,不同浏览器的兼容性及响应式布局的页面外观稳定性等。

技术指数包括:浏览器加载时间、CSS和JS的请求次数、图片尺寸和大小、CDN等。

具体措施:

一、浏览器访问优化

  1. 减少http请求次数。HTTP协议是无状态的应用层协议,每次HTTP请求都需要建立通信链路、进行数据传输,服务器对每个HTTP请求都需要启动独立的线程。这无疑会增加服务器的负担和系统资源开销。因此,减少HTTP请求的次数和数量可有效提高访问性能。减少HTTP的主要手段是合并CSS和Javascript以及图片数量(合并图片经常会使用,可通过CSS偏移响应鼠标点击操作,构造不同的URL)。
  2. 启用浏览器缓存。当访问一个网站的时候,其CSS、JavaScript、Logo、图标这些静态资源文件更新修改的频率都比较低,而这些文件在没有缓存的情况下每次HTTP请求都需要调用,启用浏览器缓存功能后将这些文件将缓存在浏览器中,这样可以极好地改善浏览性能。本站就启用了页面缓存技术。你会发现,第一次打开的速度明显比后续的页面打开速度慢。如果要重新体验比较,可以清除浏览器缓存再试一次。通过设置HTTP头中CacheControl和Expires的属性,可设定浏览器缓存,缓存时间可以是数天,甚至是几个月。WordPress有一些优化插件,可以直接设置页面缓存,非常方便。使用浏览器缓存策略的网站在更新静态资源时,应采用批量更新的方法,比如需要更新10个图标文件,不宜把10个文件一次全部更新,而是应一个文件一个文件逐步更新,并有一定的间隔时间,以免用户浏览器突然大量缓存失效,集中更新缓存,造成服务器负载骤增、网络堵塞的情况。
  3. 启用压缩。对服务器端的文件进行压缩,在浏览器端对文件解压缩,可有效减少通信传输的数据量。文本文件的压缩效率可达80%以上,因此HTML、CSS、JavaScript文件启用GZip压缩可达到较好的效果。注意:压缩对服务器和浏览器产生一定的压力,在通信带宽良好,而服务器资源不足的情况下要权衡考虑。另外,有些情况下,文件压缩可能会导致网页显示不正常,这种情况就需要逐步排查,确定是由于哪个文件压缩导致的问题。Wordpress的优化插件中,有些可以设置排除文件。这样就可以有效规避文件压缩带来的影响。
  4. 优化css和js的位置和作用域。
  5. 减少Cookie传输。一方面,Cookie包含在每次页面请求和响应中,太大的Cookie会影响数据传输,因此哪些数据需要写入Cookie需要慎重考虑,尽量减少Cookie中传输的数据量。另一方面,对于某些静态资源的访问,如CSS、Script等,发送Cookie没有意义,可以考虑静态资源使用独立域名访问,避免请求静态资源时发送Cookie,减少Cookie传输的次数。

二、CDN加速

CDN(Content Distribute Network,内容分发网络)的本质仍然是一个缓存,而且将数据缓存在离用户最近的地方,使用户以最快速度获取数据。CDN能够缓存的一般是静态资源,比如图片、文件、CSS、Script脚本等,这些文件访问频度很高,将其缓存在CDN服务器上可极大改善网页的打开速度。Shopify店铺的静态资源基本都是存放在CDN服务器上面的。

三、设置反向代理服务器

普通企业网站,使用反向代理的必要性不大。但是这个确实是一个很有效的方法,对于网络公司来说,可以统一部署。

四、全球多点部署

对于外贸网站来说,建站服务器技术多了一个话题就是多点部署。除了多语言,网站在全球范围的打开稳定性和浏览速度也成了客户最关注的话题。除了可使用CDN加速服务之外,多点部署也成了一个非常好的解决方案。如果想了解更多,可以直接联系布瑞恩咨询。