訂閱本網誌: Facebook, Google+, 電子報, RSS

別忘記「速度」也可以殺人

June 23rd, 2011 by Jamie | 切換為細明體 | 切換為正黑體

這世界上有很多產品,都把「速度」當做一種功能來吸引消費者。買車的時候,業務員會跟你說這台雖然只有 2,000 c.c.,但是因為加了渦輪增壓,榨出了最大的馬力,所以 0-100 公里加速,只要 4.8 秒 — 光聽你就已經血脈噴張。而很多時候,速度甚至讓消費者願意多花一點錢 — 高速鐵路的車票往往比一般火車的貴不少。

但奇怪的是,在理論上很科學、很追求效率的科技產業,這麼久以來,我們卻完全沒養成用「速度」來說服消費者的習慣。我們有一些奇奇怪怪的東西 — 例如:CPU 時脈、網路頻寬,「好像」跟速度有一點關係。問題是當消費者再問深入一點 — CPU 從 2 GHz 變成 2.4 GHz,那電腦速度是不是快 20%?你又必須要回答:其實也不是那麼一回事。頻寬呢?從 20Mbps 升級到 100Mbps = 五倍?錯,99% 的時候,消費者根本感覺不到任何差異。(事實上,如果頻寬是一群人共用的,還有可能因為封包數大增,塞爆路由/分享器,最後讓網路速度變慢。)

速度有多重要

我們都常「耳聞」速度對網路業的重要 — 從 Web 1.0 時代大家就常把「8 秒定律」掛在口邊 (注意:已過時),但或許你不知道,事實上,速度在網路業有著致命的殺傷力。研究顯示,Google 需要 0.4 秒來產生 10 個搜尋結果,要 0.9 秒來產生 30 個,但如果他們把「預設結果數」從 10 個變成 30 個,僅僅相差 0.5 秒的時間,居然就會損失 20% 的使用者!Amazon 也對消費者進行了許多 A/B 測試,發現即使網頁下載只慢了 0.1 秒,業績就會有顯著的下降。

速度可以勝過對手

也就是說,「速度」是網路業上僅存的幾個「技術」可以幫你勝過對手的地方。但這和一般提到的「技術」不一樣,想要速度,很多時候你往往必須要減少功能,而不是增加。關於速度,Stack Exchange 的 Jeff Atwood 提出了幾個實作上你可以利用的工具,包括:

  • Yahoo 的 13 個網頁加速最佳實務守則
    • Jeff 特別提出了 CDN (Content Delivery Network) 的重要,它讓世界各國的使用者都可以享受到更快的速度 — 不過這比較適用於已經找到 PMF 的團隊。
    • 實務上我的經驗是大多數的網站,光減少 HTTP Requests,就可以大大提升速度 — 可以用 Firebug 裡面的 Page Speed 分析來看看 HTTP Requests 拖慢了多少。
    • 要減少 HTTP Requests,CSS/Image Sprites 是非常好用的技巧。
  • 針對註冊和非註冊用戶分別進行優化
    很多東西非註冊用戶用不到,不需要讓他們下載額外的 Javascript/CSS 檔案,拖慢他們的速度。
  • 把「速度」當作團隊的驕傲
    Stack Exchange 內部用 MVC Mini Profiler 把下載時間放在每一個網頁的右上角,時時提醒團隊要重視速度、速度、速度。(用 Google App Engine 的人看這裡)

除了 Jeff Atwood 的三點之外,關於速度,我覺得你還可以:

  • 宣傳你的速度
    當你有辦法做到快時,你應該要大大的宣傳。Google 是第一個發揚這個做法的,他們很早就在右上角放上搜尋時間,不斷去提醒使用者 Google 引擎很快。
  • 用流程設計來提升速度感
    • 記住,速度是一種感覺,使用者要的是「反應速度」– 按下去就有回應,不一定是「結論速度」。所以,當有一些東西就是要花比較多時間時,你應該設計一些流程來讓他們不會失去速度感。
    • 由於 iOS 不能背景下載,所以 Flipboard 設計了開場頁,讓你先在那裡欣賞一些朋友的照片,趁機趕快抓時間下載內容。
    • 很多機場故意把登機門和行李轉盤的距離拉遠,中間放置很多免稅商店,讓你下飛機後慢慢逛過去,等到你好不容易走到了,行李也出來了,如此反而減少了旅客的抱怨。
  • 至少放一個 .gif 小動畫
    如果真的沒辦法設計一個流程,你至少要放一個小 .gif 動畫,讓使用者知道他真的有按到那個按鈕。最差的情況的就是按下去之後什麼反應也沒有,很多人這時會一直按,不但造成麻煩的重複 submit 的情況,很多時候還會引起更多的問題。

所以千萬別忘了,速度也是一個功能,很多時候甚至是殺手應用。在你把你的服務長成一個怪獸前,想清楚,在速度上,你想要給使用者怎樣的體驗,然後自始自終,不要忘記這件事情。相信我,你將大大提升創業成功的機率。

而除了產品要速度,介紹產品當然也要速度。本周五 (6/24) 6:00pm,30 組創業團隊將會用一分鐘的速度,在 「2011 六月號 appWorks Startup Mixer 創業人同樂會」介紹自己。除此之外,你還可以跟現場 200 位網路人天南地北的聊創業,這麼棒的活動,你一毛錢也不用花,還不趕快去報名

