
「レンダリングに遅延が発生しています。」を解決する方法。
2018.04.29
カテゴリ:WEB制作
タグ:

Google PageSpeed Insightsを使用していると「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」、「レンダリングに遅延が発生しています。」という指摘がよく入ると思います。
これを解決します。
これを解決します。
レンダリングブロックとは・・・
レンダリングのブロックとは、アクセスした際にブラウザがコンテンツ(HTML)を読み込みますが、head内にJavaScriptなどを設置するとコンテンツより優先して読み込まれてしまい、コンテンツの読み込みを邪魔してしまうことです。
これを改善してくださいねというのがGoogleからのメッセージです。
これを改善してくださいねというのがGoogleからのメッセージです。
レンダリングブロックを解決する方法。
まず、head内にあるJavacript、cssでコンテンツの読み込み前に処理する必要のないものはフッターのbodyタグの上、Wordpressの場合はwp_footer()の上に設置しましょう。
CSSのレンダリングブロック解除
簡易バージョン
1 |
<link rel="preload" as="style" href="○○○○○○○○" onload="this.rel='stylesheet'"> |
rel="preload"を書くことで○○のあとで処理しますよとブラウザに指示することができます。
onload="this.rel='○○'"で「onload」、ページ読み込み後に処理しますよということになります。
よってコンテンツの読み込みを邪魔しないためレンダリングブロックは解除されます。
ただ、注意点があります。
この手法はすごく簡単ですが現時点では対応していないブラウザが多すぎるので、読み込みされずに表示が崩れやすいです。
そこで全てJavaScript側で読み込みを制御します。
onload="this.rel='○○'"で「onload」、ページ読み込み後に処理しますよということになります。
よってコンテンツの読み込みを邪魔しないためレンダリングブロックは解除されます。
ただ、注意点があります。
この手法はすごく簡単ですが現時点では対応していないブラウザが多すぎるので、読み込みされずに表示が崩れやすいです。
そこで全てJavaScript側で読み込みを制御します。
1 2 3 4 5 6 |
requestAnimationFrame(function(e) { e = document.createElement('link'); e.rel = 'stylesheet'; e.href = 'cssのURL'; document.head.appendChild(e); }); |
これで問題なくcssのレンダリングブロックの解除が行えます。
JavaScriptのレンダリングブロック解除
JavaScriptはasync属性をつけるだけです。
1 2 3 |
<script src="JavaScriptのURL" async> </script> |
async属性は読み込み処理しますよということで、これだけでレンダリングをブロックすることなく実行できます。
注意点
上記の方法でレンダリングのブロックの指摘はなくなるとは思いますが、現代のサイト制作ではアニメーションを豊富に使用したり、デザインの制御にJavaScriptやcssを多用するので全てをブロックするのは現実的ではないです。
また、読込順によっては動かなくなったりする場合もありますので、使用する際はしっかり表示や動きのチェックを行いましょう。
cssはfontawesomeやGoogleフォントはレンダリングのブロックを解除しても問題ないと思います。JavaScriptは表示や動きを見ながらといったところです。
また、読込順によっては動かなくなったりする場合もありますので、使用する際はしっかり表示や動きのチェックを行いましょう。
cssはfontawesomeやGoogleフォントはレンダリングのブロックを解除しても問題ないと思います。JavaScriptは表示や動きを見ながらといったところです。