網站架設流程圖(如下圖)中提過, 網站優化是一個不斷循環的過程,而網站優化可以有許多的面向。如網站整體優化、搜尋引擎優化、轉換率優化、網站速度優化、UIUX優化。 不管那一種優化都必需要要有根據跟有工具的優化才行。不然單憑感覺的優化是很飄渺、很不切實際的。而且通常會耗費大把時間才知道優化失敗。 這個文章跟你分享幾種網站優化工具。幫你網站加分UP!UP!UP!
網站架設流程圖

Google Analytics

Google Analytics是Google提供的一套網站分析工具,透過它你可以了解網站的流量、每日使用者的變化與行為、使用者分析、熱門產品、網頁速度、站內搜尋、轉換...等等。 這些細項功能都包含在GA的五大功能內,如下

  1. 即時:即時觀察網站人數、流量來源、事件、地區
  2. 目標對象:了解客戶、網站訪客的樣貌,例如族群年齡、性別、客層、興趣、裝置...等等
  3. 客戶開發:網站訪客從那個管道來? 也就是流量來源
  4. 行為:網站訪客進入網站做了什麼事情
  5. 轉換:網站訪客有無完成我們期待做的事情
網站架設流程圖

搜尋引擎優化

每日有高達20億次的使用者透過Google搜尋種種的解答與問題。相信你一定不想與這些人錯過,但要如何將這些"人流"導入自已的網站呢? 學習SEO就對了。SEO(搜尋引擎優化、Search Engine Optimization)有神奇的魔法可以將流量導入到你的網站,重點是一毛也不用花,只要經過長期的經營寫文章、部落格,在加上使用正確的SEO方法。 流量就會自已的流過來。所以 關鍵字優化的目地就是為了提昇網站流量,不然網站就會變成蚊子館。 但要如何優化呢?請先安裝Google Search Console(GSC)吧。 針對Google SEO有任何的問題可以至Google官方說明尋找解答Search Console說明。 延伸閱讀: 搜尋引擎最佳化 (SEO) 入門指南 SEO單頁精簡版

Google Optimize

網站建立完成之後, 通常我們總會希望使用者能夠在網站上完成自已期待的目地or事件,例如購買產品、電話詢價、註冊...等等。 但總是事與願圍,因為要能夠把使用者"轉換"成營業額是多麼難的一件事情。所以從使用者進入網站的第一刻就要開始優化了。但如第一段所講, 要靠數據優化,不然單憑感覺的優化是很飄渺、很不切實際的。

隆重介紹Google Optimize這個工具,透過A/B Testing(分比較組、對照組的概念)的方法,設定變數、轉換目標之後。Google Optimize則會幫你計算那一個組別的轉換率較高。如下圖
Google Optimize
圖中貴設計在實驗"立即通話、馬上播打、立即播打、馬上聯絡、立即通知",這5組字樣,使用最容易點擊按鈕而播出電話。經過實驗過後 原始版本"立即通話",說明該文字呈現了1102次,有17次會點擊,轉換率最高。所以經過類似的實驗,我們就會了解"立即通話"的轉換率最高。

網站速度優化

一個簡單的問題,全家的店員結帳的速度愈快,當日的營業額是不是就愈高呢? 這是必然的。同樣這個道理也適用於網站的轉換率。 請參考以下的圖,網站下載速度3秒內,網站的轉換率是最高的。所以保持網站的高下載速度是重要的。 Google Optimize
那我們要如何知道網站的下載速度呢? 網站速度測試工具 PageSpeed Insigh(如下圖)、 Pingdom,這個分數沒有絕對。但就是建議比你的競爭對手高即可 Google Analytics 這是某一個網址的下載速度為100分(電腦版),手機版應該會略低。但不求高,但只求比競爭對手好。
若要看整個網站的網頁下載速度,請先登入GA -> 行為 -> 網站速度 -> 速度建議。 你就會看見以下的圖,下圖最右邊的紅色區塊,就是每一頁的分數。 網站整體下載速度 要優化網站整體速度的前提,必需先個別攻擊找出速度最慢的那一頁(看上圖分數最低)再優化。那要如何做速度優化呢?

  1. 亞洲主機:如Siteground的日本主機、GCP的台灣彰化主機。物理連線速度快。
  2. 減少頁面減少HTTP Requests的次數,頁面載入的效能就提升非常多
  3. 壓縮網頁的程式碼,包含js、css、html檔。推薦工具HTML Minifier
  4. 移除未使用的CSSPurifyCSS Online
  5. 圖片檔案限縮在100K or 更小。推薦工具Tiny Png
  6. 減少HTML的標籤,讓網頁保持輕盈,並善用defer、async
  7. 使用延遲載入推薦工具,Lazyload
  8. 善用CDN,如Cloudflare。參考CDN是什麼
  9. 優化Server端程式演算法:減少呼叫資料庫的次數
  10. 優化資料庫結構:移除不必要的欄位、資料,限縮字元的容量

UIUX優化

UIUX是近幾年來網頁設計會談到的議題,到底什麼是UI?什麼是UX?讓我們來一一解惑。
UI是產品畫面呈現,每個元件要如何與使用者互動和操作畫面。跟視覺有點關係,例如網站風格、整個產品UI元素一致性等。例如:紅色按鈕就是跳到問卷頁面,或出錯時會呈現什麼警告、做什麼動作會跳出什麼元素等。
UX是產品使用感受,UX是使用者體驗,從使用者一進到網站開始所有的動線、動作、互動、跳出等,都需要顧到,也要確保產品符合邏輯,才能讓使用者愛上你的網站,降低跳出率,提高銷售率。 UIUX這兩項是密不可分的,UX是使用者體驗,當然也包含了UI畫面動線與互動。

UIUX
UIUX

初步不會,沒關係,一步一步慢慢就會理解,網站都是慢慢優化,google也是這樣慢慢測試測試出來的,也因為這世代變動很快,也會一直改UIUX。
這裡推薦「 Google Optimize」是一個很好優化網站的工具,在還不確定自己客戶會喜歡哪些文字、按鈕等,這裡可以做AB-Teasting方法來測試偏好。再推薦一個「Hotjar」熱點圖與瀏覽軌跡錄影,可以直接看得出來用戶來網站最常按哪個按鈕、看哪裡、或是哪裡停留最久,讓你了解放什麼才是最吸引他們。Hotjar

結論

網站優化這檔事是一個範圍很廣泛的議題,要優化的部份太多,所以先弄清楚你"能夠"做的,你"會做"的。 像優化Server端演算法、資料庫結庫,非一般IT人是沒有辦法的。而 Wordpress網站設計的主機能優化的部份 如網頁的程式碼、亞洲主機、圖檔限縮、善用CDN、延遲載入、減少HTML的標籤。其他大概也有限。 但貴設計仍是最推薦必要的二個優化,速度與搜尋引擎優化會是最優先處理的二件事情。