page speed insightを見るとCSSのレンダリングブロックのアラートが出ることがあります。特にスマートフォンでページをチェックしたときにはこのメッセージがよく表示されると思います。 Googleのレファレンスを見ると、ファーストビューに必要なものはhead内でインラインで記述し、それ以外のものはあとから読み込むようにしてくださいとのことです。 今回、かなりこの問題の解決に苦労したので、いろいろ調べたことをまとめてみたいと思います。 基本的にはGoogleのベスト・プラクティス集である”Web Fundamentals“のうち、 「クリティカルレンダリングパス」という章を参考に見ていきたいと思います。 そもそもレンダリングブロックとは javascriptとcssの依存関係 ファーストビューのレンダリングブロック こんな内容でお送り致します。 そもそもレンダリングブロックとは?
![ページスピードのチューニングその1:CSSとJSによるレンダリングブロックの仕組み - 株式会社インターエデュ・ドットコム](https://cdn-ak-scissors.b.st-hatena.com/image/square/bafa133239c2fea264498e4403565ba72f0cef94/height=288;version=1;width=512/https%3A%2F%2Fcorporate.inter-edu.com%2Fwp-content%2Fuploads%2F2016%2F09%2Ftimeline-eyecatch.png)