web-dev-qa-db-ja.com

スクロールせずに見えるコンテンツのレンダリングをブロックするJavaScriptとCSSを排除する

Google Page Insight で速度スコアを求めると、「スクロールせずに見えるコンテンツのレンダリングをブロックするJavaScriptとCSSを削除する」などの警告が表示される場合があります。修正するソリューションを探しています。この問題。

CSSとJsファイルをWebページの下部に移動するためのオタクが既にほとんどいないことは知っています。Webページのコンテンツが読み込まれた後にのみ読み込まれます。しかし、残念ながら、それは正しい答えではありません。この問題は、上記のフィールドコンテンツのレンダリングを許可する方法に関するものです。だから誰もが解決策を持っています（「CSSとJSをウェブページのフッターに移動する」を除く）？

seogoogle-searchpage-speed
1
Navas Azeez

ついに自分で解決策を見つけました。

デフォルトでは、CSSはレンダリングブロックリソースとして扱われます。つまり、CSSOMが構築されるまで、ブラウザーは処理されたコンテンツのレンダリングを保持します。 CSSを無駄のないものにして、できるだけ早く配信し、メディアタイプとクエリを使用してレンダリングのブロックを解除してください。

この問題を修正するには、上記の折り畳みコンテンツに適用するスタイルシートのルールを特定し、外部のCSSファイルからそれらを削除し、それらを縮小してインラインCSSとして配信するだけです。次に、外部CSSリンクをページの下部に移動します。以下のように、

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>

このように上記のフォールドのスタイルルールを配信した後、ランディングページの1つで速度スコア100/100を達成できました。 speed insight score をご覧ください。

注：スタイルルールが重い場合は、インラインcss配信を使用しないでください

2
Navas Azeez

すべてのスクリプト呼び出しを変更して「非同期」をロードできますが、支援できる場合は関数でdoc/window readyを使用しないでください。次に、 https://github.com/filamentgroup/loadCSS のようなものを使用して、CSSファイルを非同期にロードするスクリプトを作成します。

ただし、サードパーティのスクリプト/ソース/キャッシュ/などに関しては、運が悪い。皮肉なことに、Googleスクリプトは、これらすべてのルールの支持者であると考えると、Googleのページ速度スコアを低下させます。

0
dhaupin