PageSpeed Insights スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する


SEO 2016年6月16日 453
レンダリングブロックを排除する対応方法

PageSpeed Insights で表示される「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」方法です。

 

PageSpeedInsights

 

いきなり「レンダリングをブロックする JavaScript を除去してください」とか書かれていてびっくりされるかもしれませんが、除去=削除ではないので気をつけて下さい。

 

「スクロールせずに見えるコンテンツのレンダリング」とは俗に言うファーストビューのことです。ファーストビューに影響しないファイルを先に読み込んでいるから、順番を後回しにしてね。ってだけです。<head>タグにJavascriptがありませんか?それをfooterに移動させれば、「レンダリングをブロックする JavaScript を除去してください」の箇所は完了です。wordpressの場合、wp−headerで読み込んでいるケースがありますので、この場合は、対応するのを素直に諦めましょう。

 

他にもjavascriptの対応方法があります。前述のは「遅延させる」方法で、「同期させる」方法もあります。

 

記述方法は簡単で、scriptタグに「async」を設定するだけです。これでjava script は同期されます。

 

<script async src="../js/xxxxxx.js"></script>

 

次はCSSのレンダリングブロック箇所を対応します。

 

ファーストビューエリアのCSSを抽出し、それ以外のCSSの読み込みを</html>直下に置くことで同期させます。

 

ファーストビューエリアのスタイルを抜き出すのに「Critical Path CSS Generator」サイトでスタイルを抜き出します。

 

IMG_2573

Critical Path CSS Generator

 

①レンダリングブロックに該当しているCSSファイルをコピー&ペーストします。

 

②分析されたCSSが抽出されます。抽出されたCSSを保存してcssファイルを作ります。仮にcritical.cssとします。

 

③作ったcssを<head>タグ内で読み込みます。

 

<head>
  <link href="../css/critical.css" rel="stylesheet">
</head>

 

④headn内で読み込むcssはこれだけです。それ以外のCSSファイルはページ最下部の</body>直下に入れます。

 

</body>
<link href="../css/xxxxx01.css" rel="stylesheet">
<link href="../css/xxxxx01.css" rel="stylesheet">
<link href="../css/xxxxx01.css" rel="stylesheet">

 

これで完了です。「Critical Path CSS Generator」に入れるCSSはレンダリングブロックに該当するcssの数だけやってください。

 

以上で、レンダリングブロックに関する対策は完了になります。

 

 

Facebook