Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Pinkoi 把手機版網站變好用了

24,379 views

Published on

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

Published in: Engineering

Pinkoi 把手機版網站變好用了

  1. 1. 把手機版網站變好用了 Adam WangFront-end engineer @ Pinkoi Modern Web, 2015/5/16
  2. 2. Pinkoi 是亞洲最大設計商品購物網站 擁有為數眾多的優質設計師群,堅持只賣好品味、客製化的優質設計,讓美感生活隨手可得, 也讓每個送禮時刻都更加獨一無二。 Pinkoi.com
  3. 3. 手機版網站? 說好的 mobile first 有 app 不就好了嗎?
  4. 4. 當你從 Facebook app 點個新聞...
  5. 5. 當你想買個東西...
  6. 6. Mobile First! zoom! zoom! zoom!
  7. 7. 對手機版網站的印象...
  8. 8. 資料來源 http://yahoo-mobile.tumblr.com/post/113770919292/app
  9. 9. 速度慢 :(
  10. 10. 功能陽春 :(
  11. 11. 畫面太小 :(
  12. 12. Google 最近針對 行動版網站 (mobile-friendly) 提高搜尋排名 (2015.4)
  13. 13. https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fpinkoi.com
  14. 14. 這比 SEO 還重要 流量進來但留不住,豈不是更浪費?
  15. 15. Pinkoi 的流量來自移動裝置 ~ 50%
  16. 16. 如何讓手機版網頁更好用? 你該思考的不只是螢幕小 mobile-friendly
  17. 17. Responsive Web Design pic credit: http://www.iqtv.com/mobile-first-website-design/
  18. 18. RWD 是唯一解? 下載過多不必要的資訊 同時滿足滑鼠與觸控?
  19. 19. Pinkoi mobile web 針對使用情境來設計 輕量 適合觸控 適合快速瀏覽
  20. 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. 21. 手機、桌面兩套程式 網址一樣 由伺服器判斷給桌面版或行動版網站 m.pinkoi.com
  22. 22. jQuery vs. Zepto Zepto 更輕量 <10KB 更適合手機使用情境(網路速度較慢)
  23. 23. 為何要網址一樣? 減少 redirect 時間 SEO
  24. 24. 漢堡選單 觸控螢幕沒有 :hover
  25. 25. https://www.youtube. com/watch?v=DucPpcdQCV8
  26. 26. 我們還是有用 RWD @media rocks
  27. 27. 行動瀏覽器幾乎都支援 HTML5
  28. 28. 瀏覽歷史紀錄 非敏感資訊 便於使用者回頭查詢 用 localStorage 省資料傳輸、DB 資源 e.g. 站上玩遊戲 Safari private mode
  29. 29. window.pushState 用 histroy API 做簡易版 Single Page App (SPA) 找靈感(infinite scroll)點擊商品 回到上一頁垂直位置 手機瀏覽不易在 tab 切換
  30. 30. <input type=”number”> 更方便使用者輸入
  31. 31. 覺得網頁慢? DOMContentLoad? Jank? fps?
  32. 32. 在這裡等網頁載完 地球都過半個月了 http://www.digitaltrends.com/movies/now-can- buy-one-ticket-unlimited-screenings-interstellar/
  33. 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. 34. Load (畫面載入) Idle (使用者點擊按鈕等待回應) Animation (展開漢堡選單出現動畫) Response (點擊商品圖片) ref: https://speakerdeck.com/paullewis/making-a-silky-smooth-web
  35. 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. 36. LIAR
  37. 37. 等待畫面出現? Critical rendering path Progressive jpeg
  38. 38. http://www.webpagetest.org/video/compare.php?tests=150515_EA_FT3-r% 3A1-c%3A0&thumbSize=200&ival=16.67&end=visual
  39. 39. 當瀏覽商品時 只更新部分畫面 + history API
  40. 40. 順~~
  41. 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. 42. Tips 先發出 img request 提示使用者處理進度、placeholder 加速 DOM rendering tree (隱藏不需要的部分) 減少 DOM traverse、DOM access 一次處理完所有 layout 相關 rendering
  43. 43. CSS Animations 「看起來」像 app 般順暢 以過場動畫讓使用者感覺上有在跑 例如 loading bar
  44. 44. 如何讓畫面順暢 scrolling jank animation 16ms budget
  45. 45. compositepaint Rendering Pipeline layoutstyleJavaScript
  46. 46. compositepaint selector (e.g. div > li) layoutstyleJavaScript
  47. 47. compositepaint width layoutstyleJavaScript
  48. 48. compositepaint background layoutstyleJavaScript .gif 也會觸發
  49. 49. compositepaint transform layoutstyleJavaScript
  50. 50. 在 16ms 做完一個片段 甚至小於 10ms pipeline 路徑越短越好
  51. 51. compositepaint The Fastest layoutstyleJavaScript
  52. 52. csstriggers.com by Paul Lewis
  53. 53. <canvas>?
  54. 54. Chrome Dev Tool Timeline
  55. 55. 一定要試試看 chrome://flags/show-fps-counter chrome://inspect/devices (demo)
  56. 56. 還有一些武器可以用
  57. 57. Lazyload Everything 圖片、次要內容延遲載入 副作用:document.scrollTop (觸發 layout)
  58. 58. requestAnimationFrame() 讓瀏覽器把手邊事情做完,才處理 UI 還有 transitionend event 取代 setTimeout
  59. 59. Composite Layers 過少不好、過多也不好 Chrome Dev Tool 可以顯示 chrome://flags#composited-layer-borders
  60. 60. will-change e.g. #foo {will-change: transform;} backface-visibility、translateZ 強制產生 composite layer
  61. 61. Google PageSpeed
  62. 62. Web Page Test http://www.webpagetest.org/ example: http://www.webpagetest. org/result/150515_NY_4F3/
  63. 63. Dulles, VA - Nexus 5 - Chrome - 3GFast http://www.webpagetest.org/video/view. php?id=150515_NY_4F3.3.0
  64. 64. Takeaways RWD = mobile-friendly? 手機效能差,要盡可能優化關鍵轉譯路徑 JS/CSS 動畫要考慮 16ms 限制 利用工具不斷實機測試和優化!
  65. 65. Cross-Browser on mobile? Yes.
  66. 66. 推薦 Udacity 課程 Browser Rendering Optimization http://udacity.com/course/ud860 FREE
  67. 67. Push the Boundary! 我們做得還不夠好! photo credit https://awards.yahoo.com/post/108918468042/how-the-whiplash-writer-director- came-up-with
  68. 68. We are hiring! :) pinkoi.com/about/pinkoist
  69. 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. 70. @perfmatters Pinkoi 全站 92 折優惠碼 到 2015/5/18 日。
  71. 71. Thank you! adam.wang@pinkoi.com 最近出了一本書,跟前端無關 ... http://goo.gl/46rEOe

×