from The Will Will Web by will
Shared by you
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 放在 區段載入!
- 使用 標籤，不要使用 @import 語法
- Avoid Flash of Unstyled Content (FOUC) in IE
http://www.bluerobot.com/web/css/fouc.asp/
6. Move JS to the bottom
- 一定要將所有 JavaScript 都擺在頁面最下方
之前
因為所有在 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. 若有用，就直接用 下載，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 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);
No comments:
Post a Comment