Webサイトの表示速度を改善するには？SEOに効果的なサイト表示速度の改善策８選を紹介

Webサイト（ホームページ）を運営する上で気になる表示速度ですが、「どのように表示速度を測定すればいいかわからない」「読み込み時間を改善できる方法が知りたい」とお悩みの方も少なくないようです。
表示速度を計測し改善することは、SEOの面でも、サイトのCVR改善の面でも非常に重要です。
そこでこの記事では、Webサイトの表示速度を改善する重要性、表示速度が遅い原因、表示速度を改善する8つの施策などについて詳しく解説します。

この記事でわかること

• Webサイトの表示速度が検索順位やCVRに与える影響

• Webサイトの表示速度が遅くなってしまう原因

• Webサイトの表示速度を改善するための施策

こんな方におすすめ

• Webサイトの離脱率・直帰率が高く悩んでいる

• 読み込み速度・ページ表示速度を改善したい

• 表示速度を改善するために何をしたらいいかわからない

Webサイトの表示速度を改善する重要性

表示速度の改善は大きく「SEO対策になり検索順位上昇につながる」「CVRの向上につながる」という2点に影響します。
ここからは、なぜWebサイトの表示速度を改善することが重要なのか、それぞれの理由について詳しく見ていきましょう。

SEO対策になるため、検索順位上昇につながる

Webサイトの表示速度は、SEO（Search Engine Optimization）において非常に重要な要素の1つです。
Googleは、ユーザーにとって最適な検索体験を提供することを目指しており、そのために検索順位を決定する際に、Webサイトの表示速度を考慮しています。つまり、表示速度が遅いサイトは、検索結果の上位に表示されにくくなる可能性があります。
Google検索セントラル（旧Googleウェブマスター）でも「ページの読み込み速度をモバイル検索のランキング要素として使用する」ことが明記されています。
2015年4月21日にGoogleが実装した「モバイルフレンドリー」というアルゴリズムでも、スマートフォンでのページ閲覧のしやすさや読み込み速度が検索順位引き上げのための重要な指標となっています。
またさらに、Webサイトから情報を収集する「クローラー」によるサイト巡回も表示速度の影響を受ける要素の一つです。
表示速度が遅いと、クローラーによるサイトのクローリングに時間がかかり、新しく公開したページや更新したページが検索結果に反映されるまで時間がかかったり、正しく認識されない可能性があります。
このように、Webサイトの表示速度の改善は、SEOの基本ともいえる部分です。他の施策の効果を最大限に発揮するためにも、表示速度を測定し、問題があれば改善しましょう。

CVRの向上につながる

Webサイトの表示速度は、CVR（コンバージョン率）にも大きな影響を与える要素です。
読み込み時間が長いとページが表示するまでに待ち時間が発生しますが、現代のWebユーザーは「待てない」ユーザーが多くなってきているといわれています。
Akamaiが公表した「2017年春 オンラインリテールの現状-パフォーマンス」によれば、ページの読み込みに3秒以上かかると、モバイルサイトにアクセスする人のおよそ53％がアクセスをやめてしまうといいます。
目当てのページが表示されるまでに時間がかかるとユーザーはWebサイトから離れて別のサイトに移動してしまうことになり、機会損失につながりかねません。
Webサイトの表示速度が改善されれば、ユーザーは待たされることにイライラすることもなく、快適にサイト内のコンテンツを楽しむことができます。
例えばECサイトの場合、ストレスなく自由にページ間を行き来でき、さまざまな商品・サービスを便利に比較できる状態にすることで、ユーザーのサイト滞在時間も増え、最終的に購入に至る可能性を高められるでしょう。

1秒の表示速度改善でCVRは20％向上

