重視 SEO 的站長自然都會關注網頁的載入速度，因為這也是 Google 的排名評分項目之一。過去寫過一系列「網站效能」的相關文章，有興趣的站長可以瞭解不同的主題要如何處理。由於提升「網頁載入速度」的詢問度一直很高，以往就算請讀者看這些相關文章，一段時間後還是可能回頭問一樣的問題，因此本篇決定整理出比較簡單、清楚的判斷流程，讓站長們可以自行健檢，決定哪些會拖慢網站速度的外掛需要移除。
(圖片出處: pixabay.com)
一、影響網頁速度的關鍵
由於科技進步的速度太快，現在電腦、行動裝置的效能之好，已經讓我們可以很輕易地排除影響網頁速度的因素。以往 Javascript 的執行效能可能會因為 CPU、瀏覽器的解譯引擎而有所影響，但現在大部分使用者的強大 CPU、記憶體容量、瀏覽器新版本，讓 JS 可以一瞬間就執行完畢，甚至某些 CSS3 還可能需要比 JS 花費更多的 CPU 運算。
現在網頁的執行，多半是在等待網路傳輸的時間，也就是各種 HTTP 請求：
- 圖片網址
- 外連 JS 網址
- 外連 CSS 網址
- Iframe 外連網址
總之，在範本中看到很多 JS 不用太緊張，有看到 HTTP 開頭的網址字串才需要學著辨別(註1)，是否這個外連、外掛需要移除？
需要注意的是，「A 標籤」也有 HTTP 連結，但這是點擊後才會連往他處網站，不代表要在我們網站載入這個 HTTP 連結的內容，所以不會影響網頁速度。
註1：不是每個網址都會以 HTTP 開頭，網址的表示方式還有相對網址(例如以斜線 "/" 開頭是其中一種)，也可以雙斜線 "//" 開頭，這也增加了新手辨識的困難。
二、影響載入速度的層次
以下由輕微到嚴重，說明影響網站載入速度的因素：
1. 超連結
也就是前面提到的 A 標籤，不影響網頁速度。
既然不影響，為何要特別提出呢？因為之後會提到外掛的替代方案，讓讀者先有個印象。
2. 使用 CDN 的 HTTP 請求
有提供「CDN」服務的 HTTP 請求，會自動找到地球上距離訪客最近的節點伺服器，可減少一大段網路傳輸距離、時間。
對於 Blogger 使用者而言，這是我們很大的優勢，根據官方論壇「Loading speed and page optimization questions」，藉由 Google 的 CDN 存放 Blogger 平台的資料，我們網站的存取速度絕對比其他部落格都快。
3. 非 CDN 的 HTTP 請求
沒有 CDN 的 HTTP 請求，就回歸到正常的網路傳輸，跟伺服器主機的反應速度，還有經過的國家、節點數量也都會有影響。
建議部落格要使用的各種外連，例如 JS/CSS/圖片，最好都有 CDN 服務能提供，否則網頁開啟速度會受到很大影響。
基本上 WFU BLOG 近幾年來介紹的外掛，都是以 CDN 外連為主，就是這個原因。
4. 有用到 IFRAME 的外掛
這個有點難辨別，因為要開「Chrome 開發人員工具」才能看到，這個外掛有沒有在網頁上產生 IFRAME。
簡單舉幾個例子，Adsense 廣告、FB 讚按鈕、Google 地圖，這些都會產生 IFRAME。
為何 IFRAME 比一般 JS 外連影響大呢？因為 IFRAME 代表載入一整個 HTTP 網址，裡面的內容有可能包山包海，也可能另外執行了好幾個 JS 外連，載入多個圖片、影音檔等。
最好的例子是 Adsense 廣告，用 Chrome 開發人員工具看一下就知道很精彩。所以只要網站少放幾個 Adsense 廣告，就能有感提升網頁效能。
三、評估外掛是否移除
有了以上概念後，我們可以來評估看看一些部落格常用的外掛，需不需要移除，或是有沒有更好的替代方案。
1. 沒有 HTTP 外連的外掛
過去有很多讀者提問，擔心某某外掛會不會影響速度，其實問的那些外掛根本沒有 HTTP 外連，但要一般使用者分辨有無 HTTP 外連的確沒那麼容易。
一個比較簡單的判別方式：
- 這個外掛是否需要取得外部資料來顯示？
以下列出幾個比較常見，沒有 HTTP 請求，所以不會影響速度的外掛：
- 讓部落格導覽列選單能浮動置頂
- Blogger導覽列下拉選單﹍安裝懶人包
- 快速回到網頁上方 Go Top 按鈕 + 各種動畫效果
- Blogger 樹狀標籤 V2.0
- Blogger 數字分頁導覽 → 如果知道怎麼把 js 塞在範本中的話，這個外掛就沒有 HTTP 請求
2. 社群分享按鈕
很多網站會安裝類似 AddThis 這樣的社群分享按鈕外掛，如果以減少 HTTP 請求為前提的話，是完全可以不用安裝這類外掛的。
以 Blogger 為例，可參考這篇「改造 Blogger 官方分享按鈕」，在網站擺放超連結形式的社群分享按鈕，完全不需要使用外掛。
3 相關文章外掛
相關文章是部落格很重要的外掛，擺放在文末處可以有效提高讀者的黏著度、停留時間。
很多網站會裝 LinkWithin、或是 Adsense 推出的相關文章外掛，這些外掛內容比較複雜，速度也會慢一些。
因為取得自己網站相關文章的資訊，其實來自於自己的網域，以 Blogger 為例，可以改用以下外掛，速度更快：
- 使用縮圖的「Blogger 相關文章 V2」
- 純文字顯示的「Blogger 延伸閱讀小工具」
速度更快的原因來自於程式碼沒那麼複雜，而且 HTTP 請求是 Blogger 伺服器，有 CDN。
4. 讚按鈕
是否擺放讚按鈕外掛，需要根據自己網站的特性進行評估。
以本站為例，經過長時間觀察後，發現很少有讀者會在網站上按讚，多半是分享到 FB 時才會按，因此本站採取不擺放任何讚、+1 按鈕。
但分享按鈕則是必須的，參考「2. 社群分享按鈕」的方式進行即可。
5. 留言板外掛
其實各種留言板外掛都很龐大，無論是 FB、G+、Disqus。這一項依然請站長根據自己網站的特性進行評估，確定留言板外掛的使用量，會比原生留言板來得大，再考慮留下。
其實部落格的原生留言板，除了速度快，還擁有任何外掛都無法比擬的 SEO 優點，因此本站只擺放 Blogger 官方留言板，可參考這篇「Blogger 官方留言板的優點及妙用﹍加強 SEO 搜尋排名」。
6. 側邊欄外掛
以上這幾個都是常見的側邊欄外掛，都是讀取自己網站的資料，也就是送出 Blogger 伺服器的 HTTP 請求。
如前所提，Blogger 伺服器有 CDN，反應、傳輸速度都是很快的，有相關需求的站長，可不必特地移除這類外掛。
7. 有 CDN 的 HTTP 外連
除了確定是讀取 Blogger 網域資料的外掛，其他的都會是外部 HTTP 請求，那麼使用這些外連時，無論是 JS/CSS，務必先尋找有沒有 CDN 服務，才能加快傳輸速度。
以下提供一些常見、有 CDN 外連的項目：
8. 其他 HTTP 請求的外掛
除了以上，就剩下 IFRAME 跟沒有 CDN 的外掛了(如果你真的找不到 CDN 的話)。
如前所提，IFRAME 載入的東西太多，可先評判是否移除有 IFRMAE 的外掛，再來是沒有 CDN 的外掛。想想這些剩下的外掛，其功能性、必要性是否大到不能割捨。
如果是的話，就安心使用、放下效能的執著吧，畢竟還是會有某些事比速度更重要！
更多「網站效能」相關文章：
請問第7點的這些js, css的檔案，會建議直接寫在後台嗎? 還是您建議的CDN比較好呢?
回覆刪除