Pinkoi 是亞洲最大的設計品電子商務網站，在不同平台提供使用者良好的體驗。在「行動優先」的趨勢中，「手機版網站」（mobile web）往往是較少被討論到的，講者根據在 Pinkoi 製作手機版網站的經驗，分享前端工程和網頁設計上的技巧，讓使用者瀏覽網站時能有最好的體驗。

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

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

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

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

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

8. Mobile
First!
zoom! zoom! zoom!

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

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

11. 速度慢
:(

12. 功能陽春
:(

13. 畫面太小
:(

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

41. #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

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

43. 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

44. LIAR

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

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

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

48. 順~~

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

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

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

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

53. compositepaint
Rendering Pipeline
layoutstyleJavaScript

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

55. compositepaint
width
layoutstyleJavaScript

56. compositepaint
background
layoutstyleJavaScript
.gif 也會觸發

57. compositepaint
transform
layoutstyleJavaScript

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

59. compositepaint
The Fastest
layoutstyleJavaScript

60. csstriggers.com
by Paul Lewis

61. <canvas>?

62. Chrome Dev Tool
Timeline

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

65. 還有一些武器可以用

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

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

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

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

71. Google
PageSpeed

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

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

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

77. Cross-Browser
on mobile?
Yes.

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

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

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

81. 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

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

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