Pinkoi 把手機版網站變好用了

把手機版網站變好用了
Adam WangFront-end engineer
@ Pinkoi
Modern Web, 2015/5/16

Pinkoi 是亞洲最大設計商品購物網站
擁有為數眾多的優質設計師群，堅持只賣好品味、客製化的優質設計，讓美感生活隨手可得，
也讓每個送禮時刻都更加獨一無二。
Pinkoi.com

手機版網站？
說好的 mobile first
有 app 不就好了嗎？

當你從 Facebook app
點個新聞...

Mobile
First!
zoom! zoom! zoom!

對手機版網站的印象...

資料來源 http://yahoo-mobile.tumblr.com/post/113770919292/app

Google 最近針對
行動版網站
（mobile-friendly）
提高搜尋排名
(2015.4)

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fpinkoi.com

這比 SEO 還重要
流量進來但留不住，豈不是更浪費？

Pinkoi 的流量來自移動裝置
~ 50%

如何讓手機版網頁更好用?
你該思考的不只是螢幕小
mobile-friendly

Responsive Web Design
pic credit: http://www.iqtv.com/mobile-first-website-design/

RWD 是唯一解?
下載過多不必要的資訊
同時滿足滑鼠與觸控？

Pinkoi mobile web
針對使用情境來設計
輕量
適合觸控
適合快速瀏覽

RESS
Responsive Design + Server Side Components
by Lukew, in 2011
http://www.lukew.com/ff/entry.asp?1392
photo credit: htt...

手機、桌面兩套程式
網址一樣
由伺服器判斷給桌面版或行動版網站
m.pinkoi.com

jQuery vs. Zepto
Zepto 更輕量 <10KB
更適合手機使用情境（網路速度較慢）

為何要網址一樣？
減少 redirect 時間
SEO

漢堡選單
觸控螢幕沒有 :hover

https://www.youtube.
com/watch?v=DucPpcdQCV8

我們還是有用 RWD
@media rocks

行動瀏覽器幾乎都支援 HTML5

瀏覽歷史紀錄
非敏感資訊
便於使用者回頭查詢
用 localStorage 省資料傳輸、DB 資源
e.g. 站上玩遊戲
Safari private mode

window.pushState
用 histroy API 做簡易版 Single Page App (SPA)
找靈感（infinite scroll）點擊商品
回到上一頁垂直位置
手機瀏覽不易在 tab 切換

<input type=”number”>
更方便使用者輸入

覺得網頁慢？
DOMContentLoad?
Jank?
fps?

在這裡等網頁載完
地球都過半個月了
http://www.digitaltrends.com/movies/now-can-
buy-one-ticket-unlimited-screenings-interstellar/

#perfmatters
wikimedia 效能工程師徵才文
「你讓頁面每增快 100ms，
就幫助使用者每年省下 617 年累計等待時間」
Wikimedia's JavaScript code is executed over half ...

Load (畫面載入)
Idle (使用者點擊按鈕等待回應)
Animation (展開漢堡選單出現動畫)
Response (點擊商品圖片)
ref: https://speakerdeck.com/paullewis/making-a-si...

Load 1000ms
Idle 50ms
Animation 16ms
Response 100msref: https://developers.google.com/web/fundamentals/performance/critica...

等待畫面出現？
Critical rendering path
Progressive jpeg

http://www.webpagetest.org/video/compare.php?tests=150515_EA_FT3-r%
3A1-c%3A0&thumbSize=200&ival=16.67&end=visual

當瀏覽商品時
只更新部分畫面 + history API

Above The Fold
關鍵轉譯路徑 (Critical rendering path)
除了資訊架構，你也該思考執行程式的順序
ref: https://developers.google.com/web/fundamentals/pe...

Tips
先發出 img request
提示使用者處理進度、placeholder
加速 DOM rendering tree (隱藏不需要的部分)
減少 DOM traverse、DOM access
一次處理完所有 layout 相關 r...

CSS Animations
「看起來」像 app 般順暢
以過場動畫讓使用者感覺上有在跑
例如 loading bar

如何讓畫面順暢
scrolling jank
animation
16ms budget

compositepaint
Rendering Pipeline
layoutstyleJavaScript

compositepaint
selector (e.g. div > li)

compositepaint
width

compositepaint
background
.gif 也會觸發

compositepaint
transform

在 16ms 做完一個片段
甚至小於 10ms
pipeline 路徑越短越好

compositepaint
The Fastest

一定要試試看
chrome://flags/show-fps-counter
chrome://inspect/devices
(demo)

Lazyload Everything
圖片、次要內容延遲載入
副作用：document.scrollTop (觸發 layout)

requestAnimationFrame()
讓瀏覽器把手邊事情做完，才處理 UI
還有 transitionend event 取代 setTimeout

Composite
Layers
過少不好、過多也不好
Chrome Dev Tool 可以顯示
chrome://flags#composited-layer-borders

will-change
e.g. #foo {will-change: transform;}
backface-visibility、translateZ
強制產生 composite layer

Web Page Test
http://www.webpagetest.org/
example: http://www.webpagetest.
org/result/150515_NY_4F3/

Dulles, VA - Nexus 5 -
Chrome - 3GFast
http://www.webpagetest.org/video/view.
php?id=150515_NY_4F3.3.0

Takeaways
RWD = mobile-friendly?
手機效能差，要盡可能優化關鍵轉譯路徑
JS/CSS 動畫要考慮 16ms 限制
利用工具不斷實機測試和優化！

推薦 Udacity 課程
Browser Rendering Optimization
http://udacity.com/course/ud860
FREE

Push the Boundary!
我們做得還不夠好！
photo credit https://awards.yahoo.com/post/108918468042/how-the-whiplash-writer-director-
cam...

We are hiring! :)
pinkoi.com/about/pinkoist

Ref.
https://speakerdeck.com/paullewis/making-a-silky-smooth-web
http://www.slideshare.net/firt/extreme-web-performance-fo...

@perfmatters
Pinkoi 全站 92 折優惠碼
到 2015/5/18 日。

Thank you!
adam.wang@pinkoi.com
最近出了一本書，跟前端無關 ...
http://goo.gl/46rEOe

Pinkoi 把手機版網站變好用了