では、Webサイトの表示速度は具体的にCVRにどの程度の影響を与えるのでしょうか？
Akamaiが公表した「2017年春 オンラインリテールの現状-パフォーマンス」では、Webサイトの読み込み速度や表示スピードがデジタル市場で非常に重要な意味を持つことを、さまざまなデータによって示しています。
同レポートの読み込み時間とCVRの関係について調査した「ページ速度低下がコンバージョン率に与える影響（デバイスタイプ別）」というデータでは、読み込み時間がわずか100ミリ秒（0.1秒）遅れるだけで、デスクトップでは2.4％、モバイルの場合では7.1％もCVRが低下することがわかりました。
読み込み時間が1秒低下するとさらにCVRへの影響は大きくなり、デスクトップの場合で21.8％、モバイルの場合で20.5％と、ともに20％以上もCVRが低下してしまいます。
これは逆に言えば、表示速度を改善すれば、CVR向上につながると言い換えることもできます。Webサイトの表示速度を1秒改善すれば、モバイル・デスクトップで約20％、CVRが向上する効果が期待できます。

Webサイトの表示速度が遅い主な3つの原因

Webサイトがブラウザ上でユーザーに表示されるまでには、ブラウザ、DNSサーバー、Webサーバーでやり取りが交わされています。このとき、データが多すぎたり処理が遅れると、表示速度の低下につながります。

Webサイトの表示速度が遅い主な原因は、以下の3つです。

• サイトに対して不十分なサーバースペック

• データ容量の大きな画像や動画

• 複雑化・肥大化したHTML、CSS、JavaScript

ここからは、それぞれの原因について詳しく解説します。

原因1.サイトに対して不十分なサーバースペック

まず最初に、そもそもサイトに対してサーバースペックが不十分という可能性が考えられます。
サーバースペックは、Webサイトの表示速度に多くの影響を与えます。
回線速度やメモリ、CPUといったスペックはサーバーによっても異なり、サーバーのスペックが不十分な場合、処理能力が不足して遅延が発生し、Webサイトの表示速度が遅くなることがあります。
また、複数サイトで回線を共有する「共有サーバー」は状況によって表示速度が遅くなることがあるため注意が必要です。

原因2.データ容量の大きな画像や動画

画像や動画は、Webサイトの表示速度に大きく影響を与える要素の1つです。
画像や動画のデータ容量が大きく、ページ読み込み時間がかかると、表示速度が遅くなります。特に動画の場合、画像よりもデータ容量が大きくなるため、読み込みに時間がかかる傾向にあります。
スマートフォンなどモバイルデバイスの場合、データ容量の大きい画像や動画は読み込み時間がその分長くなり、離脱率の上昇につながる恐れがあるため、注意しましょう。
しかしながら、ECサイトなどにおいては画像や動画は商品・サービスの魅力を伝えるために欠かせない重要な情報です。画像データの軽量化や最適化を図り、ユーザーが快適にWebサイトを利用できるようにしましょう。

原因3. 複雑化・肥大化したHTMLやCSS、JavaScript

Webサイトは、HTML、CSS、JavaScriptといったソースコードで構成されています。いずれもWebサイトに欠かせない要素であるものの、複雑化・肥大化すると、Webサイトの表示速度に悪影響を与えることがあります。
たとえば、HTML、CSS、JavaScriptに余分な改行や余白、コメントアウトがあると、その分ファイルサイズが重くなり、読み込み時間が長くなることがあります。
ソースコードを見直し、必要のないコードや余分な改行や余白、コメントアウトを削除することで軽量化を行いましょう。

Webサイトの表示速度を改善する8つの施策

ここからは、Webサイトの表示速度を改善するための8つの施策をご紹介します。Webサイトの表示速度を遅くしている原因を探り、最適な施策で改善につなげましょう。

①　画像のファイルサイズを削減する

