2017年09月8日(金)

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

• 0
• 151
• 92
• 233

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

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

※秒数は目安です

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

ここで紹介する「Critical Path CSS Generator」は、クリティカル レンダリング パスのCSSに関する箇所を改善します。
簡単に説明すると、既存ページを解析し、上部のコンテンツを表示するス...