サイトスピード

サイトスピードを改善すべき3つの理由と4つの方法を紹介!

ウェブサイトを利用する際に、読み込み時間が長いとイライラしますよね……。インターネットが当たり前になった現代では、通信速度が遅いだけでストレスを感じてしまいます。

この記事では、サイトスピードの重要性を説明した上で、表示速度の計測方法と改善方法を紹介します。オウンドメディアの運用に携わる方、ご自身でブログを運営されているライターさんのお役に立てば幸いです。

なお、表示速度に関するユニークな記事がありますので、こちらも合わせてご覧ください。

軽いサイト・阿部寛さんのアイキャッチ画像です。
なぜ、阿部寛のホームページは軽いサイトで検索するとトップにくるのか?今日はWEBマーケティング業界で面白いネタとして話題となったトピックを紹介します。それは「軽いサイト」と検索すると、阿部寛さんのHPが表示されるという話です。なぜなのでしょうか!?この記事では、なぜ軽いサイトで検索すると阿部寛さんのHPが上位表示されるのか、その秘密について考察していきます。...

なぜ、サイトスピードが重要なのか?

サイトスピードは、ウェブサイトの生命線といっても過言ではない重要な指標です。ここでは、その理由を3つに分けて説明します。

理由1 3秒を超えると直帰率が高まる

第一の理由として、サイトスピードが遅いと直帰率が増加するので、利用者の回遊率が減少することが挙げられます。

直帰率とは、サイト訪問者のなかで何%の人たちが「1ページ目だけを見てサイトを閉じたのか」を表した指標です。

ウェブサイトのデータ解析サービスなどを提供しているPingdomが公開する『Does Page Load Time Really Affect Bounce Rate?』では、ページの読み込み時間が3秒を超えると、5秒に達するまでに直帰率が38%上昇するといった調査結果が紹介されています。

次の画像は、読み込み時間と直帰率の関係を表したグラフです。

表示速度と離脱率Pingdom「Does Page Load Time Really Affect Bounce Rate? 」(最終確認日:2020/3/24)から引用

理由2 スピードアップデートで検索順位が下がる

第二の理由として、表示速度が遅いとSEOに悪影響が出ることが挙げられます

Googleウェブマスター向け公式ブログでは、サイトスピードとSEOの関係について次のようなことが述べられています。

研究(英語)では、ユーザーはページの読み込み速度を非常に気にかけていることがわかっています。読み込み速度はこれまでもランキングシグナルとして使用されていましたが、それはデスクトップ検索を対象としていました。そこで2018年7月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。

Googleウェブマスター向け公式ブログより引用(最終確認日:2020/3/28) ※強調は筆者

これは「スピードアップデート」と呼ばれています。

そのため、モバイル端末からアクセスしたときの表示速度が遅いと、コンテンツの検索順位が下がるおそれがあるのです。

理由3 コンバージョン率が低下する

第三の理由として、コンバージョン率が低下することが挙げられます。

コンバージョンとは、ウェブサイトの管理者が設定した目的を達成するための手段です。化粧品を販売するECサイトでいえば、売上につながるネット注文や購入がコンバージョンとして設定されます。

マーケティングのサービスを提供するPORTENTが公開する『Site Speed is (Still) Impacting Your Conversion Rate – Portent』では、サイトスピードとコンバージョン率に関する研究データが公開されています

サイトスピード コンバージョン率 画像PORTENT『Site Speed is (Still) Impacting Your Conversion Rate – Portent』 より引用(最終確認日:2020/3/26)

上記のグラフによれば、ページの読み込み時間が2秒を超えると、0秒と比較して約20%ほどコンバージョン率が低下していることが分かります。

3秒以降は10%と横ばい傾向にありますが、直帰率が増えてユーザーが減少していることを考慮すると、コンバージョンの総量自体が少なくなることが予想されます。

サイトスピードを計測する方法

ウェブサイトの表示速度は通信環境にも依存するものなので、複数のツールで計測することが望ましいと考えられます。ここでは、サイトスピードを計測する3つの方法を紹介します。

計測方法1 PageSpeed Insights

PageSpeed Insightsとは、Googleが提供しているサイトスピードを計測するツールです。モバイルとパソコンの表示速度を調べることができます。

PageSpeed Insights 画像PageSpeed Insightsより引用(最終確認日:2020/3/27)

使い方は「ウェブページのURLを入力」に表示速度を計測したいURLを入力して「分析」をクリックするだけです。

PageSpeed Insights 結果PageSpeed Insightsより引用(最終確認日:2020/3/27)

サイトスピードの結果は数字で表示されます。基準は、0~49は遅い、50~89は平均、90~100は早いの3段階に分かれています

また、PageSpeed Insightsは、以下の画像に示されているとおりサイトスピードを遅らせている原因を特定してくれます

PageSpeed Insights 結果 画像 PageSpeed Insightsより引用(最終確認日:2020/3/27)

計測方法2 Testmysite

Testmysiteとは、 PageSpeed Insightsと同様にGoogleが提供するサイトスピ―ドの解析ツールです。

Testmysiteのホーム 画像https://www.thinkwithgoogle.com/intl/ja-jp/feature/testmysite/ から引用(最終確認日:2020/3/28)

使い方は「速度をテストするドメインを入力」して矢印をクリックするだけです。

Testmysite 画像https://www.thinkwithgoogle.com/intl/ja-jp/feature/testmysite/ から引用(最終確認日:2020/3/28)

すると、国・ネットワーク環境・読み込み時間が表示されます。このほかにも、サイトページの最適化に関する改善案をピックアップしてくれます。

計測方法3 SEOアナライザー

