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

810 views
681 views

Published on



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

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

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

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
810
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. 超。光速 網站最佳化實戰 工欲善其事,必先利其器。 2013/03/30
  2. 2. http://mvc.tw 2 http://pabblogger.files.wordpress.com/2010/08/166g75t.jpg 天下武功無堅不摧,唯快不破
  3. 3. http://mvc.tw 歡迎來到 世代 3 光
  4. 4. http://mvc.tw  桌機速度越來越快 歡迎來到 世代 4 光
  5. 5. http://mvc.tw  桌機速度越來越快  有線網路「妹」多到用不完 歡迎來到 世代 5 光
  6. 6. http://mvc.tw  桌機速度越來越快  有線網路「妹」多到用不完  連手機都四核心了 歡迎來到 世代 6 光
  7. 7. http://mvc.tw  桌機速度越來越快  有線網路「妹」多到用不完  連手機都四核心了  網路、硬體都突飛猛進的世代下 歡迎來到 世代 7 光
  8. 8. http://mvc.tw  桌機速度越來越快  有線網路「妹」多到用不完  連手機都四核心了  網路、硬體都突飛猛進的世代下 歡迎來到 世代 8 光 我們為什麼還要自己最佳化網站?
  9. 9. http://mvc.tw  行動裝置的瀏覽量已經超越桌機 歡迎來到 世代 9 註1 註1:http://www.nownews.com/2013/03/05/320-2909868.htm
  10. 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. 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. 12. http://mvc.tw 歡迎來到 世代 12 1 2 3 4
  13. 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. 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. 15. http://mvc.tw 歡迎來到 世代 15 最佳化後原始網站 臃腫的內容 纖細的內容
  16. 16. http://mvc.tw 歡迎來到 世代 16 最佳化後原始網站 纖細的內容
  17. 17. http://mvc.tw 歡迎來到 世代 17 最佳化後原始網站
  18. 18. http://mvc.tw  減少 HTTP 請求 網站最佳化理論 18
  19. 19. http://mvc.tw  減少 HTTP 請求  降低靜態檔案大小 網站最佳化理論 19
  20. 20. http://mvc.tw  減少 HTTP 請求  降低靜態檔案大小  壓縮圖片 網站最佳化理論 20
  21. 21. http://mvc.tw  減少 HTTP 請求  降低靜態檔案大小  壓縮圖片  讓DOM簡單化 網站最佳化理論 21
  22. 22. http://mvc.tw  減少 HTTP 請求  降低靜態檔案大小  壓縮圖片  讓DOM簡單化  移除不必要的元素 網站最佳化理論 22
  23. 23. http://mvc.tw  減少 HTTP 請求  降低靜態檔案大小  壓縮圖片  讓DOM簡單化  移除不必要的元素  不要在開頭放置 Javascript 網站最佳化理論 23
  24. 24. http://mvc.tw  減少 HTTP 請求  降低靜態檔案大小  壓縮圖片  讓DOM簡單化  移除不必要的元素  不要在開頭放置 Javascript  使用CDN 網站最佳化理論 24
  25. 25. http://mvc.tw 網站最佳化理論 25
  26. 26. http://mvc.tw  http://mvc.tw/000e (webpagetest) 26 推薦線上測速網站
  27. 27. http://mvc.tw  http://mvc.tw/000e (webpagetest) 27 推薦線上測速網站
  28. 28. http://mvc.tw 由工具開始,進而瞭解理論 28
  29. 29. http://mvc.tw 由工具開始,進而瞭解理論 29
  30. 30. http://mvc.tw  靜態圖片最佳化 Image Optimizer 先從無腦的來 30http://mvc.tw/000I
  31. 31. http://mvc.tw  使用前使用後的圖片 先從無腦的來(Image Optimizer) 31
  32. 32. http://mvc.tw  使用前使用後的圖片 先從無腦的來(Image Optimizer) 32
  33. 33. http://mvc.tw 先從無腦的來(Image Optimizer) 33
  34. 34. http://mvc.tw  再看一次使用前使用後的圖片 先從無腦的來(Image Optimizer) 34
  35. 35. http://mvc.tw  ASP.NET MVC4 內建  Microsoft AJAX Minifier  Web Essentials 靜態檔案最佳化 35
  36. 36. 靜態檔案最佳化-ASP.NET MVC4 內建 36DEV309-BundlingAndMinification
  37. 37. http://mvc.tw  ASP.NET MVC4 內建  Microsoft AJAX Minifier  Web Essentials 靜態檔案最佳化 37
  38. 38. http://mvc.tw  ASP.NET MVC4 內建  Microsoft AJAX Minifier  http://demo.tc/Post/621  Web Essentials 靜態檔案最佳化 38
  39. 39. 靜態檔案最佳化-Microsoft AJAX Minifier 39Microsoft AJAX Minifier
  40. 40. http://mvc.tw  ASP.NET MVC4 內建  Microsoft AJAX Minifier  Web Essentials 靜態檔案最佳化 40
  41. 41. 靜態檔案最佳化-Web Essentials 41Web EssentialsTest
  42. 42. http://mvc.tw  Stitches 線上服務(HTML5) CSS Sprite技巧 42 註1:http://mvc.tw/000K 註1
  43. 43. CSS Sprite- Stitches 43
  44. 44. CSS Sprite- Stitches 44
  45. 45. CSS Sprite- Stitches 45
  46. 46. CSS Sprite- Stitches 46CSSSprite
  47. 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. 48. Sprite and Image Optimization Preview 4 48
  49. 49. CSS Sprite- 49 Sprite and Image Optimization Preview 4 CSSSprite
  50. 50. http://mvc.tw  Gzip  IIS 設定  Web.Config  SDCH (Shared Dictionary Compression over HTTP)  目前只有Chrome支援的壓縮 壓縮 50 註1:http://mvc.tw/000Z
  51. 51. Gzip IIS 設定 51
  52. 52. Gzip IIS 設定 52
  53. 53. http://mvc.tw  Gzip  IIS 設定  Web.Config  SDCH (Shared Dictionary Compression over HTTP)  目前只有Chrome支援的壓縮 壓縮 53 註1:http://mvc.tw/000Z
  54. 54. http://mvc.tw <system.webServer> <urlCompression doStaticCompression="true" doDynamicCompression="true" /> </system.webServer> 壓縮 – Gzip – Web.config 54
  55. 55. http://mvc.tw  Gzip  IIS 設定  Web.Config  SDCH (Shared Dictionary Compression over HTTP)  目前只有Chrome支援的壓縮 壓縮 55
  56. 56. http://mvc.tw  IIS設定靜態、動態快取  Web.config 也可以設定  Output cache  CacheProfile  Ram Cache  WebCache  RunTime Cache 快取 56
  57. 57. 快取 IIS 設定 57
  58. 58. 快取 IIS 設定 58
  59. 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. 60. http://mvc.tw  IIS設定靜態、動態快取  Web.config 也可以設定  Output cache  CacheProfile  Ram Cache  WebCache  RunTime Cache 快取 60
  61. 61. 61 快取 – Output Cache cacheSample
  62. 62. http://mvc.tw  IIS設定靜態、動態快取  Web.config 也可以設定  Output cache  CacheProfile  Ram Cache  WebCache  RunTime Cache 快取 62
  63. 63. 63 快取 – WebCache cacheSample
  64. 64. http://mvc.tw  CSS放上(</Head>前)、JS放下(</Body>前)  優點:不用等JS  缺點:第一次進入網站會有很明顯的三重變化(白、元素、JS) 本質上的調整 64
  65. 65. http://mvc.tw  CSS放上(</Head>前)、JS放下(</Body>前)  優點:不用等JS  缺點:第一次進入網站會有很明顯的三重變化(白、元素、JS)  HTML移除註解  優點:爽度很高  缺點:其實幫助不大… 本質上的調整 65
  66. 66. • 天瓏 • 博客來 • PCHOME • 讀冊生活 • 金石堂 • 誠品
  67. 67. 謝謝各位 h t t p : / / m v c . t w
  68. 68. 別走,還沒完…
  69. 69. 雖然沒人喊「安哥」但還是有最後一首…
  70. 70. http://mvc.tw  Image resize  width=‘100’ 或 style=‘width:100px;’這樣調毫無意義  WebImage 圖片的再優化 71 註1:http://mvc.tw/000J 註2:http://mvc.tw/000K
  71. 71. 圖片的再優化-WebImage 72ImageReSize
  72. 72. http://mvc.tw  Image resize  width=‘100’ 或 style=‘width:100px;’這樣調毫無意義  WebImage  或是ImageResize 圖片的再優化 73 註1:http://mvc.tw/000a 註1
  73. 73. 圖片的再優化-ImageReSize 74ImageReSize
  74. 74. http://mvc.tw 圖片的再優化-ImageResize 75  基本功能
  75. 75. http://mvc.tw 圖片的再優化-ImageResize 76  基本功能  授權費用
  76. 76. 77
  77. 77. 工具一定有風險,不懂原理有賺有賠,課程威力示範不保證工具之最低收益,開發者使用前應詳閱工具公開說明書。
  78. 78. 聯絡資訊 Blog: http://demo.tc twMVC: http://mvc.tw G+: http://demo.tc/+ FB: http://fb.me/demo.fan Plurk: http://plurk.com/demoshop
  79. 79. 參考資料 • 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
  80. 80. 謝謝各位 • 本投影片所包含的商標與文字皆屬原著作者所有。 • 本投影片使用的圖片皆從網路搜尋。 • 本著作係採用 Creative Commons 姓名標示-非商業性-相同方式分享 3.0 台灣 (中華民國) 授權條款授權。 h t t p : / / m v c . t w

×