近年はスマートフォンの性能が高くなったことで、スマートフォンで撮影した写真や動画でも、ファイルサイズがかなり大きくなりがちです。
画像のデータ容量が大きすぎることで読み込みに時間がかかっていると考えられる場合は、画像のファイルサイズを削減して表示速度を改善しましょう。
ネットワーク転送の90%以上は画像データが占める
Webサイトではさまざまなファイルが使用されますが、中でもデータ量の多くを占めているのが、画像です。つまり、画像のファイルサイズを削減できれば、読み込み時間や表示速度の大きな改善が期待できます。
アイデアマンズ株式会社が7,866のWebサイトを対象に行った調査によれば、「上場企業コーポレートサイト」「ブログ・ニュースサイト」「ECサイト」の3つの中で最もファイルサイズが大きかったのがECサイトで、最大ファイルサイズは28.92MBにもなりました。
ECサイトは商品情報や商品ランキングなどで画像の掲載が多くなるため、画像のファイルサイズの削減や不要な画像を削除すれば、表示速度を大幅に改善できる可能性もあるでしょう。
画像最適化ツールでファイルサイズを削減する
具体的な画像のファイルサイズの削減方法としては、画像最適化ツールを使った方法があります。ツールを使用すれば、JPEG、GIF、PNGといったさまざまなファイル形式の画像を最大90％ほど削減可能です。
画像最適化ツールは、TinyPNGやCompressor.ioなどの無料のツールから、Kraken.ioやReduce Imagesなどの有料のツールまで、さまざまな種類があります。これらのツールを使用することで、画像のファイルサイズを縮小し、Webサイトの表示速度を改善することができます。
なお、ファイルサイズを削減すると、画質が低下する場合があります。画像が不鮮明になることのないよう、ファイルサイズと画質のバランスを取ることが大切です。
アニメーションGIFを動画に変換する
WebサイトのページにアニメーションGIFを使用すると、ファイルサイズが非常に大きくなり、読み込み速度を著しく遅くしてしまう可能性があります。
アニメーションGIFはMP4形式やWebM（ウェブエム）形式など動画形式に変換することで、軽量化が可能です。アニメーションGIFから動画への変換も、ffmpegなどのツールを使って簡単に行えます。

②　動画のファイルサイズを削減する

動画はファイルサイズが大きいため、表示速度に大きな影響を与えます。動画の読み込みが遅いときは、ファイルサイズを削減してみましょう。ここからは、動画のファイルサイズを削減する方法について解説します。
MP4動画はビットレート削減で軽量化できる
一般的によく使われる動画フォーマットの1つであるMP4ファイルのファイルサイズを削減するには、ビットレートの削減が有効です。
ビットレート（bits per second/bps）とは、1秒あたりのデータ量のことで、動画が1秒間につき何ビットのデータで作成されているかを表します。高いビットレートでは高画質で滑らかな動画が再生できますが、同時にファイルサイズが大きくなるため、ページの読み込みに時間がかかってしまいます。
ファイルサイズの大きい動画ファイルは、ビットレートを下げて軽量化しましょう。MP4COMPRESSなどのオンラインツールを使えば、専門的な知識も必要なく、簡単に軽量化が可能です。
なお、画像のファイルサイズ削減と同様、ビットレートを下げると画質が低下します。ファイルサイズを押さえつつ、十分な画質の動画になるよう調整しましょう。
MP4形式よりWebM形式が圧縮効果が高い
MP4以外の動画フォーマットとして、Googleが提供するオープンかつロイヤリティフリーの動画フォーマットのWebM形式があります。
WebMはMP4よりも圧縮効率がよく、同じ画質のままファイルサイズを半分程度にまで軽くできることが特徴です。動画によっても違いはあるものの、最高で90％ほどのファイルサイズの削減効果が期待できるため、高い表示速度改善効果が見込めるでしょう。
また、WebMはGoogle Chrome、Firefox、OperaなどほとんどのHTML5環境ブラウザに対応しています。さらに、HTML5環境では動画視聴に必要なプラグインのインストールなしに、ブラウザ単体での再生も可能であることもメリットです。
videoタグでWebM/MP4を配信する
現在ではほとんどのブラウザが対応していますが、Safariと Internet ExplorerはWebM形式に対応していません。WebM形式の動画が再生されない場合に備えて、2種類の動画を用意しておく必要があります。
Webサイトで動画を配信するやり方には、「videoタグを使用する（アップロードした動画ファイルを読み込む）」と「iframeタグを使用する（YouTubeなどの動画サイトからの読み込みを行う）」の2通りがあり、一般的に使用されることが多いのが、HTML5から導入されたvideoタグです。
HTMLでvideoタグの中にsourceタグを使用することで、フォーマットの異なる動画ファイルを複数指定することができます。
<video controls>
<source src="sample.webm" type="video/webm">
<source src="sample.mp4" type="video/mp4">
</video>
上記の例の場合、まず最初にWebM形式の動画が読み込まれ、再生できなかった場合はMP4形式の動画が読み込まれます。
あらかじめこのように設定しておくと、WebM対応ブラウザの場合はWeb形式の動画が再生され、WebM非対応の場合はMP4形式が再生されるため「動画が再生されない」という事態を防ぐ事が可能です。