SEOアナライザーとは、NEILPATELが提供するサイト監査のツールです

「SEOアナライザー」で検索すると、「サイトSEO分析ツール:無料で診断&監査レポート-Neil Patel」というページが上位表示されますので、そちらをクリックしてください。

SEOアナライザー 画像https://neilpatel.com/jp/seo-analyzer/ から引用(最終確認日:2020/3/27)

サイトにアクセスしたら、「サイトURL」にサイトスピードを計測したいウェブサイトのURLを入力して「サイトを分析」をクリックして完了です。

SEOアナライザー 結果https://neilpatel.com/jp/seo-analyzer/ から引用(最終確認日:2020/3/27)

上記のように、パソコンとモバイルの表示速度を秒数で表示してくれます。また、表示速度に影響を与えている項目を特定してくれるので改善策を考えるのに役立ちます。

サイトスピードを改善する方法

サイトスピードを計測して「遅い」と診断された場合、どのように改善すればよいのでしょうか? ここでは、サイトスピードを高速化する4つの改善方法を紹介します。

改善方法1 画像ファイルを圧縮する

ウェブサイトの表示速度が遅くなる原因のひとつに画像ファイルの容量が大きいことが挙げられます。そのため、画像を圧縮することによって、サイトスピードが改善される可能性があります。

PageSpeed Insightsでは、下記のように「適切なサイズの画像」として圧縮すべき画像を検出してくれます。

PageSpeed Insights 適切なサイズの画像PageSpeed Insightsより引用(最終確認日:2020/3/27)

画像圧縮で便利なツールは「TinyPng」です。TinyPngとは、pngやjpgの画像ファイルをオンライン上で圧縮できるサービスです。

TinyPng ホーム画像https://tinypng.com/から引用(最終確認日:2020/3/26)

使い方について詳しく知りたい方は、こちらの記事をご覧ください。

記事のタイトルとイメージを記述したアイキャッチ画像
画像圧縮ならパンダで有名なTinyPNG!使い方を解説ウェブサイトの表示速度を改善するなら、画像圧縮は必要不可欠です。画像圧縮のツールには複数の種類がありますが、TinyPNGは高性能かつ無料で使える便利なサービスです。この記事では、パンダのキャラクターで有名な画像圧縮サービスTinyPNGの使い方について解説します。ブログを始めた方やオウンドメディアを運営されている方の参考になれば幸いです。...

改善方法2 ページの読み込み速度を遅らせる

ウェブサイトにアクセスした際に、ページの全体を読み込ませると表示速度が遅くなる場合があります

そこで、ユーザーが最初に見るページの読み込みを優先して、それ以下のページは徐々にロードするという「遅滞読み込み」といった改善方法があります

ワードプレスでウェブサイトを作っている方は、遅滞読み込み専用のプラグイン「lazy load」を導入してみましょう。

なお、Lazy Laodについて詳しく知りたい方は、こちらの記事をご覧ください。

Lazy Loadの使い方 アイキャッチ
Lazy Loadの使い方【WordPressの利用者必見】画像データの圧縮、キャッシュ機能の追加、不要なCSSの削除以外にも、Lazy Load(レイジーロード)というサイトスピードを改善する方法があります。Lazyは英語で「動きがのろい」という意味なので、ウェブサイトの表示速度を上げる技術と関係ないように思えますが、有効な改善策のひとつです。この記事では、Lazy Loadの概要と使い方について解説していきます。遅滞読込を活用してウェブサイトの表示速度を改善したい方の参考になれば幸いです。...
アイキャッチ画像
a3 Lazy Loadの設定方法|遅滞読み込みでサイトを高速化 Google botは、Lazy Loadが適用されたデータを読み込むことができないといわれています。すなわち、SEOに悪影響があるか...

改善方法3 キャッシュ機能を追加する

ウェブサイトの表示を高速化するには、キャッシュ機能の追加が有効です。キャッシュとは、アクセスしたウェブサイトの情報を一時的に保存する機能のことです。

これによって、一度アクセスしたページを再度読み込む手間が省けるので、表示速度を改善できます

WordPressでウェブサイトを作っている方は、こちらの記事でキャッシュ系のプラグインを紹介してますのでご覧ください。

WP SUPER CACHEの設定と導入前に注意すべきことのアイキャッチ画像
WP SUPER CACHEの設定と導入前に注意すべきこと【徹底解説】 ウェブサイトの表示速度を改善する手段として、キャッシュ機能を追加する方法が有効です。WordPressを利用している方なら、WP SU...

改善方法4 不要なCSSや機能を取り除く

CSSとは「カスケーディング・スタイル・シート」の略称でウェブサイトのスタイルを指定する言語です。

ユーザーがウェブサイトにアクセスした際に、CSSを読み込むため、一定のデータ通信量が発生します。

一つひとつのコードの容量は大きくなくても、総量で重たくなる可能性があるので、不要なCSSは削除しましょう

その他にも、「この機能はユーザーにとって有益なのか?」という視点からウェブサイトの機能を減量することも大切です。

サイトスピードを最適化しよう

サイトスピードはユーザーの満足度に関わる重要な指標です。

折角、良いコンテンツを作ったとしても、表示速度が遅いことで、ユーザーが離れてしまうのはもったいないです。

今回、紹介した改善方法の詳細については別途、記事を作成する予定ですが、インターネットには既に優良な情報コンテンツがありますので、是非、ググって確認してみてください!

ABOUT ME
PENDELION編集部
PENDELION編集部はライター・構成担当・編集担当・グロースハッカーから成り立っています。専属のライターさんが執筆した記事に関しては、希望がある場合にのみプロフィールを掲載します。