這邊,我們先建立一個範例程式來測試

  1. 刻意選一個預設沒有MVC Bundle功能的專案範本,開啟並建立

  2. 這個是掃下去所會看到的分數,通常,這些也是ˇ我們常在Asp.net 運行環境所會遇到的問題。剛刻意選擇沒有MVC Bundle的效果,主要是為了凸顯第一個F項目,點開後,其實就可以看到其評分的依據

  3. 點開Read More可以看到一些它建議的解法

    這個項目之所以會分數這麼低,是因為它認為你有太多的檔案分散(靜態檔案),使用者必須要一個一個下載,會占用你網站頻寬且不是一個有效率的方式,ASP.NET 4.5加入了Bundle機制,可以把分散的CSS跟JS檔案打包後,並且透過IIS的壓縮傳輸,就是一個有效的方法,同時,網站上使用的Icon或一些背景圖,建議使用CSS Sprites處理

    CSS Sprites 的概念,就是把圖片集中放在一張圖上,接著透過CSS定位方式去顯示該圖片 Ref : http://www.w3schools.com/css/css_image_sprites.asp


    如果直接使用Bundle的Web範本來測試,其實這個分數會明顯高很多,甚至直接是A等級,版本在進步啊~

  4. 接著,繼續看最容易跳紅燈的CDN,通常,我們如果不是服務跨域的使用者,例如同時跨美洲、歐洲、亞洲,以成本來說,很少會使用CDN來做分散傳輸,這時,直接點選 Add as CDN,讓它認定說已經有透過CDN服務,就可以閃過這項測試。

    如果真的有使用CDN服務,使用上必須要記得確認檔案同步,確保版本都是一致的,特別是常用的JQuery、CSS和圖片.

    Ref : https://www.cloudflare.com/features-cdn/



  5. Add Expires headers這個項目點開,通常會看到蠻多靜態的檔案(偶爾會有一兩個動態產生的檔案),這個目的,主要設定IIS,讓它來判斷資料是否有過期,假設沒有設定,它會誤判成是檔案都是新的,只要有Client的請求,它就會給,造成伺服器的負擔

    大部分的範例文件,都是建議設定7天就可以,這可以降低IIS的負擔


    不過設定完以後,還會看到2個檔案導致成績只有B,其中一個是Favicon.ico,這個在重開IIS跟重啟Pool就不見了,猜測應該是測到先前狀態。另外一個,是一個動態產生的/browserLink。查下去才發現,我忘記關掉我測試環境的選項,關掉以後,這個項目就會恢復成等級A



    Ref : http://www.asp.net/visual-studio/overview/2013/using-browser-link#browser-refresh

  6. 下一個,通常會重點紅字的都是ETag,它的功能主要是在處理Server跟Client之間的檔案比對,透過一個Hash Code來檢查說檔案是否已經被修改過,同樣的概念在Bundle機制上也看得到,所以這時候IIS又再比對一次就有點浪費了。

    網路上大多數的解法,是直接在HTTP Response Headers加上Etag = “” , 不過實際效果,並沒有在II8上發揮效用,檔案一樣有ETag.


    預設,II8也是開啟,可以從IIS_schema.xml這邊看到預設值,爬文的結果,建議是改在C:WindowsSystem32inetsrvconfigapplicationHost.config,

    Ref : http://blogs.iis.net/wonyoo/iis-8-0-to-use-or-not-to-use-etag-that-is-the-question

    <staticContent>


    新增這行 => <clientCache setEtag=”false” />
    </staticContent>



  7. Use cookie-free domains , 這個通常是會略過的項目,解法是需要額外設定一個cookie-free的domain來放置這些檔案,通常懶惰的結果,有時候會漏掉這個步驟

  8. 補充 : 開啟動態跟靜態壓縮,如果遇到警語,代表可能沒有安裝完全,記得補安裝套件


結語

YSlow對於ASP.NET的運行環境來說,IIS的版本是第一個重點,因為常常會因為版本的不同,解法也不同,其次,ASP.NET的版本更新,通常會帶入一些效能的調整,對於YSlow也是有直接的影響,版本必須要特別小心

Leave a Reply

Your email address will not be published. Required fields are marked *