Webページの表示が早くなる！既存ページのクリティカル レンダリング パスを最適化するオンラインツール

スタイルシートを外部ファイルで管理されている人が多いと思います。しかし、最近では上部のコンテンツを表示するためのスタイルシートをインラインで記述し、残りは後にロードさせ、ページの表示を早くしているサイトが増えてきました。
Googleなどでも積極的に採用されているテクニックです。

既存ページのクリティカル レンダリング パスを改善するためのスタイルシートを簡単に生成できるオンラインツールを紹介します。

※秒数は目安です

クリティカル レンダリング パス(Critical Rendering Path)とは、ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になり、この時にブラウザがページの最初のペイントを実行するために必要とするシーケンスのことです。
クリティカル レンダリング パスについて詳しくは、下記をご覧ください。

• サイトのパフォーマンス改善で重要なクリティカル レンダリング パスについて

ここで紹介する「Critical Path CSS Generator」は、クリティカル レンダリング パスのCSSに関する箇所を改善します。
簡単に説明すると、既存ページを解析し、上部のコンテンツを表示するスタイルシートをインラインにして素早く表示させ、残りのスタイルシートを後にロードさせることができます。

Critical Path CSS Generator

さっそく使用してみましょう。
サイトにアクセスし、改善したいページのURLを入力します。

URLを入力

「Generate」ボタンをクリックすると、すぐに解析が始まります。

ページを解析中

解析は、しばらく時間がかかります。

クリティカル レンダリング パスを解析中

完了すると、コードが生成されます。

生成されたコード

コードは通常、CSSとJavaScriptの2つが生成されると思います。

生成されたコードの使い方

1. 生成されたCSSをhead内に記述します。
   ※上部のコンテンツを表示するスタイルシートです。
2. head内の外部CSSと外部JavaScriptを</body>の上に移動します。
   ※JavaScriptでコンテンツを表示している場合は、head内に残します。
3. 生成されたJavaScriptを2で移動した外部ファイルの上に記述します

当ブログでも試してみました。
確かに、ロゴやナビゲーションや見出しなどの表示は速くなりました。しかし、サイドバーのコードがコンテンツの後に記述されているため、サイドバーの表示が後になってしまいました。

1カラムのレイアウトであれば、体感があると思います。2カラム以上のレイアウトは、サイドバー上部のスタイルシートもインラインに加える必要があります。