「レンダリングに遅延が発生しています。」を解決する方法。

WEB制作、マーケティングに関する情報をお届けします。

「レンダリングに遅延が発生しています。」を解決する方法。

2018.04.29

カテゴリ：WEB制作

タグ：

サイトの軽量化

Google PageSpeed Insightsを使用していると「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」、「レンダリングに遅延が発生しています。」という指摘がよく入ると思います。
これを解決します。

レンダリングブロックとは・・・

レンダリングのブロックとは、アクセスした際にブラウザがコンテンツ(HTML)を読み込みますが、head内にJavaScriptなどを設置するとコンテンツより優先して読み込まれてしまい、コンテンツの読み込みを邪魔してしまうことです。
これを改善してくださいねというのがGoogleからのメッセージです。

レンダリングブロックを解決する方法。

まず、head内にあるJavacript、cssでコンテンツの読み込み前に処理する必要のないものはフッターのbodyタグの上、Wordpressの場合はwp_footer()の上に設置しましょう。

CSSのレンダリングブロック解除

簡易バージョン

<link rel="preload" as="style" href="○○○○○○○○" onload="this.rel='stylesheet'">

1	<link rel="preload" as="style" href="○○○○○○○○" onload="this.rel='stylesheet'">

rel="preload"を書くことで○○のあとで処理しますよとブラウザに指示することができます。
onload="this.rel='○○'"で「onload」、ページ読み込み後に処理しますよということになります。
よってコンテンツの読み込みを邪魔しないためレンダリングブロックは解除されます。
ただ、注意点があります。
この手法はすごく簡単ですが現時点では対応していないブラウザが多すぎるので、読み込みされずに表示が崩れやすいです。
そこで全てJavaScript側で読み込みを制御します。

requestAnimationFrame(function(e) {
  e = document.createElement('link');
  e.rel = 'stylesheet';
  e.href = 'cssのURL';
  document.head.appendChild(e);
});

requestAnimationFrame(function(e) {

e = document.createElement('link');

e.rel = 'stylesheet';

e.href = 'cssのURL';

document.head.appendChild(e);

});

これで問題なくcssのレンダリングブロックの解除が行えます。

JavaScriptのレンダリングブロック解除

JavaScriptはasync属性をつけるだけです。

<script
 src="JavaScriptのURL" async>
</script>

<script

src="JavaScriptのURL" async>

</script>

async属性は読み込み処理しますよということで、これだけでレンダリングをブロックすることなく実行できます。

注意点

上記の方法でレンダリングのブロックの指摘はなくなるとは思いますが、現代のサイト制作ではアニメーションを豊富に使用したり、デザインの制御にJavaScriptやcssを多用するので全てをブロックするのは現実的ではないです。
また、読込順によっては動かなくなったりする場合もありますので、使用する際はしっかり表示や動きのチェックを行いましょう。
cssはfontawesomeやGoogleフォントはレンダリングのブロックを解除しても問題ないと思います。JavaScriptは表示や動きを見ながらといったところです。