twMVC#08 | 超。光速 網站最佳化實戰
0 likes146 views
本文件讨论了网站优化的重要性，强调在技术快速发展的时代，自我优化网站仍然至关重要。特别提到移动设备的浏览量已超越桌面设备，网站速度和适当技术的使用影响用户体验。文中还提供了多种网站优化的策略和工具，以帮助减少加载时间并提升性能。
twMVC#08 | 超。光速 網站最佳化實戰
- 6. http://mvc.tw 桌機速度越來越快 有線網路「妹」多到用不完 連手機都四核心了 歡迎來到 世代 6 光
- 7. http://mvc.tw 桌機速度越來越快 有線網路「妹」多到用不完 連手機都四核心了 網路、硬體都突飛猛進的世代下 歡迎來到 世代 7 光
- 8. http://mvc.tw 桌機速度越來越快 有線網路「妹」多到用不完 連手機都四核心了 網路、硬體都突飛猛進的世代下 歡迎來到 世代 8 光 我們為什麼還要自己最佳化網站？
- 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/
- 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
- 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
- 30. http://mvc.tw 靜態圖片最佳化 Image Optimizer 先從無腦的來 30http://mvc.tw/000I
- 35. http://mvc.tw ASP.NET MVC4 內建 Microsoft AJAX Minifier Web Essentials 靜態檔案最佳化 35
- 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
- 42. http://mvc.tw Stitches 線上服務(HTML5) CSS Sprite技巧 42 註1：http://mvc.tw/000K 註1
- 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
- 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. 別走，還沒完…
- 71. http://mvc.tw Image resize width=‘100’ 或 style=‘width:100px;’這樣調毫無意義 WebImage 圖片的再優化 71 註1：http://mvc.tw/000J 註2：http://mvc.tw/000K
- 73. http://mvc.tw Image resize width=‘100’ 或 style=‘width:100px;’這樣調毫無意義 WebImage 或是ImageResize 圖片的再優化 73 註1：http://mvc.tw/000a 註1
- 77. 77
- 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