HTMLレンダリングをブロックするリソースを排除

HTMLレンダリングをブロックするリソースを排除

User Experience（ユーザーエクスペリエンス）を改善する為、最初から何か表示し始めるまで時間は短いほど良いです。目標は、重要なリソースをインライン化し、重要でないリソースを延期し、未使用の物をすべて削除することにより、これらのレンダリングブロックURLの影響を減らすことです。

image

レンダリングブロックリソースとは？

レンダリングブロックURLはスクリプトとスタイルシート

ブロック<script>タグ

  • <head> の中。
  • defer属性、async属性全部がない。

ブロック<link rel="stylesheet">タグ

  • disable属性がない。
  • media属性がないまたはmedia="all”

重要なリソースを特定する方法

レンダリングをブロックするリソースの影響を減らすための最初のステップは、重要なものとそうでないものを特定することです。Chrome DevToolsの[Coverage]タブを使用してページをロードすると、タブには、ロードされたコードの量と、使用されたコードの量が表示されます。

image
ファイル詳細にもどの部分が使うかどうかもわかります
ファイル詳細にもどの部分が使うかどうかもわかります

必要なコードとスタイルのみを返信することで、ページのサイズを縮小できます。 URLをクリックして、[Source]パネルでそのファイルを調べます。 CSSファイルのスタイルとJavaScriptファイルのコードは2色でマークされます：

  • 緑（クリティカル）：最初のペイントに必要な物。 ページのコア機能にとって重要なコード。
  • 赤（重要ではない）：すぐには表示されないコンテンツに適用されるスタイル。 ページのコア機能で使用されていないコード。

レンダリングブロックスクリプトを削除する方法

重要なコードを特定したら、そのコードをレンダリングブロックURLからHTMLページのインラインスクリプトタグに移動します。 ページが読み込まれると、ページのコア機能を処理するために必要なものが含まれます。

重要ではないレンダリングブロックURLにコードがある場合は、そのコードをURLに保持してから、asyncまたはdeferでURLをマークできます。

必要ないソースは削除した方が良いです。

レンダリングをブロックするスタイルシートを削除する方法

HTMLページの<head>にある<style>ブロック内の最初のペイントに必要なインラインクリティカルスタイル。 次に、preloadリンクを使用して残りのスタイルを非同期でロードします。

レンダリングブロックスタイルを排除する別のアプローチは、これらのスタイルをメディアクエリごとに整理されたさまざまなファイルに分割することです。 次に、各スタイルシートリンクにmedia属性を追加します。 ページをロードするとき、ブラウザは最初のペイントのみをブロックして、ユーザーのデバイスに一致するスタイルシートを取得します。

最後に、いつもCSSを圧縮して、余分な空白や文字を削除する必要があります。これにより、可能な限り最小のバンドルをユーザーに送信します。