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

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

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

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

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

A/B Test
Redirect tests
Multivariate tests

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

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

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

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

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

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

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

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

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

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

以有產(chǎn)品販?zhǔn)鄣念愋停钚枰喾絿L試。

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

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

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

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

文章：

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

按鈕：

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

其他：

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

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

 

*參考圖片來自 Google