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

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

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

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

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
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  基本功能  授權費用
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