2014年11月1日 星期六

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

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

Wayne Fu 0 A+

(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. 個人網站」提出的方法,來判斷速度與功能孰為重要之外,另外或許可以有這樣的管道來得到答案──

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

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



五、小結


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


優化網站效能 相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章
TOP