web-dev-qa-db-ja.com

外部レンダーブロッキングを排除

PageSpeed Insightsでは、次のことを勧めています。

「スクロールせずに見えるコンテンツの外部レンダーブロッキングJavascriptとCSSを削除します。ページに1つのブロッキングCSSリソースがあります。これにより、ページのレンダリングが遅延します。次のリソースのCSS配信を最適化します： http：/ /itransformer.es/css/c0f9425.css "

Cssファイルc0f9425.cssは、jquery-ui.cssファイルとカスタムファイルを組み合わせたファイルです。

私はこの点を本当に理解していません。この提案に従うにはどうすればよいですか？

csspagespeed
18
Manolo

Googleは、最初に必要な（スクロールせずに見える）CSSをインラインに配置し、ページの読み込みの準備ができたらCSSの残りを読み込むことをお勧めします。 こちらを参照 。

JavaScriptについても同じことが言えます。 「コードが必要」をインラインに含めて、ページのロード時に「コードが必要」を ここに推奨 としてロードします。

考えは、ユーザーが最初に見るものをできるだけ早く読み込むことです。

個人的には、コードが分割され、メンテナンスが難しくなるため、従うのが難しいと感じています。ただし、大規模なプロジェクトには意味があります...

26
roka

この問題は、javascriptファイルのみで解決しました。

スクリプトタグにasync属性を追加するか、属性を延期してください。

例えば：

<script src="filename.js" async></script>
<script src="filename.js" async="async"></script>

または

<script src="filename.js" defer></script>
<script src="filename.js" async="async"></script>

非同期を使用することをお勧めします。必要な場合にのみファイルをロードします。延期属性は、ページの最後にファイルをロードします。しばらくすると、必要な機能が実行されません。

7
jagseer singh

スクロールせずに見えるコンテンツの問題でレンダリングブロックCSSを削除します。CSSリソースのブロックを解決します。次の方法でCSS配信を最適化します。

<script>
        var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = 'css/style.css';
        var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
        };
        var raf = requestAnimationFrame || mozRequestAnimationFrame ||
        webkitRequestAnimationFrame || msRequestAnimationFrame;
        if (raf) raf(cb);
        else window.addEventListener('load', cb);
</script>
5
matinict

すべてのcssコードファイルを1つのファイルに変換できます。その後、Googleは1つのファイルのみレンダーブロッキングを提案します。それ以外の場合、Wordpressプロジェクトで作業している場合は、レンダリングブロッキングcssおよびjsを排除するなど、サイトにさまざまなプラグインを使用できます。

完全にレンダリングしたい場合は、レンダリングブロッキングを削除してから、cssコードをすべてheadセクションに配置できます。

0
jagseer singh