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

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

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

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

5.
當你想買個東西...

6.
Mobile
First!
zoom! zoom! zoom!

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

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

9.
速度慢
:(

10.
功能陽春
:(

11.
畫面太小
:(

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

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

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

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

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

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

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

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

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

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

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

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

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

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

26.
我們還是有用 RWD
@media rocks

27.
行動瀏覽器幾乎都支援 HTML5

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

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

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

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

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

33.
#perfmatters
wikimedia 效能工程師徵才文
「你讓頁面每增快 100ms，
就幫助使用者每年省下 617 年累計等待時間」
Wikimedia's JavaScript code is executed over half a billion times a day on hundreds of millions of devices. If
you can drop our page load time 100ms, you'll have saved our annual visitors from waiting an aggregate 617
years.
https://boards.greenhouse.io/wikimedia/jobs/55730

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

35.
Load 1000ms
Idle 50ms
Animation 16ms
Response 100msref: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/optimizing-
critical-rendering-path?hl=zh-tw

36.
LIAR

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

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

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

40.
順~~

41.
Above The Fold
關鍵轉譯路徑 (Critical rendering path)
除了資訊架構，你也該思考執行程式的順序
ref: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/optimizing-
critical-rendering-path?hl=zh-tw

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

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

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

45.
compositepaint
Rendering Pipeline
layoutstyleJavaScript

46.
compositepaint
selector (e.g. div > li)
layoutstyleJavaScript

47.
compositepaint
width
layoutstyleJavaScript

48.
compositepaint
background
layoutstyleJavaScript
.gif 也會觸發

49.
compositepaint
transform
layoutstyleJavaScript

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

51.
compositepaint
The Fastest
layoutstyleJavaScript

52.
csstriggers.com
by Paul Lewis

53.
<canvas>?

54.
Chrome Dev Tool
Timeline

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

56.
還有一些武器可以用

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

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

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

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

61.
Google
PageSpeed

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

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

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

65.
Cross-Browser
on mobile?
Yes.

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

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

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

69.
Ref.
https://speakerdeck.com/paullewis/making-a-silky-smooth-web
http://www.slideshare.net/firt/extreme-web-performance-for-mobile-device-fluent-2015
https://www.youtube.com/watch?v=2ksXo2_Lfl0
http://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
http://www.paulirish.com/2015/advanced-performance-audits-with-devtools/
http://www.filamentgroup.com/lab/weight-wait.html

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

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