(Image via gilderic, CC license)

相關文章

  • https://profiles.google.com/EriCSNinG EriCSN

    我部落格裡的小圖示、按鈕等都用 Base64 編碼(這有線上編碼器)把圖片轉成純文字直接放進樣板裡,這樣也可以減少 HTTP request。稍候嘗試看看用 CSS sprite 的拼圖法加上 Base64 編碼試看看好了。搞不好能讓最後一個圖片的 HTTP request 都能省掉。 ^^

  • http://www.facebook.com/jerryh3 Jerry Hsu

    xx

  • http://core-active.blogspot.com/ Jason Cheng

    這一篇太難回應了,技術含量太高。XD

    兵貴神速,但如何做到神速呢? 古時候打仗的時候,軍用物質多,所以必須留下笨重的物資,部將輕裝上路,如此才能乘敵軍措手不及之時機發動進攻,走敵軍意料不到之道,攻擊敵軍不加防備的地方。所以,孫子兵法有云: 「兵之情主速,乘人之不及,由不虞之道,攻其所不戒也。」因此,我是很贊同 “想要速度,很多時候你往往必須要減少功能,而不是增加” 的。

    減少 HTTP Requests 是提高速度一個很不錯的方向,但是,如果在一開始設計網站架構之前,能再多想想是否有其他更好、更有效的解決方案,我想,這是一種更好的態度、更好的思維、更好的解決方案,如 asynchronous event-driven (非同步化事件導向) 的模式可能會比 request-response 的模式要更佳、更有效。ps. 我也不是啥 web developer 的專家,可能有說錯,見諒。

    這一篇文章,對於網路開發者,我相信很有參考價值。謝謝 Jamie 的分享。

  • Gilles

    這篇講的東西太上個世紀,都是很早以前的design,或者說這些東西根本就是designer要做到的,developer所應該做到的更多。

    業界讓網站速度變快的方式,一般都是用ajax來做;用gif來做buttom太簡陋,一般是用ajax抽換XML/JSON,直接更新pagelet裡的內容就好。

    進一部的就是配合predictive caching做modelling,不過這部份就需要比較多的成本,startup做到上一步就很夠了。當然一些針對browser做flushing的技術也是省不了的,這樣才會讓網站不需要整個都load完才能一次show出來。

  • http://www.facebook.com/people/Shih-Peng-Lin/1565598096 Shih-Peng Lin

    我比較想知道的是Jamie大怎麼會突然發這一篇偏技術面的文章XD?  是因為最近有看到什麼讓人不悅的網站或是現象的嗎?

  • Koyn Shaw

    我覺得用AJAX更是要講究”速度”和”沙漏小動畫”, 因為使用者根本不知為什麼按下去後, 啥事都沒發生?
    Facebook 經常很慢, 它也用AJAX; 它兩年以前沒有動畫, 但它後來就懂得放個動畫來安撫使用者…

  • tn

    CSS Sprites的確不錯
    http://www.techbang.com.tw/posts/5803-today-google-doodle-css-sprites-principle

    >針對註冊和非註冊用戶分別進行優化
    不了解點在哪裡

    >把「速度」當作團隊的驕傲
    和「宣傳你的速度」一節相似

    >宣傳你的速度
    Google員工Google時就會注意到Google的品質
    較適合網站開發者時時自我警惕,估計沒有多大宣揚作用

    >用流程設計來提升速度感
    不了解節米的觀點,也許可以舉個實例?

    >至少放一個 .gif 小動畫
    讓按鈕失效即可避免多次點擊並提供適當的視覺回饋
    當然放個小動畫會有更好的消遣作用

  • tn

    我以為節米會特別提到動態網頁,想不到沒有,真是出乎意料之外

    (關於gif部分,我想節米指的是Now Loading…圖示,不是指按鈕圖樣)

  • tn

    還能有什麼原因,節米在釣魚

  • Reoson1975

    >但奇怪的是,在理論上很科學、很追求效率的科技產業,這麼久以來,我們卻完全沒養成用「速度」來說服消費者的習慣。 最好是沒有,我看到這段就看不下去了…
     
     
    消費者沒感受到速度的差別==業者沒用速度說服消費者
     
     
    J大的邏輯真的很特別

  • http://mrjamie.cc Jamie C. Lin

    :)

  • http://mrjamie.cc Jamie C. Lin

    請舉例

  • http://mrjamie.cc Jamie C. Lin

    註冊: 沒登入的用戶就不要讓他下載一堆有的沒的 CSS/JS
    流程: 我下面舉了兩個例子 

  • http://mrjamie.cc Jamie C. Lin

    我看到 Jeff Atwood 的文章,讓我有一些想法

  • http://mrjamie.cc Jamie C. Lin

    酷,我也要來試試。

  • http://www.facebook.com/david0928 David Wang

    用Ajax,還有個重點,對於非需即時更新的資料,做到第一次讀取用Ajax,第二次之後只要把它當成頁面裡的元素,只是控制顯示和隱藏,這樣我相信會更好

©2012 MR JAMIE.
網站由 Allen Hsu 設計 | Logo 動畫由 Wen Chen 完成