iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
1

今天在Google PageSpeed Insights測試發現:css 沒有達到最佳化建議

您的網頁含有1項禁止轉譯CSS資源,對網頁的轉譯作業造成延遲。

2018-10-07.17.24.40-image.png

舉例:

<link rel="preload" as="style" href="~/css/w3.css" />

在一開始使用者進入首頁的時候,一定會先看到Head、SiderBar
而這時候假如css是在html生成之後才轉譯
這會造成一個奇怪情況:先顯示無css畫面,過一下才調整為有css正確畫面(如下圖)
2018-10-07.19.34.08-image.png

解決方式

把head跟sibar重要css內容寫進abovethefold.scss,或是使用link Tag 加上inline屬性:
<link rel="stylesheet" href="~/css/w3.css" inline />

MiniBlog使用WebOptimizer技術
可以看到在_Layout.cshtml使用link+inline
如:<link rel="stylesheet" href="~/css/abovethefold.scss" inline />
WebOptimizer會讀取含有inline的cshtml使用link自動把abovethefold.scss的內容替換<link>內容

舉例:

html

<html>
  <head>
    <link rel="stylesheet" href="~/css/abovethefold.scss" inline />
  </head>
</html>

abovethefold.scss

/*scss內容*/
.head{
	/*表頭css顯示邏輯*/
}
.SiderBar{
	/*表頭css顯示邏輯*/
}

系統自動幫忙轉換成

<html>
  <head>
    <style>.head{/*表頭css顯示邏輯*/}.SiderBar{/*表頭css顯示邏輯*/}</style>
  </head>
</html>

因為重要css內容在html表頭,預先載入避免上述的問題
接著再去測試,結果果然pass
2018-10-07.18.40.52-image.png


另外對WebOptimizer做一些補充:避免舊版緩存的問題

當更新css或是js後,前端因為舊版本緩存問題
導致使用者還是看到舊的畫面,是很惱人的一件事

而WebOptimizer會自動在js或是css檔後面加上版本參數v,如:

<script src="/js/site.js?v=舊的版本號" async defer>

當site.js有做修改文字的時候,v參數的值就會由系統自動修改

<script src="/js/site.js?v=新的版本號" async defer>

假如想看生成的可以在src\obj\WebOptimizerCache目錄下查看生成的cache檔案
2018-10-07.18.49.05-image.png

WebOptimizer註冊方式

使用方式也很簡單,在Startup.cs中,呼叫UseWebOptimizer()方法
注意,如果有使用UseStaticFiles需要呼叫在它之前
如:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
	//..略
    app.UseWebOptimizer();
    app.UseStaticFiles();
	//..略
}

接著在ConfigureServices使用AddWebOptimizer()方法添加服務

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();
    services.AddWebOptimizer();
}

參考文章


上一篇
06.環境配置設定、使用(注入View、Controller)
下一篇
08.ConfigureServices使用擴充方法添加功能
系列文
輕量高效.NET Core開源Blog引擎:Miniblog.Core30

尚未有邦友留言

立即登入留言