レンダリングブロックの原因と解決法!ページの表示速度を早めよう

code

Webサイトの読み込み速度は、ユーザーエクスペリエンスだけでなく、検索エンジンのランキングにも影響します。レンダリングブロックリソースとは、Webサイトの読み込み速度を落としてしまう原因のことで、スピードの低下は顧客と収入を失う原因になります。

しかしあきらめてはいけません。レンダリングブロックリソースを排除することで、読み込み速度を改善できます。この記事ではその方法を紹介します。

レンダリングブロックリソースとは?

もっとも一般的なレンダリングブロックリソースは、ヘッダーにあるJavaScriptやCSSファイルです。ページを最初に表示する際のJavaScriptやCSSの使用は、画面の表示時間を大きく遅らせてしまいます。

Webサイトを表示するとき、ブラウザーはコンテンツを一定の順番でレンダリングします。その大まかな順番を紹介します。

  1. ブラウザーがHTMLファイルをダウンロードする
  2. HTMLファイルの読み込みと、CSSファイル、JavaScriptファイル、画像ファイルの確認
  3. 画像ファイルをダウンロード
  4. ページを表示するためにCSSファイルとJavaScriptファイルが必要になる
  5. CSSファイルをダウンロードして読み込む
  6. JavaScriptファイルをダウンロードして読み込む
  7. Webページを表示する

初期表示の際、ブラウザーがCSSとJavaScriptをダウンロードして読み込む間は、画面には何も表示されません。さらに、WordPressのようなCMS(コンテンツ管理システム)の場合はより長い時間がかかります。CSSやJavaScriptのみならず、プラグインやウィジェットもダウンロードする必要があるからです。

Webサイトのスピードを最適化する場合、最初に取り組むべきは表示時間と反応速度の短縮です。そしてレンダリングを最適化するのが、Webサイト改善の一番簡単な方法です。

 

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

ここまでは、なぜレンダリングブロックが起こるのかと、それがWebサイト表示のスピードにどう関係するのかを紹介しました。

ここからは、レンダリングブロックを実際にどう解除するのか見ていきましょう。

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

主に2つの方法があります。

・CSSファイルのリンクに @import を使わないこと。@import メソッドを使うと、ブラウザーがCSSファイルを見つけるのに余計な時間がかかってしまうので、CSSファイルは通常、HTMLファイルにリンクする時、

<link rel = "style.css" href = "style.css"> 

のようにします。
・一番最初のレンダリングに使われるCSSファイルの数を減らす。そして可能ならば、すべてのCSSファイルをひとつにまとめてしまいしょう。

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

JavScriptのレンダリングブロックを取り除くためには、スクリプトファイルの数と、それがHTML内のどこで呼び出されているかを知る必要があります。これを簡単に行えるツールが、『Google PageSpeed Insight』です。

オーストラリアの会社が行なった実験によると、様々なスタイルやシナリオの中で、JavaScriptをページ下部に配置した場合に最も良い結果が出ました。

これは、レンダリングブロックとなるスクリプトがページ上部から無くなったことが大きな理由です。CSSがレンダリングされて一旦ページが表示された後に、ページ下部のスクリプトがダウンロードされ読み込まれます。

プラグインを使う

WordPressの場合は、プラグインを使ってレンダリングブロックを取り除くことができます。

『W3 Total Cache』は、キャッシュ、最小化、パフォーマンスの最適化を行うことができるプラグインです。以下で基本的な使い方を紹介します。

WordPressのダッシュボードから、パフォーマンス > 設定 に行き、セクションを開きます。チェックボックスをクリックして、ドロップダウンメニューからマニュアルを選びます。セーブしたら、最小化したいスクリプトやスタイルを追加します。

レンダリングブロックの原因となるファイルの場所を見つけたい場合は、『Google PageSpeed Insight』を使いWebサイトを解析します。サジェスチョンタブのEliminate render-blocking JavaScrip and CDS in above-the-fold contentセクションを見つけたら、Show how to fixを選択してURLをコピーします。

WordPressに戻り、W3 Total Cache > パフォーマンス > Minify を開きます。JavaScriptセクションのOerations in areasにある、<head>内埋め込みタイプを、Non-blocking using deferになるようにします。スクリプト追加ボタンを押し、コピーしたURLをペーストします。全てのスクリプトをコピーしたら、次はCSSを同じように追加します。

全て追加し終わったら、Save settings and purge cacheボタンをクリックして、設定は完了です。

 

最後に

Webサイトのスピードに大きな影響を与えるレンダリングブロックは、この記事で紹介した方法により取り除くことが可能です。スピーディーなWebサイトでより良いユーザーエクスペリエンスを目指しましょう。

(翻訳:Juri Ando)

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
週1〜3 リモートワーク 土日のみでも案件が見つかる!
Workship