③　AMPを採用する

AMP（Accelerated Mobile Pages）とは、モバイルページを瞬時に読み込み高速表示が可能なフレームワークのことです。モバイル端末でのユーザー体験向上を目的としてGoogleやTwitterなどが共同で開発を行いました。
通常、Webサイトへのアクセスからブラウザ上に表示されるまでは「HTMLを読み込む」「CSSを読み込む」「JavaScriptを読み込む」といった手順を踏む必要があります。Webサイトのコンテンツを充実させればユーザーへ魅力を伝えやすくなりますが、一方で読み込みに時間がかかるようになります。
そこで、AMPに対応したWebページでは、あらかじめGoogleなどのサーバーにページのデータを一時的に保存（キャッシュ）しておくことで、読み込み時間を大幅に削減し、高速表示を実現しています。
AMPが実装されたページは、検索結果に稲妻マークが表示されます。「AMPページがあるかどうか」という点が直接検索結果のランキングに影響することはないものの、ページの読み込み速度はモバイル検索のランキングに影響するため、実装することで一定のSEO効果が期待できるでしょう。

④　YouTubeプレイヤーはIframe Player APIで埋め込む

Webサイト上でYouTube動画などを表示する際、埋め込み用のiframeを使用すると表示速度が低下してしまうため、YouTubeプレイヤーはIframe Player APIで埋め込みを行いましょう。
Iframe Player APIとはYouTubeが提供するAPIのことで、Webサイト上にYouTubeプレイヤーを埋め込むことで、JavaScriptを介してYouTubeの動画のコントロールが可能になります。
埋め込みタグとは異なり、JavaScriptコードを記述する必要がありますが、再生画質の指定や動画の再生状況の取得などより細かな対応ができるというメリットもあるため、活用することでより魅力的なWebサイト制作につなげられるでしょう。
Google Developers （旧Google Code）の「iframe 組み込みの YouTube Player API リファレンス」では、Iframe Player APIの詳しい使用方法などについて解説されているため、チェックしてみましょう。

⑤　画面スクロールに応じて画像を読み込む

画面スクロールに応じて画像を読み込むことも、表示速度改善につながります。
ブラウザは画面外にある画像も全て読み込む
ブラウザは特別な設定をしない限り、Webページの見えている部分だけでなく、画面外にある見えない部分の画像もすべて読み込みます。そのため、画像が多いWebページの場合、読み込みに時間がかかったり、画面の動きが鈍くなったように感じることになります。
画面内にある画像のみを読み込む
読み込み時間を削減し表示速度を早めるため、「Lazy Load（レイジーロード）」を使用しましょう。
Lazy Loadとは画像の遅延読み込みを行うためのJavaScriptライブラリのことで、ユーザーが見ている画面の範囲に合わせてサーバーから画像を読み込み、画面に表示させることができる仕組みです。
画面スクロールに応じて画像を読み込むことで、ページの読み込み時間を短縮することができ、ユーザーにとって快適なページ表示速度の実現につながります。

⑥　Webフォントのダウンロード中もテキストを表示する

Webフォント（インターネット上からフォントのデータを引き出してWebサイト上に表示するシステム）は、デザイン性の高いサイトの構築やブランディングに重要な役割を果たしているものの、ダウンロードに時間がかかるため、表示速度に影響を与える可能性があります。
また、ダウンロードされるまではテキストが表示されないため、ユーザーを待たせることになってしまいます。
そこで、CSS内にfont-display:swap;を記述することで、Webフォントのダウンロードが完了するまでに仮のフォントを表示させることができます。

