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

DESIGNER

2018.05.25 2023.12.06

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

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

レンダリングブロックリソースとは？
レンダリングブロックの解除方法
最後に

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

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

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

ブラウザーがHTMLファイルをダウンロードする
HTMLファイルの読み込みと、CSSファイル、JavaScriptファイル、画像ファイルの確認
画像ファイルをダウンロード
ページを表示するためにCSSファイルとJavaScriptファイルが必要になる
CSSファイルをダウンロードして読み込む
JavaScriptファイルをダウンロードして読み込む
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）

#副業OK
#新規事業
#スタートアップ
#急募
#長期案件
#スポット案件（1ヶ月）
#フルリモートOK

【リモート可】【子育てママ歓迎】IoTサービスで世界中の家族を幸せに。アプリデザイナー(スマホ・タブレット) /Webデザイナー募集

#スタートアップ

【リモートOK】アート・エンタメ×ITでイノベーションを！新規事業のデザイナー募集！

#スタートアップ
#土日週末OK
#急募
#長期案件
#正社員募集
#フルリモートOK

Way back in October 2007, we initially launched Speckyboy as a small inspirational site for web designers.

この記事はspeckyboyからの転載です。配信元または著者とコンテンツ契約を結び配信しています。
What Are Render-Blocking Resources & How to Fix Render Blocking Issues

Follow @goworkship

■当サイト掲載中の情報について
Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。
■アクセス解析ツールについて
当サイトでは、Googleによるアクセス解析ツール『Googleアナリティクス』を利用しています。このGoogleアナリティクスはトラフィックデータの収集を行なっています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。この規約に関して、詳しくはGoogle アナリティクス利用規約をご覧ください。

■広告の配信について
当サイトは第三者配信の広告サービス『Google Adsense』を利用しています。広告配信事業者は、取得した閲覧履歴や購買履歴等の情報を分析して、ユーザーの趣味・嗜好に応じた新商品・サービスに関する広告を表示することがあります。また当サイトは、商品やサービスを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、『A8.net』『もしもアフィリエイト』『afb』『アクセストレード』『バリューコマース』『レントラックス』『felmat』『TGアフィリエイト』『リンクシェア』『楽天アフィリエイト』『Amazon アソシエイト』の参加者です。IPアドレス、ユーザーエージェント、クッキー情報、成果結果情報（広告成果毎の識別子）などを取得し、広告配信に係る成果計測、広告配信に係る不正防止などに利用する場合があります。

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

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