2022年3月18日　|　TOE

Webサイトの表示速度の改善と測定方法を徹底解説

Webサイトの表示速度の改善は、訪問者のユーザー体験を向上させるためにも欠かせない対策です。ちょっと調べものをしているときに、アクセスしたページの表示速度が遅かったら、すぐに「戻るボタン」をクリックして、別のページを探してしまう……。そんな経験をしたことがある方も多いでしょう。

この記事では、Webサイトの表示速度が遅いことによるデメリットから改善する方法、表示速度を測定する具体的な方法まで詳しく解説します。

Webサイトの表示速度が遅いことによるデメリット

まずWebサイトの表示速度が遅いことによるデメリットから見ていきましょう。

ページの直帰率が増加する

Webサイトの表示速度が遅いことで、訪問者のページの直帰率が増加してしまいます。直帰率とは、Webページの訪問者が、別のページに遷移することなく離脱してしまう割合のことを表している指標です。たとえば、Googleなどの検索エンジンから自社サイトに訪問者が来ても、すぐに戻るボタンで検索エンジンに戻ってしまう割合と考えていただいてもいいでしょう。

Googleは2018年に、Webページの表示速度の変化と直帰率の関係について、次のように報告しています。

・ページの表示時間が1秒から3秒に増加すると、直帰率が32%増加する
・ページの表示時間が1秒から5秒に増加すると、直帰率が90%増加する
・ページの表示時間が1秒から6秒に増加すると、直帰率が106%増加する
・ページの表示時間が1秒から10秒に増加すると、直帰率が123%増加する

出典：Google「Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed

これらの調査から、ページの表示時間が増加すると、直帰率も増加することが分かります。

またAmazonが2007年に調査したデータによると「Webサイトの表示が0.1秒遅くなると、売上が1%減少して、1秒高速化すると売上が10%向上する」とされています。これはWebページの表示速度が遅いため直帰率が増加して、商品の購入に結びついていないからと思われます。この情報はECサイトにとっては特に重要なものといえるでしょう。

直帰率と関連する指標として、回遊率があります。これはWebサイトの訪問者が、ほかのページも回遊する（訪問する）割合を表している指標です。直帰率が高いということは、ほかのページを訪問していない割合が高いことを表しているので、回遊率が低いといえます。

検索順位が低下する

Webサイトの表示速度が遅いと、検索順位が低下すると言われています。Googleは検索セントラルブログにおいて「ページの読み込み速度をモバイル検索のランキング要素に使用します」と発表しています。このことからも、Webサイトの表示速度の遅さが、検索順位に影響を与えることはあきらかでしょう。

検索順位が低下すると、そのWebサイトの訪問者の数も減少します。検索エンジンが検索順位を決めるアルゴリズムは、非常に複雑なものですが、このようなユーザーの利便性も重視されています。

SEOとしては検索クエリとの関連性が高く信頼性のあるWebページなら、多少Webページの表示速度が遅くとも上位に表示される傾向があります。しかし、たとえ上位に表示されたとしても、直帰されてしまうと、Webサイトの本来目的を果たせなくなることもあるでしょう。そのような観点からも、Webサイトの表示速度改善は重要な対策といえます。

訪問者がストレスを感じる

そもそも、Webサイトの表示速度が遅いと、訪問者は強いストレスを感じます。欲しい情報があるのに、たどり着くのに時間がかかると、ユーザーはすぐに別のWebサイトで探そうとするでしょう。

自社のWebサイトの表示速度が遅いという理由だけで、ユーザーの中にはその企業に対して悪い印象を持つようになってしまうかもしれません。一度そのようにユーザーが評価してしまうと、覆すのは困難です。

Webサイトの表示速度の遅さは技術的な要因ですが、企業イメージにも関わる重要な指標であることは、頭に入れておいた方が良いでしょう。

Webサイトの表示速度を改善する方法

Webサイトの表示速度が遅いと、さまざまなデメリットがあることを解説してきました。それでは表示速度を改善するためには、何をすれば良いのでしょうか。そのための4つの方法について解説します。

画像を最適化する

Webサイトに表示されている画像を最適化することで、表示速度を改善させることが可能です。

画像の最適化とは、画像のクオリティを維持したままファイルサイズを減少させることです。これはロスレス圧縮と呼ばれる方法で実現できます。

ロスレス圧縮とは、画像に含まれている不要なデータを圧縮して、画像ファイル全体のファイルサイズを減少させる圧縮方式です。「TinyPNG」「optimizilla」「Compressor.io」などの無料サイトを使うと、ブラウザ上で画像ファイルのロスレス圧縮ができます。

サイト名	URL	対応している画像タイプ
TinyPNG	https://tinypng.com/	JPG・PNG
optimizilla	http://optimizilla.com/ja/	JPG・PNG
Compressor.io	https://compressor.io/	JPG・PNG・GIF・SVG・WEBP

また物理的な画像の大きさを縮小する、表示させる画像の数を減らすなどの基本的な対応により、Webサイトを表示させたときに読み込まれるデータ量を削減させることも効果的です。

ブラウザのキャッシュを活用する

ブラウザのキャッシュを活用することで、訪問者が同じページを再訪問した際に、Webサイトの表示速度を改善できます。

キャッシュとは、ブラウザで読み込んだWebサイトのファイルを訪問者のパソコンに一時的に保存しておき、再訪問時にはサーバーからではなく、パソコンに保存されているファイルを読み込ませる技術のことです。

パソコンに保存されているファイルを読み込ませるため、Webサイト上に存在しているファイルより古い可能性がありますが、そもそもそんなに頻繁に更新しないWebサイトの場合、キャッシュの情報で十分であることも多いでしょう。またキャッシュを活用することで、Webサイトの表示速度が速くなるだけでなく、Webサイトが設置されているWebサーバーの負荷も低減できます。

ブラウザのキャッシュを明示的に活用する場合は、Webサーバーの「.htaccess」という名前のファイルに以下のような記述を追加します。

<IfModule mod_expires.c> ExpiresActive On ExpiresByType image/gif “access plus 1 months” ExpiresByType image/jpeg “access plus 1 months” ExpiresByType image/png “access plus 1 months” ExpiresByType image/x-icon “access plus 6 months” ExpiresByType text/css “access plus 1 months” ExpiresByType text/javascript “access plus 1 months” ExpiresByType application/javascript “access plus 1 months” </IfModule>

この記述を理解するためには、Webサーバーの知識が必要となるため詳しくは避けますが、このような記述を「.htaccess」に追加することで、画像ファイルやCSSファイル、JavaScriptファイルなどが訪問者のコンピュータに一定期間キャッシュとして保存されるようになります。

CSSやJavaScriptのファイルを縮小する

CSSやJavaScriptのファイルを縮小させることも、わずかですがWebサイトの表示速度の改善につながります。この2つのファイルはテキストファイルですが、不要な改行文字や空白文字が含まれていることがあります。これらの不要な文字を削除することで、CSSやJavaScriptのファイルを縮小させることが可能です。

CSSやJavaScriptのファイルの縮小には「CSS Minifier」や「JS Minifier」がおすすめです。

サイト名	URL	対応しているファイル
CSS Minifier	https://syncer.jp/css-minifier	CSSファイル
JS Minifier	https://syncer.jp/js-minifier	JavaScriptファイル

ただしここで1つ注意点があります。それはいったんCSSファイルやJavaScriptファイルを縮小してしまうと、改行文字や空白文字が削除されてしまうため、ファイルの可読性が失われてしまい再編集が困難になるという点です。そのため、これらのファイルの縮小は、ファイルが完成してサーバーにアップロードする直前に実行することをおすすめします。