2014年11月19日

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

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

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

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



五、小結


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


優化網站效能 相關文章:

11 則留言:

  1. 早兩天才整理了一下網站速度,發覺原來分數偏低。
    現在使用了 mod_pagespeed,速度依然不高但可接受了

    回覆刪除
    回覆
    1. 真羨慕~blogger 無法用這種懶人包...XD

      刪除
    2. wordpress 安裝一個叫 W3 Total Cache 已經可以解決大部份 pagespeed 問題了
      但當然要正確設定都有一些難度

      對於 blogger 來說 Google 會幫你解決不少問題。
      但有時都依然覺得頗慢
      這個亦是我由 blogger 轉會原因之一

      刪除
    3. 原來如此,Blogger 這方面看來還是只能手動優化了~~

      刪除
    4. 我在整修前後的評分甚至有 20 分的差距。
      企企,現在 PageSpeed CDN 好像不能申請了。

      刪除
    5. 沒錯,暫時都不能申請了
      不過 Blogger 用不到 PageSpeed CDN
      PageSpeed 一些將 JS 和 CSS 優化的功能十分不錯,可以提升不少分數

      刪除
    6. 這次想幫「馬克十二」申請 PageSpeed CDN 已經無緣,真可惜!

      刪除
  2. 如果只考慮行動版搜尋,Blogger 無論使用哪一種範本都一樣,它們的網址都會是 /?m=1
    官方已經釋出 mobile test 並有測試頁面,只要是 Blogger 的網址幾乎都 Pass。

    回覆刪除
    回覆
    1. mark 請問一下,那麼文中「使用 Blogger 官方手機版對 "Google 行動搜尋" 的收錄結果比較好,需要再確認一下」這段話 → 是否目前代表,使用 "官方行動版範本" 或是 "自適應範本" 對於 google 行動版搜尋的結果,沒有差別呢?

      刪除
    2. 可以說是無差別,但搜尋排行跟範本結構優化有關。現在許多響應式範本的作者會針對結構優化撰寫,有可能比官方範本在搜尋結果中收錄關鍵字更精準;但寫得不好的卻可能更差(分散權重)。因為 Blogger 官方範本以精簡為主,許多工具都被移除或安置在最下方,搜尋引擎喜好以內容為主的範本。

      刪除
    3. 謝謝,那我得刪除該行的假設~

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。