レンダリングブロック防止CSS

Question

CDNからブートストラップ4を参照するWebページがあります。私が参照してるだけCSSがある

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 

：私のHTMLページのheadでは、私は次のよう持っています。しかし、私はGoogleのPageSpeedのツールを実行すると、私は次のエラーを取得する：

は、上記の倍の量でレンダリングブロックJavaScriptとCSSを排除 あなたのページには、1つのブロッキングCSSリソースを持っています。これにより、ページのレンダリングが遅くなります。 次のリソースが読み込まれるのを待たずに、ページ上の上記の折り畳みコンテンツをレンダリングできませんでした。ブロッキングリソースを延期するか、非同期的にロードするか、またはこれらのリソースの重要な部分をHTMLに直接インライン展開してください。 次の最適化CSS配信：

https://maxcdn.bootstrapcdn.com/は...トラップ/ 4.0.0-alpha.2/CSS/bootstrap.min.css

これは鶏と卵の問題であるように私は感じます。私がこのスタイルシート参照を私のbody要素の下に移動すると、そのページを訪れたときに、ページはスタイル付けされていないページにジャンプします。人間として、それは非常にかわいそうです。それでも、私のPageSpeedスコアは大幅に上昇します。

代替アプローチはありますか？私はいつもCDNを使うのが良いことだと思っていました。なぜなら、あなたはいくつかのキャッシング機能を利用することができたからです。しかし、このペナルティはかなり重要であるようです。

Answer 1

これは大きな問題ではないため、CSSを頭に入れておく必要があります。それを下に移動すると、はるかに大きな問題が発生します（形式のないコンテンツ、CSSなどで参照されるリソースが後で読み込まれるなど）

PageSpeedは、すべてのCSSは、「折りたたみの上」の内容（サイトのスクロールを開始する前に表示されるものすべて）を表示し、残りの部分を非同期/後で配信して、Webサイトの最初の正しい表示ができるだけ早くなるようにしました。このCSSファイルは22kBなので、2つの別々のファイルに分割することは、特に追加のhttp-requestを引き起こしたり、cssをインライン化する必要があるため、努力する価値があります。

Answer 2

nodejs環境の場合は、criticalを使用して重要なCSSを作成できます。

次に、あなたのスクリプトの中で次のものを作成することができます

var styleSheetLink = document.createElement('link') 
styleSheetLink.rel = 'stylesheet' 
styleSheetLink.href = 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css' 
styleSheetLink.type = 'text/css' 
var godefer = document.getElementsByTagName('link')[0] 
godefer.parentNode.insertBefore(styleSheetLink, godefer) 

CSSの残りの部分の読み込みを延期します下部にあります。