優化網站效能該注意哪些事? (1)最關鍵的考量因素

(Pic from: seocorporation.net)經營部落格一段時間後，站長可能會將注意力從文章內容的產出、版面的裝潢、外掛小工具等等，轉移到更深的層面，例如網頁載入的速度、手機版的效能、範本程式碼優化等等。

會開始關注這些考量點，代表除了內容以外，也會站在讀者立場，想打造友善的使用者體驗。

本篇為這個系列的第一篇，由於整個主題很大，首先試著從大方向著眼，由幾個主要標題的詢問句，來協助站長釐清及分析如何進行考量，避免做出不合意的選擇。

一、是否使用高清圖片？

「圖片」算是影響網頁載入速度的首要因素，因為圖檔是所有網頁需要傳輸的檔案中體積最大的，從 "圖片瘦身" 下手，絕對能帶來 "有感" 的速度提升。不過，比載入速度更重要的問題是，網站需不需要使用高清圖片？


1. 釐清網站性質

如果網站是內容導向，以提供資訊、或抒發、評論的文字為主，讀者並非被圖片吸引而來，那麼這類型的網站，穿插圖片的尺寸不必過大，當作點綴就好，就算圖片壓縮比例稍高，也不太會是流失讀者的主因。

這類型的網站可以放心使用各種工具來壓縮圖片，以加快網頁載入速度。如需技術文章輔佐，可參考「圖片壓縮不失真 加速網頁載入速度」。


2. 需要高品質圖片的網站

如果網站的讀者需要眼球刺激，例如攝影、旅遊、美食、正妹...等等，照片不夠大、解析度不夠好、圖片壓縮到變成印象派作品，肯定會流失很多訪客。

這類型的網站適合放棄「網頁載入速度 黃金三秒」的思維，圖片得大一些、要能吸睛，只需進行微量壓縮就好，因為讀者進入這類型的網站，通常已經有了心理準備~


3. 補救之道

只要文章中會穿插圖片的網站，無論是否為高清圖片，都建議安裝這個圖片延遲外掛──Lazy Load。

這個外掛的原理是，圖片在背景下載、先不顯示出來，避免造成網頁捲動很卡的感覺。等背景下載完畢後，才將圖片顯示出來，這對訪客頁面捲動的操作而言，會是比較友善的體驗。效果可參考「官方 DEMO 頁面」。

不過新版 Lazy Load 的安裝使用非常麻煩，WFU 相信有此耐心的人不多，比較推薦使用舊版的 Lazy Load，相細說明請參考「Lazy Load__Blogger 最佳安裝方式」。

二、形象網站或是個人網站？

回答標題的問題之前，得先說明一下有關 javascript(簡稱 js ) 的特性。影響網頁載入速度的第二大因素，就是 js。

1. js 會拖慢網頁速度

這篇「如何讓 Javascript 執行有效率」→「二、JS 的正確擺放位置」有比較詳細的原理說明，js 如果寫的不好、擺的位置不對，有可能讓整個網頁大塞車。

除此之外，網路上找來的 js 不代表完全安全，也因為如此，如果網站沒有特定需求的話，我會建議「部落格最好避免第三方外掛」。

雖說如此，許多特效、外掛都得靠 js 才能實現，我們必須學會與 js 共存。除非有把握肚子裡的墨水能像「人渣文本」一樣，網站沒有任何門面裝潢、沒有外掛、只有文字內容，仍然不用擔心讀者流失。


2. 形象網站

想要加快網頁載入速度，結論之一就是 js 的使用越少越好。回到標題，如果經營的是形象網站，例如公司、商務、活動等類型的網站，那麼 js 這件事又得先拋在一邊了。

跟網頁載入速度相比，形象網站的門面、給訪客的視覺效果更為重要，不太可能為了加快一點點的載入速度，而拔掉圖片輪播效果、去掉形象動畫等等。

所以審視「網站效能優化」這件事時，第二個要釐清的問題會是，製作這個網站的目的是什麼？


3. 個人網站

如果目的不是塑造形象，只是個人部落格的話，那接下來要釐清的，就是站長在決定是否安裝某個 js 外掛時，「速度比較重要，還是這個外掛比較重要」？

簡單舉個例子，「圖片輪播外掛」的效果很炫，但載入 js 會明顯拖慢速度。可能有幾種思維：

• 如果認為這個外掛可以吸引讀者、帶來更多流量，那麼這個外掛的價值大於速度，應該安裝
• 如果認為這個外掛並不是留住讀者的主要原因(例如網站性質為資訊提供)，那麼速度的價值會大於這個外掛的價值，應該移除。
• 我是站長，這個外掛看了就爽，管他速度會不會變慢 → 站長最大，外掛留著。

如果讀者會猶豫如何取捨時，以上幾個思路或許幫得上忙。


4. js 速度的補救方式

js 之所以會塞住頁面的載入，是因為大部分都寫成單線程的執行方式。如果改寫成動態載入的 js (多線程)，就比較不會影響網頁主要內容的輸出。

三、手機版或自適應範本？

進入行動裝置的時代後，站長需要頭痛的，還有網頁在手機上的執行速度。這個問題要抉擇十分不容易，過去寫了一篇「Blogger 應該選擇自適應範本(RWD), 還是行動版範本?」，可先參閱這部分的內容。


1. Blogger 官方手機版

如果沒有特殊需求的話，個人推薦使用 Blogger 官方手機版就好，原因為：

• 簡潔、載入速度最快
• 不需要維護兩套範本

2. 分析訪客族群

如果很想用自適應範本取代 Blogger 官方手機版的話，建議先分析自己的訪客族群，可使用 Google Analytics 就能看出訪客來源是 "手機" 的比例大不大。

• 如果比例不大的話，那麼不用特地為手機版裝潢版面，用官方手機範本即可。
• 如果比例大的話，見第 3 點。

3. 改造自適應範本的手機版面

想提升自適應範本的手機載入速度，有兩個方向：

• 前面提過的 "減少 js 使用"
• 減少側邊欄小工具

針對這兩個目標，請參考「Blogger 行動版範本修改技巧整理」，利用 Blogger 語法判斷式，盡量地去除手機版不需要執行的 js、不需要執行的側邊欄。

同樣，這方面如果對語法不熟悉，需要發案給 WFU 請用後面的表單聯繫。

四、哪些外掛、側邊欄小工具是必須的？

為了提升網站速度，砍掉不必要的外掛、js 是必須的大掃除工作。不過這個問題並沒有標準答案，畢竟每個網站的性質不一樣，除了「二、形象網站或是個人網站？」→「3. 個人網站」提出的方法，來判斷速度與功能孰為重要之外，另外或許可以有這樣的管道來得到答案──

• 被動式民調：在網站放問卷讓讀者回答，不過大部分情況能得到反饋的機率不大。
• 主動式民調：詢問家人朋友的意見，不過準確度遠不及找到真正讀者來詢問的結果。
• 田野調查：找出強有力的競爭對手(成功的同質網站)，觀察他們的網站設計，學習(抄襲)必要的外掛、功能。

這部分就看站長的功力了。

五、小結

這一篇主要提出大方向的概念，先行審視自己如何做出決定，比較沒有談到細節的內容。之後會進入技術層面的操作，來檢視範本中的程式碼，達到細部的效能優化。

優化網站效能 相關文章：