Save 37% off PRO during our Black Friday Sale! »

超。光速 網站最佳化實戰 -twMVC#8

Da5dec3f0447a582c1f9d650edbe0142?s=47 twMVC
March 30, 2013

超。光速 網站最佳化實戰 -twMVC#8

講者:demo http://demo.tc (現任MVP、ASP.NET MVC4網站開發美學作者、twMVC核心講者)

http://mvc.tw
簡介:網頁最怕的就是卡卡獸來襲,本次主軸將與各位 Web 開發人員分享如何使用「工具」來達到網站優化的需求,利用工具的好處就是無須改變寫法與習慣,套上去就有效果,如此立竿見影的成效身為 .NET 的 Web 開發人員一起來聽聽吧。

注意事項:本課程不注重原理說明,主要圍繞在 .NET 周邊工具,如您不是 .NET 開發人員可能會有點茫然。

Da5dec3f0447a582c1f9d650edbe0142?s=128

twMVC

March 30, 2013
Tweet

Transcript

  1. 超。光速 網站最佳化實戰 工欲善其事,必先利其器。 2013/03/30

  2. http://mvc.tw 2 http://pabblogger.files.wordpress.com/2010/08/166g75t.jpg 天下武功無堅不摧,唯快不破

  3. http://mvc.tw 歡迎來到 世代 3 光

  4. http://mvc.tw  桌機速度越來越快 歡迎來到 世代 4 光

  5. http://mvc.tw  桌機速度越來越快  有線網路「妹」多到用不完 歡迎來到 世代 5 光

  6. http://mvc.tw  桌機速度越來越快  有線網路「妹」多到用不完  連手機都四核心了 歡迎來到 世代 6

  7. http://mvc.tw  桌機速度越來越快  有線網路「妹」多到用不完  連手機都四核心了  網路、硬體都突飛猛進的世代下 歡迎來到

    世代 7 光
  8. http://mvc.tw  桌機速度越來越快  有線網路「妹」多到用不完  連手機都四核心了  網路、硬體都突飛猛進的世代下 歡迎來到

    世代 8 光 我們為什麼還要自己最佳化網站?
  9. http://mvc.tw  行動裝置的瀏覽量已經超越桌機 歡迎來到 世代 9 註1 註1:http://www.nownews.com/2013/03/05/320-2909868.htm

  10. http://mvc.tw  行動裝置的瀏覽量已經超越桌機  行動裝置上網速度很淒涼(平均只有1.26Mbps) 歡迎來到 世代 10 註1 註2

    註1:http://www.nownews.com/2013/03/05/320-2909868.htm 註2:http://www.eprice.com.tw/mobile/talk/102/4786327/1/
  11. http://mvc.tw  行動裝置的瀏覽量已經超越桌機  行動裝置上網速度很淒涼(平均只有1.26Mbps)  不適當的網頁技術 歡迎來到 世代 11

    註1 註2 註1:http://www.nownews.com/2013/03/05/320-2909868.htm 註2:http://www.eprice.com.tw/mobile/talk/102/4786327/1/
  12. http://mvc.tw 歡迎來到 世代 12 1 2 3 4

  13. http://mvc.tw  行動裝置的瀏覽量已經超越桌機  行動裝置上網速度很淒涼(平均只有1.26Mbps)  不適當的網頁技術 歡迎來到 世代 13

    註1:http://www.nownews.com/2013/03/05/320-2909868.htm 註2:http://www.eprice.com.tw/mobile/talk/102/4786327/1/ 註1 註2
  14. http://mvc.tw  行動裝置的瀏覽量已經超越桌機  行動裝置上網速度很淒涼(平均只有1.26Mbps)  不適當的網頁技術  作業系統的效能大幅提升導致於網站感覺慢很多 歡迎來到

    世代 14 自己動手樂趣多? 註1:http://www.nownews.com/2013/03/05/320-2909868.htm 註2:http://www.eprice.com.tw/mobile/talk/102/4786327/1/ 註1 註2
  15. http://mvc.tw 歡迎來到 世代 15 最佳化後 原始網站 臃腫的內容 纖細的內容

  16. http://mvc.tw 歡迎來到 世代 16 最佳化後 原始網站 纖細的內容

  17. http://mvc.tw 歡迎來到 世代 17 最佳化後 原始網站

  18. http://mvc.tw  減少 HTTP 請求 網站最佳化理論 18

  19. http://mvc.tw  減少 HTTP 請求  降低靜態檔案大小 網站最佳化理論 19

  20. http://mvc.tw  減少 HTTP 請求  降低靜態檔案大小  壓縮圖片 網站最佳化理論

    20
  21. http://mvc.tw  減少 HTTP 請求  降低靜態檔案大小  壓縮圖片 

    讓DOM簡單化 網站最佳化理論 21
  22. http://mvc.tw  減少 HTTP 請求  降低靜態檔案大小  壓縮圖片 

    讓DOM簡單化  移除不必要的元素 網站最佳化理論 22
  23. http://mvc.tw  減少 HTTP 請求  降低靜態檔案大小  壓縮圖片 

    讓DOM簡單化  移除不必要的元素  不要在開頭放置 Javascript 網站最佳化理論 23
  24. http://mvc.tw  減少 HTTP 請求  降低靜態檔案大小  壓縮圖片 

    讓DOM簡單化  移除不必要的元素  不要在開頭放置 Javascript  使用CDN 網站最佳化理論 24
  25. http://mvc.tw 網站最佳化理論 25

  26. http://mvc.tw  http://mvc.tw/000e (webpagetest) 26 推薦線上測速網站

  27. http://mvc.tw  http://mvc.tw/000e (webpagetest) 27 推薦線上測速網站

  28. http://mvc.tw 由工具開始,進而瞭解理論 28

  29. http://mvc.tw 由工具開始,進而瞭解理論 29

  30. http://mvc.tw  靜態圖片最佳化 Image Optimizer 先從無腦的來 30 http://mvc.tw/000I

  31. http://mvc.tw  使用前使用後的圖片 先從無腦的來(Image Optimizer) 31

  32. http://mvc.tw  使用前使用後的圖片 先從無腦的來(Image Optimizer) 32

  33. http://mvc.tw 先從無腦的來(Image Optimizer) 33

  34. http://mvc.tw  再看一次使用前使用後的圖片 先從無腦的來(Image Optimizer) 34

  35. http://mvc.tw  ASP.NET MVC4 內建  Microsoft AJAX Minifier 

    Web Essentials 靜態檔案最佳化 35
  36. 靜態檔案最佳化-ASP.NET MVC4 內建 36 DEV309-BundlingAndMinification

  37. http://mvc.tw  ASP.NET MVC4 內建  Microsoft AJAX Minifier 

    Web Essentials 靜態檔案最佳化 37
  38. http://mvc.tw  ASP.NET MVC4 內建  Microsoft AJAX Minifier 

    http://demo.tc/Post/621  Web Essentials 靜態檔案最佳化 38
  39. 靜態檔案最佳化-Microsoft AJAX Minifier 39 Microsoft AJAX Minifier

  40. http://mvc.tw  ASP.NET MVC4 內建  Microsoft AJAX Minifier 

    Web Essentials 靜態檔案最佳化 40
  41. 靜態檔案最佳化-Web Essentials 41 Web EssentialsTest

  42. http://mvc.tw  Stitches 線上服務(HTML5) CSS Sprite技巧 42 註1:http://mvc.tw/000K 註1

  43. CSS Sprite- Stitches 43

  44. CSS Sprite- Stitches 44

  45. CSS Sprite- Stitches 45

  46. CSS Sprite- Stitches 46 CSSSprite

  47. http://mvc.tw  Stitches 線上服務(HTML5)  Sprite and Image Optimization Preview

    4 CSS Sprite技巧 47 註1:http://mvc.tw/000K 註2:http://mvc.tw/000J 註1 註2
  48. Sprite and Image Optimization Preview 4 48

  49. CSS Sprite- 49 Sprite and Image Optimization Preview 4 CSSSprite

  50. http://mvc.tw  Gzip  IIS 設定  Web.Config  SDCH

    (Shared Dictionary Compression over HTTP)  目前只有Chrome支援的壓縮 壓縮 50 註1:http://mvc.tw/000Z
  51. Gzip IIS 設定 51

  52. Gzip IIS 設定 52

  53. http://mvc.tw  Gzip  IIS 設定  Web.Config  SDCH

    (Shared Dictionary Compression over HTTP)  目前只有Chrome支援的壓縮 壓縮 53 註1:http://mvc.tw/000Z
  54. http://mvc.tw <system.webServer> <urlCompression doStaticCompression="true" doDynamicCompression="true" /> </system.webServer> 壓縮 – Gzip

    – Web.config 54
  55. http://mvc.tw  Gzip  IIS 設定  Web.Config  SDCH

    (Shared Dictionary Compression over HTTP)  目前只有Chrome支援的壓縮 壓縮 55
  56. http://mvc.tw  IIS設定靜態、動態快取  Web.config 也可以設定  Output cache 

    CacheProfile  Ram Cache  WebCache  RunTime Cache 快取 56
  57. 快取 IIS 設定 57

  58. 快取 IIS 設定 58

  59. http://mvc.tw <system.webServer> <caching> <profiles> <add extension=".gif" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange" /> <add

    extension=".js" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange" /> </profiles> </caching> </system.webServer> 快取 – Web.config 59
  60. http://mvc.tw  IIS設定靜態、動態快取  Web.config 也可以設定  Output cache 

    CacheProfile  Ram Cache  WebCache  RunTime Cache 快取 60
  61. 61 快取 – Output Cache cacheSample

  62. http://mvc.tw  IIS設定靜態、動態快取  Web.config 也可以設定  Output cache 

    CacheProfile  Ram Cache  WebCache  RunTime Cache 快取 62
  63. 63 快取 – WebCache cacheSample

  64. http://mvc.tw  CSS放上(</Head>前)、JS放下(</Body>前)  優點:不用等JS  缺點:第一次進入網站會有很明顯的三重變化(白、元素、JS) 本質上的調整 64

  65. http://mvc.tw  CSS放上(</Head>前)、JS放下(</Body>前)  優點:不用等JS  缺點:第一次進入網站會有很明顯的三重變化(白、元素、JS)  HTML移除註解 

    優點:爽度很高  缺點:其實幫助不大… 本質上的調整 65
  66. • 天瓏 • 博客來 • PCHOME • 讀冊生活 • 金石堂

    • 誠品
  67. 謝謝各位 h t t p : / / m v

    c . t w
  68. None
  69. 別走,還沒完…

  70. 雖然沒人喊「安哥」但還是有最後一首…

  71. http://mvc.tw  Image resize  width=‘100’ 或 style=‘width:100px;’這樣調毫無意義  WebImage

    圖片的再優化 71 註1:http://mvc.tw/000J 註2:http://mvc.tw/000K
  72. 圖片的再優化-WebImage 72 ImageReSize

  73. http://mvc.tw  Image resize  width=‘100’ 或 style=‘width:100px;’這樣調毫無意義  WebImage

     或是ImageResize 圖片的再優化 73 註1:http://mvc.tw/000a 註1
  74. 圖片的再優化-ImageReSize 74 ImageReSize

  75. http://mvc.tw 圖片的再優化-ImageResize 75  基本功能

  76. http://mvc.tw 圖片的再優化-ImageResize 76  基本功能  授權費用

  77. 77

  78. 工具一定有風險,不懂原理有賺有賠,課程威力示範不保證工具之最低收益,開發者使用前應詳閱工具公開說明書。

  79. 聯絡資訊 Blog: http://demo.tc twMVC: http://mvc.tw G+: http://demo.tc/+ FB: http://fb.me/demo.fan Plurk:

    http://plurk.com/demoshop
  80. 參考資料 • Javascript source map • http://mvc.tw/000U • Microsoft Ajax

    Minifier 將 js 和 css 檔案最小化 • http://demo.tc/Post/621 • ASPNET_Image_Optimization_Preview4 • http://mvc.tw/000W • http://mvc.tw/000X • IIS 壓縮設定 • http://mvc.tw/000Z
  81. 謝謝各位 • 本投影片所包含的商標與文字皆屬原著作者所有。 • 本投影片使用的圖片皆從網路搜尋。 • 本著作係採用 Creative Commons 姓名標示-非商業性-相同方式分享

    3.0 台灣 (中華民國) 授權條款授權。 h t t p : / / m v c . t w