网站的视觉设计及内容,是能否吸引访客的重要因素之一,但也不能因而顾此失彼,造成网站效能的瓶颈。从过去的访客行为研究分析指出, 等待一个网页的呈现时间不能超过十秒钟,但面对目前网页内容多媒体化的现实挑战,要达到这样的目标,在前端页面的设计上,也就需要多花 些心思。
针对网站效能最佳化归纳出以下方针,并举例加以说明:
1. 减少需要发出HTTP Request的数量
当您设计的网页中包含的元件数量越多,Client需要对网站服务器发出的HTTP Request也会增加,同时也会延长网页处理的时间。
2. 采用Content Delivery Network服务
由Mirror Image、Akamai、SAVVIS等业者所提供的Content Delivery Network(CDN,内容递送网路服务),可以供应强大的全球网路基础架构 ,将网站以最有效的方式传送给全球使用者,并自动帮网站选择最佳路径传送资料,例如,根据浏览者所在地、网站品质及流量状况,选择距离用户端最近的资料中心传送资料,确保网页的浏览品质及运作速度。
3. 在网页中加入过期档头
您可以利用这个设定让网页具备快取机制,缩短页面载入时间,尤其是针对内容不常变动的网页。当然这样的运用,得视您的网页性质而定, 若内容变动频率高的网页,则不适用此方式。
4. 善用Gzip压缩机制
以XML/HTTP做为资料交换的开放格式已经十分普遍,传输的档案体积,较过去单纯的EDI方式增加许多,用传送压缩时间换取传输时间,也是一 种提升效率的策略,目前常见的网站伺服器大都支援此项技术。您甚至也可以视情况选择压缩HTML、CSS及JavaScript的档案内容。
5. 将Stylesheet置于网页页首
将样式表(Stylesheet)置于页首,可以让CSS设定先行载入,在第一时间套用设定直接呈现网页。相较于把样式表放置在页尾,等所有内容都 下载完毕后才套用,样式表置于页首的作法,除了页面呈现速度较快,载入过程中也较不易造成空白页的出现。
6. 将Script内容置于页尾
许多实际状况中,网页包含的Script程式,本身并不需要在载入后立即执行,所以作者建议将这些程式码置于页尾,至少内容可以在传输前段 时间即备妥,让使用者有较佳的浏览体验。
7. 避免CSS Expression的撰写方式
CSS Expression的目的,在于让自订样式的语法可以取代部分的Script内容,虽然这么做很好用,但因网页显示过程中花费较多的逻辑判断时 间,造成网站效能的致命伤。
8. 将JavaScript及CSS内容独立于网页内容之外
透过独立内容的方式,让HTML本文档案缩小,而且可以同时被浏览器下载,以缩短网页呈现的时间。
9. 减少DNS查找的次数,缩短取得网页内容之前的前置时间
虽然网页可以串连不同网站来源的内容,但是不同网站来源的内容一旦太多,便会延迟页面载入速度;如果能够减少网页内不同网站来源的内 容,就可以减少从用户端发出的DNS Request数量,缩短DNS的查询时间。
10. JavaScript内容精简化
网页中的JavaScript也是下载的一部分,所以当程式码内容较多时,亦会直接影响网页下载的速度。检视一下程式码,移除不必要的部分。
11. 避免重导向
网页重新导向是很方便的功能,但对于使用者而言,他必须等待更多的时间直到最终页面被载入,所以应该尽可能避免使用重导向转址功能。
12. 移除重复的Script程式码
重复的Script程式码需要花费更多的下载时间,这个问题通常发生在程式码未能妥善模组化的情况下,检查一下您的Script程式吧。
13. 善用Etag
透过设定Web Server中的Entity Tag方式,能决定网页中被快取的内容,以加速网页呈现,但也得视网页内容特性而定,Etag主要运用在静态 页面上,而动态显示内容的网页则不适用此方式。
14. 让Ajax程式可做到暂存快
Ajax架构透过非同步的传输方式,让使用者具有较佳的使用体验,却不见得是效能的保证。除了可以透过利用Gzip压缩、避免DNS查找次数、简 化JavaScript内容之外,控制HTTP过期档头来快取Ajax网页,也能发挥明显效果。
使用3个度量值(Page Weight、Response Time、YSlow Grade)逐一检视这些网站,找出问题点以及可以改善的地方,配合前述建议的14项准 则,解决效能表现不佳的现象。这些准则都经过实务证明为有效的解法,可以帮网站减少平均二至三成的网络传输时间。检视您的网站架构出了哪些问题,并对症下药加以落实,我相信可以让访客感受到明显的效能提升。
留下联系方式,我们将会在一个工作日内与你联系