網(wǎng)頁優(yōu)化工具

網(wǎng)頁優(yōu)化工具有很多種，其目標(biāo)不外乎修改結(jié)構(gòu)、程式碼，使網(wǎng)頁符合使用者的需求和習(xí)慣。關(guān)於網(wǎng)頁速度，最常用到的就是 Google Page Speed Test 了，當(dāng)網(wǎng)頁讀取時間超過 3 秒以後，會流失近一半的使用者，當(dāng)網(wǎng)頁讀取速度來到 5 秒，超過九成的使用者都沒了耐心，給不了客戶好的使用體驗(yàn)。其中研究更指出，有三成的使用者，會在感受到網(wǎng)路速度不足後，不再造訪你的網(wǎng)頁。

另一個優(yōu)化的方向就是針對搜尋引擎，也就是大家常提到的 SEO（Search Engine Optimization），常見的輔助工具像是 Moz、臺灣的「球來就打」都有他強(qiáng)大之處。從 Google Webmaster Tools 裡，也有結(jié)構(gòu)化資料測試工具，除了讓使用者清楚明白你的內(nèi)容外，讓搜尋引擎方便抓取、判定，有好的文章結(jié)構(gòu)，如 h1、h2 的使用，也是相當(dāng)重要。

網(wǎng)頁技術(shù)的優(yōu)化外，內(nèi)容、文案也絕對值得測試

Page Speed 與網(wǎng)頁結(jié)構(gòu)優(yōu)化，應(yīng)該是你的網(wǎng)頁設(shè)計公司要考量的點(diǎn)（沒錯，做不好就去找他們）。今天帶大家來看看就內(nèi)容、版面、圖片或者網(wǎng)址路徑上，有什麼優(yōu)化的作法。從 Google 提供的這分資料，告訴我們這幾種測試方式：

A/B Test
Redirect tests
Multivariate tests

大致來說，就像是做實(shí)驗(yàn)一樣，控制不同的變因，藉此來了解使用者在網(wǎng)頁的行為（像是停留時間、瀏覽頁面數(shù)、頁面點(diǎn)擊、行為流程等等，更進(jìn)一步若有埋滑鼠點(diǎn)擊追蹤的程式，也可以分析出各區(qū)段內(nèi)容是如何被閱讀）。

透過這樣的網(wǎng)頁實(shí)驗(yàn)，我們可以看出的像是：

促銷活動的點(diǎn)擊按鈕顏色、大小配置如何較容易得到點(diǎn)擊
立即購買、購物車該怎麼放，用什麼配色
文章頁面排版、內(nèi)容變動如何影響使用者
頁面配色變動如何影響使用者
網(wǎng)頁改版，或者導(dǎo)向不同頁面，有何影響

更詳細(xì)可以更動的內(nèi)容，列在文章的最後，有興趣的讀者，可以了解後，用這些變項(xiàng)做實(shí)驗(yàn)。

這幾種網(wǎng)頁測試有何不同呢？

A/B Test：將同一個網(wǎng)址，倒入不同頁面，其中可能包含一個文案改變、一個產(chǎn)品圖片改變、一個網(wǎng)頁配色改變。A/B Test 的宗旨就是僅操作最少的控制變因，藉此觀看使用者反應(yīng)之後，留下好的（無論是點(diǎn)擊率、轉(zhuǎn)換率、停留時間等），再快速修改變因，反覆循環(huán)，以達(dá)到最好的效果。

重新導(dǎo)向測試（Redirect Test）：又稱作 Split URL Test，簡單來說是將一個頁面做出兩種版本，藉此來看出哪種設(shè)計下，整體效果較佳。與 A/B test 最大的區(qū)隔，可以說是控制變因的維度不同，A/B Test 偏重文案、圖片、排版的變動，偏向網(wǎng)頁前端改動，Redirect Test 則著重後端改變，最終導(dǎo)向的網(wǎng)頁以全然不同。

舉個簡單例子，一個網(wǎng)拍網(wǎng)頁，做A/B Test 時，可能替換產(chǎn)品背景圖片，來測試消費(fèi)者喜歡何種偏好；Redirect Test 時，則將使用者導(dǎo)向兩個不同頁面，其一可能敘述產(chǎn)品特色，另一個則從消費(fèi)者推薦評論開始，整體文案目的、方向都有些區(qū)隔。

多變項(xiàng)測試（Multivariate tests）：多變項(xiàng)測試可以看做是多組的 A/B Test 混合同時測試，假設(shè)有兩個變項(xiàng)，就會有四種組合；三個變項(xiàng)就得到六種組合，以此類推。做多變項(xiàng)測試的目的在於，更快速的找出最適合的到達(dá)頁面（Landing Page），在新網(wǎng)頁或新產(chǎn)品上市時，較快速的了解到潛在使用者。

什麼網(wǎng)頁需要做 A/B TEST

以有產(chǎn)品販?zhǔn)鄣念愋?，最需要多方嘗試。

一個產(chǎn)品的特色、優(yōu)勢，可能對應(yīng)到不同族群，就算完整的做過市場調(diào)查，真正上線開賣也有可能是完全不同結(jié)果。A/B Test 最適合在新產(chǎn)品上市，有新的行銷活動時執(zhí)行，可以預(yù)先設(shè)計好兩三種樣式，藉由這樣的測試，看出何種圖文最吸引消費(fèi)者，就是你的訂單來源了！

像利用 WordPress 的網(wǎng)頁，就有許多 Plugin 可以快速的建置 A/B Test，甚至像是 Nelio AB Testing 這樣的外掛，還可以看出頁面中不同區(qū)塊的點(diǎn)擊率，相比於單純的上架到 Pchome、蝦皮這樣的平臺，更容易找到你的客群偏好，而非一味的花錢買廣告來達(dá)到更高的業(yè)績。

網(wǎng)頁 A/B TEST，你可以這樣做：

Google 提供的教學(xué)幾乎涵蓋了各式網(wǎng)頁測試方法，就讓我們直接看看 Google 怎麼教我們。這裡列出部分（該拿哪些來做，端看網(wǎng)頁性質(zhì)和你優(yōu)化的目的），完整參考文件請點(diǎn)連結(jié)：

文章：

內(nèi)容長度
單獨(dú)頁面/多頁面
文案－標(biāo)題、標(biāo)籤、分類、提示文字
設(shè)計風(fēng)格
步驟指示：數(shù)字、現(xiàn)在位置、麵包屑、完成比例
圖片樣式（數(shù)量、樣式、配色、展示方式等）

按鈕：

按鈕類型：文字、圖示
位置、大小
圖片樣式：動態(tài)、扁平化、3D
顏色

其他：

影片（包含影片大小、自動播放、位置等等）
代言、推薦
認(rèn)證
合作廠商、作品集
社群媒體（連結(jié)、證言、瀏覽熱度）

還有什麼你覺得在做網(wǎng)頁測試時，一定要放的改變呢？結(jié)合網(wǎng)頁技術(shù)，我覺得在網(wǎng)頁 Description 的文案也是可以變化的項(xiàng)目，尤其排名已經(jīng)衝到第一頁的關(guān)鍵字，若能在網(wǎng)頁描述下功夫，勢必能增加點(diǎn)擊率。留個言告訴我們，你做過什麼成功 A/B Test 的例子呢？

 

*參考圖片來自 Google