加快你的網頁載入速度實作﹍善用 Google Analytics 報表

之前寫過一篇「PageSpeed 網站速度檢測心得」，請讀者別太在意 PageSpeed 的分數，因為先天的限制，Blogger 有些項目是無法處理的。

不過那篇文章大概是說服力不佳，有不少讀者看完後，依然向 WFU 表達對於分數過低的憂慮，也許是我沒有提供 Step by Step 實作的原因。

那麼這篇會提供一些比較明確的步驟，能有效縮短網站的載入時間，讓讀者做起來比較踏實一些。

一、每個頁面都要處理

通常我們使用「PageSpeed」檢測時，只會看首頁的分數。但實際上，部落格每篇文章的頁面，分數都是不一樣的。

也許你會覺得每個頁面載入的程式碼都差不多，所以測過首頁的分數，其他的應該也相去不遠。而且，如果文章有幾百、幾千篇的話，哪有時間每篇都測呢？

聽起來滿有道理的，不過實測後就會發現差距還不少，後面會提供數據。

既然網站文章太多了，不會有時間優化每個頁面的載入速度，那麼我們把握一個重點即可：

• 先從網站最熱門的文章開始改善

而如何知道網站的熱門文章有哪些？可以藉助 Google Analytics(以下簡稱 GA) 的報表分析。

二、利用 GA 篩選熱門文章

1. 其他篩選工具

如果看 Blogger 官方後台數據，或是官方「熱門文章」工具，最多只有 10 篇而已。

WFU 開發了「Blogger 百大熱門文章排行」，可以看到更多熱門文章，做這件事會比較方便。

不過免費的方案也是有，就是利用 GA 報表。


2. GA

GA 有個功能很強大，可以一次顯示出 10 個網頁的 PageSpeed 分數，不用我們一個個手動輸入，以下來看看怎麼操作。

進入「GA 官網」，選擇你的網站後，按以下步驟：

• 「行為」→「網站速度」→「速度建議」

• 如上圖，顯示了本站最近一星期，瀏覽數前 10 名的網頁。
• 不斷按下一頁，就能看到其餘的熱門文章網頁。
• 也可依自己需求，選擇不同時間間隔，例如最近 3 個月、最近 1 年等。
• 紅框標示處，第 6 名代表首頁，結果本站首頁只有 66 分，比第 7 名足足少了 20 分

其實有這樣的結果我並不意外，因為本站最近改版之後，首頁放了輪播、標籤文章等工具，導致圖片使用量大增，所以分數降低算是在意料之中。

得到優化名單後，那麼接下來，你可以依據每個網頁的 PageSpeed 分數，先從比較低的來進行優化，有更多時間時再處理較高分數的網頁。

P.S. 如果對報表上的數字感到納悶，例如覺得載入時間的數據怪怪的，請參考 GA 官方說明文件「關於網站速度」。

三、調整圖片尺寸

1. 圖片處理原則

其實我並不鼓勵一眛追求網頁載入速度，而強制裁減圖片尺寸、或壓縮圖片，因為得到了速度，你可能失去更多東西。

依據不同網站性質，訪客對圖片的需求也不一樣。例如：

• 旅遊、攝影性質的網站，如果圖片尺寸太小，讀者應該會看不過癮，對吧！
• 美食、介紹產品的網站，如果圖片壓縮到失真，那麼食物看起來不美味，產品也很難賣出去吧！

所以我之後分享的圖片處理流程，不見得適合所有網站，請讀者自行拿捏。


2. 首頁+輪播+封面圖

以下這些區塊的圖片，必須有較佳的品質呈現、來吸引目光，我不在意 PageSpeed 的分數，會另外處理：

• 首頁
• 輪播
• 文章封面圖

尺寸可以大一些，壓縮比例可以小一些。


3. 文章內的圖片

因為本站為教學性質，文章內的圖片，畫素不需要太好，壓縮比例高一點也沒關係，讀者能辨識出圖片內容就好。

我的處理流程是這樣：

