Webサイトの表示速度の改善と測定方法を徹底解説 | 福岡のホームページ制作・WEBデザイン制作会社|株式会社TOE

CREATIVE STUDIO
FUKUOKA OFFICE
WATANABEDORI 1-9-3-203
CHUO-KU FUKUOKA JAPAN

TOKYO OFFICE
HIGASHIJYUJO 1-12-7-303
KITAKU TOKYO JAPAN

BLOG

2022年3月18日 | KAKYOUIN HARUMI

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対応している画像タイプ
TinyPNGhttps://tinypng.com/JPG・PNG
optimizillahttp://optimizilla.com/ja/JPG・PNG
Compressor.iohttps://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 Minifierhttps://syncer.jp/css-minifierCSSファイル
JS Minifierhttps://syncer.jp/js-minifierJavaScriptファイル

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

サーバーの性能を向上させる

Webサイトが設置されているサーバーの性能を向上させることも、Webサイトの表示速度改善につながります。

Webサーバーの性能とは、具体的に以下の4つです。

  • CPU
  • メモリ
  • HDD(SSD)
  • ネットワーク回線

これら4つの性能を向上させることで、WebサーバーがWebサイトを表示させるための処理を高速化できるため、Webサイトの表示速度が向上するわけです。

レンタルサーバーを利用している場合、現在契約しているプランより上位のプランに変更することで、より性能の良いWebサーバーに切り替えることができます。詳しくはレンタルサーバーのプランの比較表などを確認すると良いでしょう。

Webサイトの表示速度の測定方法

Webサイトの表示速度を改善させる方法について解説してきました。なんとなくブラウザで表示させたときに、体感で遅いと感じたことがあるかもしれませんが、これから紹介するWebサイトやツールを使うことで、Webサイトの表示速度を具体的な数値として測定できます。

PageSpeed Insights(ページスピードインサイト)

PageSpeed Insights:https://pagespeed.web.dev/?hl=ja

PageSpeed InsightsとはGoogleが公開しているWebページの表示速度について、さまざまな指標で分析してスコアで表示するWebサイトです。

「パソコン」で表示させたときのスコアと、「スマートフォン」で表示させたときのスコアの2つが計測できます。

改善できる内容の提案と、表示速度を遅くしている要因について詳しく診断する機能があるため、Webサイトの表示速度を改善するときに、どのようなことに取り組めば良いのか、把握することができます。

Google Analytics(グーグルアナリティクス)

Google AnalyticsとはGoogleが公開しているWebサイトのアクセス解析ができるサービスです。Webサイトの訪問者やアクセス数などの情報を得られるサービスですが、Webサイト全体やWebページの平均読み込み時間を秒単位で表示する機能もあります。

Chromeのデベロッパーツール

Googleが提供しているブラウザ「Google Chrome」のデベロッパーツールには、Webページの表示に要した時間を分析する機能があります。

デベロッパーツールとはWebページのさまざまな情報を分析できる機能であり、Chromeを開いた状態で、キーボードの「Ctrl + Shift + I」か「F12」を入力すると利用できます。

デベロッパーツールを開いた状態で「Network」のタブをクリックして、ページを再更新すると「Finish」という名前の横に、ページが完全に読み込まれるまでの時間が表示されます。

まとめ

この記事では、表示速度が遅いことで発生するデメリットと改善するための方法について紹介しました。Webサイトの訪問者にとって、Webサイトの表示速度が遅いことは大きなストレスとなります。

画像ファイルの最適化やCSS・JavaScriptの圧縮などは、すぐに着手できる改善方法です。少しでも訪問者のストレスを減らし、満足度を高めるためにも、Webサイトの表示速度の改善に取り組みましょう。

お問い合わせ

制作のご相談・お見積もりはお気軽にお問い合わせください

CONTACT
 
ALL BLOG
GEORGE KOJIMA

CEO
CREATIVE DIRECTOR

SHYUNICHI MOTOYAMA

BOARD DIRECTOR
ART DIRECTOR
DESIGNER

ASAMI YONEMARU

DIRECTOR
PRODUCER

KAWADA MIZUKI

DESIGNER

TRAN NGOC KHANH BANG

DESIGNER

MARI SHIBATA

GENERAL AFFAIRS

YASSAN
KAKYOUIN HARUMI
お見積もり ご相談
お問い合わせ