クリティカルレンダリングパスだけ上手に抜き取ってくれる手軽で素敵な手法

ウェブサービスを立ち上げたりしていると、気になるのがSEO的な部分です。ページの表示速度をGoogle的に重要視するようになってきているらしいですね。早い分には誰も困らないですもんね。いろいろチューニングしてく中で、最近便利だと思ったものを紹介します。

■Page Speed Insightsで「レンダリングを妨げるリソースの除外」というので怒られる

いろいろチューニングをしている中で、GoogleのPage Speed Insightsとかいうのでチェックをしていたのですが、上記の「レンダリングを妨げるリソースの除外」というので警告が出ていました。

CSSやらJSの読み込み順序を遅らせることによってブロッキングを最小限にしましょう。ということですね。なるほど、CSSを読み込んでいる間は、読み込み終わるまでブラウザの処理が止まるということなので、後ろにずらしていい感じにするということですね。

でも、全部CSSを一番最後に持っていくと、画面が崩れまくって、徐々に整形されていくがっかりな感じになります。そこで、初期表示される部分のCSSだけ抜き取ってstyleタグなどをheadタグの中に直接埋め込む手法を取ると、ブロッキングも発生せず、きれいに表示されるということだと理解しました。

この初期表示のときに利用するCSSを「クリティカルレンダリングパス」というらしいです。へー。

なんかいろいろ調べていったのですが、抜き出してくれるウェブサービスがありました。一番手軽に利用できる手段ではないかと思います。

使い方は簡単で、対象のサイトのURLを入力、左のテキストエリアに表示に利用しているCSSを全部コピペして貼り付けます。最後に「Create Critical Path CSS」のボタンを押せば、右のフォームに抜き出されたCSSが表示されます。

この生成されたCSSをheadタグの中のstyleタグで囲ったところに直接書いてあげれば完成です。

無事にPageSpeedInsightsのスコアもPCでは98点以上を安定して表示することができるようになりました。

ぜひ、便利ですので試してみてください。