Steve Souders 這個傢伙寫了一本書叫做：High Performance Web Sites: Essential Knowledge for Front-End Engineers
這本書裡定義了14條讓你的網頁加速的方法，分別如下：
- Make fewer HTTP requests
- Use a CDN
- Add an Expires header
- Gzip components
- Put CSS at the top
- Move JS to the bottom
- Avoid CSS expressions
- Make JS and CSS external
- Reduce DNS lookups
- Minify JS
- Avoid redirects
- Remove duplicate scripts
- Turn off ETags
- Make AJAX cacheable and small
而以下是我研究後的心得分享：
1. Make fewer HTTP requests
- 減少 Image 的 Request 次數
- 使用 CSS Sprites 技巧
http://alistapart.com/articles/sprites
- 使用 Image Map 技巧
- 使用 Inline Image 技巧 ( data: )
http://tools.ietf.org/html/rfc2397
P.S. 可以開發一個 Inline Image 產生器！
P.S. 建議將 Inline Image 快取在 CSS 檔案中，這樣可避免 HTML 太大
- 減少 CSS / JavaScript 的 Request 次數
- 整合多個分開的 CSS / JavaScript
2. Use a CDN
- N/A
3. Add an Expires header
- 加入 Expires Header 到 Image, CSS, JavaScript 檔案裡
4. Gzip components
- 壓縮 HTML, JavaScript, StyleSheet, XML, JSON，但切記「不要壓縮 Images, PDF 檔案」！
- 設定方法
Apache 2.x: 使用 mod_deflate
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript
IIS 6.0
Enabling HTTP Compression (IIS 6.0)
http://www.microsoft.com/technet/prodtechnol/WindowsServer2003/Library/IIS/502ef631-3695-4616-b268-cbe7cf1351ce.mspx?mfr=true
Using HTTP Compression for Faster Downloads (IIS 6.0)
http://www.microsoft.com/technet/prodtechnol/WindowsServer2003/Library/IIS/25d2170b-09c0-45fd-8da4-898cf9a7d568.mspx?mfr=true
Enabling HTTP Compression in IIS 6.0
http://dotnetjunkies.com/Article/16267D49-4C6E-4063-AB12-853761D31E66.dcik
IIS Compression in IIS6.0
http://weblogs.asp.net/owscott/archive/2004/01/12/57916.aspx
IIS 5.0
HOW TO： 啟用 IIS 中的 ASPX 壓縮
http://support.microsoft.com/kb/322603
- HTTP Header Style
HTTP request
Accept-Encoding: gzip, deflate
HTTP response
Content-Encoding: gzip
Vary: Accept-Encoding ( 這行是給 Proxy Server 看的 )
- 其他注意事項
- 個人化的頁面要加上 ==> Cache-Control: Private
- 移除 ETags (Rule 13)
5. Put CSS at the top
- 一定要將 CSS 放在 <head> 區段載入!
- 使用 <LINK> 標籤，不要使用 @import 語法
- Avoid Flash of Unstyled Content (FOUC) in IE
http://www.bluerobot.com/web/css/fouc.asp/
<!-- Hack to avoid flash of unstyled content in IE -->
<script type="text/javascript"> </script>
6. Move JS to the bottom
- 一定要將所有 JavaScript 都擺在頁面最下方
</body> 之前
因為所有在 JavaScript Include 以下的 HTML 在 JS 還沒讀完前，都不會顯示畫面
- 把 JavaScript 的 Code 都放在 onload 執行！！
7. Avoid CSS expressions
- 不要使用 CSS expressions 因為可能這段 expression 會在每一次 mouse move, resize, scroll, key press 時執行!
- 要使用 EventHandler 去執行這些 Expression (JS Code)
8. Make JS and CSS external
- 反正 JS 跟 CSS 拉到外面成獨立檔案就是好的，但「首頁」可以例外！
- 使用 Post-onload download 技巧
download external files after onload
window.onload = downloadComponents;
function downloadComponents() {
var elem = document.createElement("script");
elem.src = "http://.../file1.js";
document.body.appendChild(elem);
...
}
範例：http://stevesouders.com/hpws/dynamic-inlining.php
作法：
1. 在 Server-side 判斷使用者 Browser 有設定 Cookie["hasPostOnloadDownload"]
1.1. 若沒有，就使用 post-onload download 動態下載 CSS & JS
1.2. 若有用，就直接用 <script src="xxxx.js"></script> 下載，Browser 會抓取 Cache 的版本
P.S. cookie expiration date is key
9. Reduce DNS lookups
- 在一個頁面中，不要超過 2 - 4 個 Hostname，不然會降低頁面載入速度
- 開啟 Keep-Alive 支援
10. Minify JS
- jsmin
http://crockford.com/javascript/jsmin
下載後更名成 jsmin.zip 解壓縮出 jsmin.exe 即可執行
jsmin.exe < input.js > output.js (注意：所有 UTF-8 編碼的 js 檔會變成 ANSI as UTF-8 編碼)
- dojo compressor
http://dojotoolkit.org/docs/shrinksafe
11. Avoid redirects
- 參考資料：http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
- 避免 Redirect 產生的方式
* 網址若省略檔名時，最後面一定要加上 / 結尾
* 追查 Log 檔
- 查看 Log Referer
12. Remove duplicate scripts
- 這一點雖然很呆，不過連 MSN Space, Yahoo 都有類似的情況！
- 在 ASP.NET 的元件中(UserControls, WebControls)，請多使用 Page.ClientScript.RegisterScriptInclude 的方式！
13. Turn off ETags
- 基本格式
* unique identifier returned in response
ETag: "c8897e-aee-4165acf0"
Last-Modified: Thu, 07 Oct 2004 20:54:08 GMT
* used in conditional GET requests
If-None-Match: "c8897e-aee-4165acf0"
If-Modified-Since: Thu, 07 Oct 2004 20:54:08 GMT
- if ETag doesn't match, can't send 304
- ETag format
Apache:
ETag: inode-size-timestamp
IIS:
ETag: Filetimestamp:ChangeNumber
- IIS 設定方式
自動設定方式
ETagFix - keep IIS eTags from changing
http://www.snapfiles.com/get/etagfix.html
原創公司：ISAPILab http://www.isapilabs.com/
安裝 http://www.isapilabs.com/downloads/ETagFix-setup.exe 之後會重新啟動 IIS 之後就沒問題了！
Related: http://www.snapfiles.com/Freeware/server/fwiis.html
Note:
在 IIS 5.0 可以正常運作
在 IIS 6.0 必須要執行在 Isolate Mode 才可以使用 ISAPI，預設是不能用的！
手動設定方式
* 如果不是用 Windows Server 2003 SP1 要先安裝 Hotfix 900245
http://support.microsoft.com/kb/900245/
* 先安裝 IIS 6.0 Resource Kit
http://www.microsoft.com/downloads/details.aspx?FamilyId=56FC92EE-A71A-4C73-B628-ADE629C89499&displaylang=en
* 使用 Metabase Explorer 開啟 LM \ W3SVC 新增 DWORD to 2039 其 Value="0" ( 每一台 WebFarm 底下的電腦都要這樣設定 )
* 重新啟動 IIS
net stop iisadmin /y
net start w3svc
net start smtpsvc
參考資料
* 您可能會當您使用 Internet Explorer 6， 試著存取 Web 應用程式所裝載在 Internet Information Services 6.0 Web 效能非常低
http://support.microsoft.com/kb/922703/
- Apache 設定方式
FileETag none
14. Make AJAX cacheable and small
- XHR, JSON, iframe, dynamic scripts 都一樣可以被快取(Cached)、最小化(minified)和壓縮(gzipped)
- 個人化的頁面回應時，一樣要做快取，但是針對「該使用者」做快取(Cache-Control: private)
- 在使用 XHR 時，URL 可以加上「最近的修改時間」在 QueryString 裡。
GET /yab/[...]&r=0.5289571053069156 HTTP/1.1
- 回傳資料時的 Header 可以用 Cache-Control: private + Last-Modified，使用者就不會一直連到網站抓網站了!!
設定 Cache Header 注意事項
* 個人化的頁面一定要設定
Response.Cache.SetCacheability(HttpCacheability.Private);
* 如果要 Cache 頁面或 External Reference 檔案(CSS/JS)一定要加上
Response.Cache.SetLastModified(DateTime.Now);
如果不加上 MaxAge 的話，將會無限時間的 Cache 直到下次 Reload 或開新 Browser 手動輸入網址進入網頁
* 如果要指定 Cache 的時間要加上
Response.Cache.SetMaxAge(new TimeSpan(0, 0, 0, 10));
Response.Cache.SetExpires(DateTime.Now.AddSeconds(10));
* 如果不要頁面被 Cache 的話
Response.Cache.SetMaxAge(TimeSpan.Zero);
Response.Cache.SetExpires(DateTime.MinValue);