网站的视觉设计及内容，是能否吸引访客的重要因素之一，但也不能因而顾此失彼，造成网站效能的瓶颈。从过去的访客行为研究分析指出， 等待一个网页的呈现时间不能超过十秒钟，但面对目前网页内容多媒体化的现实挑战，要达到这样的目标，在前端页面的设计上，也就需要多花 些心思。

　　针对网站效能最佳化归纳出以下方针，并举例加以说明：

　　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项准 则，解决效能表现不佳的现象。这些准则都经过实务证明为有效的解法，可以帮网站减少平均二至三成的网络传输时间。检视您的网站架构出了哪些问题，并对症下药加以落实，我相信可以让访客感受到明显的效能提升。