• 使用「XnView」這個軟體可批次處理大量圖片
• 設定圖片尺寸自動縮小為 850px 寬，但小於 850px 則維持原尺寸
• 設定一律壓縮為 75%
• XnView 可儲存設定細節，要處理時載入設定檔即可

可自行調整你的參數，不一定要跟我一樣。以上就是對於提高 PageSpeed 分數，圖片部分我們能做的事情。

四、精簡網站功能

處理完影響 PageSpeed 分數最多的「圖片」，接下來處理影響因素第 2 大的「Javascript」，也就是精簡網站功能。


1. 側邊欄

很多站長側邊欄掛了非常多工具，那麼現在可以好好評估一下，是不是每個工具都有必要安裝？

如果你找資料時，喜歡看「沒有側邊欄」的網站，版面比較清爽，那麼代表側邊欄的工具，在某種程度上不是那麼重要。

想想去逛同類型網站時，你會使用別人家哪些側邊欄工具呢？如果有某些工具是你根本不會去看、去用的，那麼可以考慮從自己家下架。

如果不是以圖片為主的網站，側邊欄工具例如「熱門文章」、「最新文章」等等，可以不顯示縮圖，加快網頁載入速度。

以本站為例，純粹自己要看的「最新文章」、「最新回應」、「友格+關注」等工具，則用分頁功能隱藏起來。需要使用時，點擊分頁才會執行這些外掛。


2. 廣告

每個「廣告單元」都會花費很多載入時間，那麼不用說，如果一個頁面放了 4、5 個廣告，網頁讀取是不是會很卡？

如果多放廣告能增加收入，而且你的網站也需要這樣的收入，那麼我建議不要在意 PageSpeed 的分數，畢竟錢賺得少會比較痛。

如果廣告收入沒那麼重要的話，我會建議放 1~2 個廣告單元就好了，而且你會立刻感受到，PageSpeed 分數的上升。


3. 其他外掛

還有很多外掛，裝了看起來很炫、或心情上比較好，但沒有裝也不影響網站運作，例如：

• 數字分頁
• 隨機文章
• AddThis 這類的社群分享按鈕外掛
• 燈箱
• 留言板外掛(用官方預設的就好)
• 即時顯示線上人數
• 即時線上客服

以上是大略舉例，可根據自己需求決定是否移除這些外掛。

五、減少 FB 外掛、內嵌工具

1. FB 外掛

因為 FB 出的外掛太多了，獨立一個章節說明：

• 如果有經營 FB 粉絲團的話，粉絲團算是必要外掛，比較難割捨。
• 而 FB 留言板，如果使用率真的不高，建議可以移除，使用部落格原生留言板就好。
• 讚按鈕我發現幾乎沒有人按，所以本站已經移除。
• 分享按鈕有替代方案「安裝常用社群分享按鈕 (圓形)」，可不用安裝 FB 分享按鈕。

2. 內嵌 Iframe

許多旅遊、美食網站因為需要介紹店家位置，會在文末內嵌「Google 地圖」，這會增加網頁載入時間，建議改用超連結即可。

一些 FB 經營得不錯的站長，會在文章內嵌 FB 相關留言或貼文，一樣會增加載入時間。不過運用得好的話，內嵌貼文有其效果存在，站長可自行評估。

總之，要提升網頁載入速度的話，任何內嵌 Iframe 都是可以考慮開刀的對象。

六、總結

跟上一篇 PageSpeed 測試心得比起來，這一篇提供了非常多確切的項目，讓讀者可以一一評估是否進行改善。

但最重要的是，是否優化、或割捨這些項目，都不是絕對的，也沒有標準答案，一切取決於你的需求。

魚與熊掌一次只能拿一個，沒有說又想增加 PageSpeed 分數，又想獲得好處這回事。

其實抉擇也很簡單，究竟保留現有的狀態，獲得的利益會比較大，還是移除了某個外掛，分數上升心情會比較好，那麼答案就出來了。

更多網站效能相關文章：