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カラム以上のレイアウトは、サイドバー上部のスタイルシートもインラインに加える必要があります。

top of page

©2017 coliss