站長日誌

猶記得十年前做網頁時用的FrontPage,讓網頁HTML亂七八糟！而初次做網頁只追求結果不求效率.
如今網頁開啟的速率從0.02~0.09 我都會計較,現在回想起來還滿好笑的.
推薦可以用 GTmetrix 來檢測你網頁開啟的速度,這網站很強大,還會給你最佳化建議.

http://gtmetrix.com/ 連結進去後應該就不用作操作教學了吧 我想?

關鍵在最後的結果分析!
Page Speed
1. Specify image dimensions 指定圖像大小
img的標籤裡面指定圖片大小 (width & height)
會讓瀏覽器解析的較快
此外，不需要半透明的圖，用jpg或gif會比png的檔案小很多！

2. Leverage browser caching 瀏覽器暫存
不常變動的檔案讓使用者暫存在本機，可以加快速度

3. Enable gzip compression 使用gzip壓縮js和css檔案

4. Defer parsing of JavaScript 延後javascript的載入
在網頁末端再載入js，可以讓網頁先出現，節省等待js的時間

5. Minify CSS 最小化css檔案
利用軟體可以移除css中的斷行、不必要的空白等可以使檔案更精簡

Yslow
1. Add Expires headers 在靜態檔案中指定暫存時間
和Page Speed的 2 一樣目的

2. Compress components with gzip 使用gzip壓縮js和css檔案

3. Use a Content Delivery Network (CDN) 使用CDN
例如jQuery和jQueryUI 可以利用google提供的CDN讀取

4. Make fewer HTTP requests 減少伺服器要求
利用軟體將多個js合併成一個檔案，css也一樣

後記
通常把你分數較低的檢測項目拿去GOOGLE就會有答案,我就不寫教學了:P
最讓我搞不定的就是「Optimize images」 因為網站常會有網友上傳圖片,圖片是自動新增的,無法人為控管,
而目前找不到最好的linux 最佳化圖片模組, 只好加減用沒這麼棒的了.

下面轉錄網上找到的相關筆記:
「GTmetrix」在首頁開宗明義的說，當你的網頁載入超過4秒鐘的話，將會有很多用戶因此離開你的網站。Google不久前也清楚明白的提到，「網頁速度」是Google搜尋排序的參考指標之一，或許所佔比重不大，但確實已經納入參考。而「GTmetrix」則是一個網站效能分析服務，提供免費的測試與建議工具，指出我們應該如何去優化網頁速度的可行作法。

之前類似的網頁速度免費測量工具，比較知名的有「Pingdom Tools」；不過相較之下，「GTmetrix」在免費、不需註冊的前提中，提供了更豐富的測量結果與「具體的分析建議」；GTmetrix不僅可以讓你觀察網頁中每個元素的載入速度，更重要的是會根據網站目前的效能缺陷，提供實際的網站優化建議，例如會直接告訴你應該延後JavaScript載入、應該壓縮圖檔等等。

對於網站、部落格經營者來說，免費、不需註冊登入但又功能豐富的「GTmetrix」，是用來檢測網站速度優化成果的好工具。
內建Google、Yahoo推出的網站效能分析工具：
來到GTmetrix，你只要在網頁中間的輸入欄位，填上你的網站網址，按下〔Go！〕，就可以開始分析自己的網頁載入速度。

這邊GTmetrix使用了兩個知名的工具幫你檢測，一個是Yahoo的YSlow，一個是Google的Page Speed，現在你不用自己額外安裝這兩款測試工具，直接利用GTmetrix，就能獲得Google、Yahoo兩大搜尋引擎所提供的網站效能檢測成果。

前面有提到，網頁速度也是搜尋引擎排序的指標，所以觀察Google和Yahoo如何測試你的網站效能，當然是優化網站非常重要的一環。

簡單易懂的網站效能指標評等：
開始測試分析後，等待一小段時間就能看到檢測結果，首先你可以在「Summary（摘要）」中，看到兩個總評分數，分別代表透過Yahoo YSlow和Google Page Speed分析後獲得的評等。

這裡的等級制度，是透過許多分項指標綜合評比後獲得的，當然「A」級是最好的結果。
拉到分析網頁的下方，就可以看到網站在每個分項指標中獲得的個別分數（評等），你可以透過標籤分頁查看「YSlow」和「Page Speed」提供的不同評比。

這邊GTmetrix會把網站最需要優化的項目排列在清單的最前面，讓你直接看到應該針對哪些項目對症下藥。而你也可以透過這裡提供的分項指標，去了解優化網站應該顧及的各種層面。

你可以打開每個分項指標，就可以看到更詳細的相關內容，GTmetrix也透過「what does this mean？」提供了每個分項指標的意義說明。我覺得GTmetrix除了是一個好用的網站效能分析工具外，也可以當做一個優化網站的學習教科書來使用。
測試網頁元素的個別載入速度：
在測試結果中切換到〔Timeline〕分頁，可以看到類似Pingdom所提供的「個別網頁元素載入速度」，你可以從清單中，很清楚的看到哪些元素佔用了最多的載入時間，從而你可以決定應該優化哪個部分。

多組網站對比測試：
最後，你還可以在單一網站測試分析結果的左方，點選「Compare to another URL」，輸入另外一個網站的網址，就可以透過GTmetrix比較兩個網站在各種層面的效能評比。
老牌、免費、不需登入的「Pingdom Tools」，提供的是很直覺的網頁速度測量工具，顯示每個網頁元素的載入時間，讓你知道哪些元件拖慢了網頁速度。

但是「GTmetrix」則更進一步，它不僅僅是一個免費、不需登入的測量工具，而且還具備了分析、建議功能。利用Google Page Speed、Yahoo YSlow這兩大工具的指標評等，GTmetrix能夠從「如何優化」的角度，讓你不只知道哪個元件比較慢，更可以知道應該怎麼去修改。推薦給想要優化網站的朋友試用看看（註冊GTmetrix帳戶後，則可以記錄每次的評比測量結果）。