Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

twMVC
March 30, 2013

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

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

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

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

twMVC

March 30, 2013
Tweet

More Decks by twMVC

Other Decks in Technology

Transcript

  1. 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/
  2. 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/
  3. 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
  4. 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
  5. http://mvc.tw  減少 HTTP 請求  降低靜態檔案大小  壓縮圖片 

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

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

    讓DOM簡單化  移除不必要的元素  不要在開頭放置 Javascript  使用CDN 網站最佳化理論 24
  8. http://mvc.tw  ASP.NET MVC4 內建  Microsoft AJAX Minifier 

    http://demo.tc/Post/621  Web Essentials 靜態檔案最佳化 38
  9. 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
  10. http://mvc.tw  Gzip  IIS 設定  Web.Config  SDCH

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

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

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

    CacheProfile  Ram Cache  WebCache  RunTime Cache 快取 56
  14. 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
  15. http://mvc.tw  IIS設定靜態、動態快取  Web.config 也可以設定  Output cache 

    CacheProfile  Ram Cache  WebCache  RunTime Cache 快取 60
  16. http://mvc.tw  IIS設定靜態、動態快取  Web.config 也可以設定  Output cache 

    CacheProfile  Ram Cache  WebCache  RunTime Cache 快取 62
  17. http://mvc.tw  Image resize  width=‘100’ 或 style=‘width:100px;’這樣調毫無意義  WebImage

    圖片的再優化 71 註1:http://mvc.tw/000J 註2:http://mvc.tw/000K
  18. http://mvc.tw  Image resize  width=‘100’ 或 style=‘width:100px;’這樣調毫無意義  WebImage

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

  20. 參考資料 • 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