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

Google PageSpeed Insightsを使用していると「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」、「レンダリングに遅延が発生しています。」という警告がよく入ると思います。
今回はこの警告への対策方法を紹介します。

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

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

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

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

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

CSSの解除方法は2通りあります。

簡単バージョン

<link rel="preload" href="CSSのURL" as="style" />

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

javascript側で制御

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

これでjavascript側でCSSのレンダリングブロックの解除が行えます。

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

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

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

注意点

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