講者：demo http://demo.tc （現任MVP、ASP.NET MVC4網站開發美學作者、twMVC核心講者） http://mvc.tw 簡介：網頁最怕的就是卡卡獸來襲，本次主軸將與各位 Web 開發人員分享如何使用「工具」來達到網站優化的需求，利用工具的好處就是無須改變寫法與習慣，套上去就有效果，如此立竿見影的成效身為 .NET 的 Web 開發人員一起來聽聽吧。 注意事項：本課程不注重原理說明，主要圍繞在 .NET 周邊工具，如您不是 .NET 開發人員可能會有點茫然。

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
先從無腦的來
30http://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 內建
36DEV309-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
39Microsoft AJAX Minifier

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

41. 靜態檔案最佳化-Web Essentials
41Web 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
46CSSSprite

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
72ImageReSize

73. http://mvc.tw
 Image resize
 width=‘100’ 或 style=‘width:100px;’這樣調毫無意義
 WebImage
 或是ImageResize
圖片的再優化
73
註1：http://mvc.tw/000a
註1

74. 圖片的再優化-ImageReSize
74ImageReSize

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