07.優化CSS、JS文件 - iT 邦幫忙 | 排除禁止轉譯的資源
今天在GooglePageSpeedInsights測試發現:css沒有達到最佳化建議[1]您的網頁含有1項禁止轉譯CSS資源,對網頁的轉譯作業造成延遲。舉例:
今天在Google PageSpeed Insights測試發現:css 沒有達到最佳化建議[1]
您的網頁含有1項禁止轉譯CSS資源,對網頁的轉譯作業造成延遲。
舉例: <link rel="preload" as="style" href="~/css/w3.css" />在一開始使用者進入首頁的時候,一定會先看到Head、SiderBar而這時候假如css是在html生成之後才轉譯這會造成一個奇怪情況:先顯示無css畫面,過一下才調整為有css正確畫面(如下圖)
解決方式把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顯示邏輯*/...