⑦　サーバーでファイルを圧縮する

1つもしくは複数のファイルを圧縮することで、質を保ったままデータ容量を縮小することができます。
テキストファイルはサーバーで圧縮できる
テキストファイル（HTML、CSS、JavaScript、SVGなど）は、サーバー側でgzip（GNU Zip）圧縮することでファイルサイズを減らすことができます。
gzip圧縮では一般的に60〜70％程度の圧縮が可能といわれており、データ転送量を削減することで、表示速度の高速化につながります。
サーバー側でgzip圧縮を設定する
サーバー側でgzip圧縮を行うには、サーバーの設定を変更する必要があります。
近年のサーバーでは基本的に利用できますが、まれに利用できないことがあるため、まずはgzip圧縮が利用可能かを確認しましょう。HTTP Compression TestでWebサイトURLを入力することでチェックできます。
サーバーでの圧縮の設定は、.htaccessファイルに追加のコード記述を行うことで実行できます。
なお、.htaccessファイルは配下のすべてのディレクトリに影響するため、編集前に必ずバックアップを取っておきましょう。

⑧　ブラウザキャッシュの有効期間を長くする

ブラウザキャッシュの有効期限を長くして、無駄な再読み込みの手間を省きましょう。
ファイル更新チェックのためにサーバーとの通信が発生する
Webページを閲覧する際、ブラウザはサーバーからファイルをダウンロードして表示しますが、キャッシュが設定されていないと、ファイル更新チェックのために同じWebページに複数回アクセスする度に最初と同じ処理が繰り返されることになります。
ブラウザキャッシュを利用すると、一度ダウンロードしたファイルを一時的にブラウザに保存することで、再度アクセスした際のダウンロードを省略することができるため、Webサイトが素早く表示されるようになります。
ただし、ファイルの更新頻度が高い場合、キャッシュの有効期間を長くしすぎると、更新されたコンテンツが反映されないことがあるため、適切な期間を設定する必要があります。
Cache-Controlヘッダでブラウザキャッシュに有効期間を設定する
ブラウザキャッシュの有効期限は、HTTPヘッダーのCache-Control（キャッシュの有効期限を秒数で指定）やExpires（キャッシュの有効期限を日付・時刻で指定）によって設定します。
例えばCache-Control: max-age=31536000の場合、31536000秒となり365日＝1年間の有効期限を設定していることになります。

表示速度の測定方法

Webサイトの表示速度は、「Page Speed Insights」や「Googleアナリティクス」といったツールを使うことで測定可能です。
ここからは、代表的な表示速度測定ツールである「Page Speed Insights」と「Googleアナリティクス」について解説します。

Page Speed Insights

Page Speed Insights（ページスピードインサイト）はGoogleが提供する無料ツールで、調べたいWebサイトのURLを入力し「分析」をクリックするだけで、表示速度の測定が可能です。
測定結果は100点満点のスコア形式で表示され、スコアが高いほど表示速度が高速であることを示します。
改善が必要な場合、「使用していないJavaScriptの削減」「CSSの最小化」「適切なサイズの画像」「次世代フォーマットでの画像の配信」など、改善すべき項目と具体的なアドバイスを提示してくれるため、「サイトの表示速度が遅いが、どこから改善したらいいかわからない」という場合も具体的な改善策を設定できます。
Googleアカウントを持っていない場合でも利用でき、手間も掛からないためぜひ一度分析してみましょう。

Googleアナリティクス

Webサイトのアクセス解析に使われるGoogleアナリティクスでも、表示速度（読み込み時間）の測定が可能です。
Googleアナリティクスでは、左メニューの「行動」→「サイト速度」→「概要」とクリックしていくことで、全体の平均読み込み時間が確認できます。
Googleアナリティクスでは「実際にユーザーがURLにアクセスした際、ページが読み込まれるまでにどのくらいの時間がかかったか」を計測したデータが表示されます。平均よりも早ければ緑、遅ければ赤で表示される仕組みです。