Webサイトの表示速度の改善方法をチェック！計測方法も知ろう！

こんにちは！ブルームプロモーションの大井です。

みなさんは、Webサイトの表示速度の遅さが気になったことはありませんか？

ページがなかなか表示されずイライラした…という経験をしたことがある方も多いかと思います。

ページの表示速度はユーザーの行動に大きな影響を与える部分。

だからこそ、Web制作では表示速度を意識することが大切です。

今回は、Webサイトの表示速度の重要性や改善方法、計測方法、SEOの関係などについて、詳しくお話したいと思います。

 

表示速度の改善はUXとSEOに良い影響をもたらす

表示速度が影響を与えるのは、「UX（ユーザー体験）」の部分と「SEO」、すなわち検索順位に関わる部分です。

それぞれ、詳しく見ていきましょう。

 

表示速度は「UX」へ影響を及ぼす

ページの表示が遅いと、ユーザーの離脱やコンバージョンにも影響があります。

 

少し前の調査になりますが、ページの読み込み速度と直帰率に関して、2017年にGoogleから次のような発表がありました。

As page load time goes from:

1s to 3s the probability of bounce increases 32%
1s to 5s the probability of bounce increases 90%
1s to 6s the probability of bounce increases 106%
1s to 3s the probability of bounce increases 123%

引用：Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed

ページの表示速度が1秒から3秒に落ちると、直帰率は32%上昇、5秒まで落ちると90%上昇…と3秒でも直帰率に大きな影響を与えることが分かります。

せっかく内容の良いコンテンツを作成しても、ページの表示速度が遅い理由でユーザーがWebサイトから離れていってしまっては意味がありません。

読んでもらう工夫の1つとして、少しでも表示速度を速めることが大切です。

 

また、「ユーザーが直帰してしまう＝ユーザーがページを回遊しない」ということなので、各ページからお問い合わせや申し込み、購入などのコンバージョンページへ導線を設置していても、当然ユーザーがそこに辿り着くことはありません。

コンバージョンが発生するページに問題がなくても、そこに繋がるページの直帰率が高ければ、コンバージョン率を低下させてしまう原因となるでしょう。

 

そもそも、Webサイトの表示速度が遅いと、ユーザーはそのWebサイトやサービス、Webサイトを運営する企業などに良いイメージを持ちません。

表示速度の遅さがコンバージョンを遠ざけてしまうというのは、普段からユーザーとしてもインターネットを利用しているみなさんなら、イメージしやすいのではないでしょうか。

私も普段Amazonや楽天を利用しますが、もし表示速度が遅かったら利用していなでしょう。

 

表示速度は「SEO」へ影響を及ぼす

ページの読み込み速度は検索順位に影響を及ぼす要因の一つです。

Googleは、2018年に「スピード・アップデート」を実施しており、「2018年7月よりページの読み込み速度をモバイル検索のランキング要素として使用する」と正式に発表がありました。

参考：Google ページの読み込み速度をモバイル検索のランキング要素に使用します

 

このアップデートでは、極めて読み込み速度の遅いページにのみ影響すると言われていますが、それでも影響を受けているWebサイトは少なからずあるでしょう。

さらに、2021年6月には「ページエクスペリエンス・アップデート」が実施されました。

「LCP（読み込み時間）」を含むコアウェブバイタルが新たにランキング要素として加わることになり、より表示速度改善の重要度が増してきています。

 

LCPは、ページの中で最も大きなコンテンツが表示されるまでの時間を指し、2.5秒以内が「良好」と判断されます。

こちらについても、LCPが「良好」でない全てのページの順位が落ちるというものではありません。

ですが、ここで「な〜んだ、順位下がらないならいっか」と思ってはいけませんよ！

 

ページスピードは「Tie Breaker（同点必勝）」としての役割を持つと言われています。

例えば、同じくらい質の良いページがあったとして、AのページのLCPが2.7秒、BのページのLCPが1.7秒だった場合、Bのページが上に表示されるというようなイメージです。

ライバルにコンテンツの質が劣っていなくても、表示速度が遅いことが原因となって、Tie Breakerで敗北する可能性があるということです。

そこが理由で負けてしまうのは、何だか悔しいですよね…！

 

表示速度が遅いWebページの改善方法とは？

表示速度が遅くなってしまう原因はさまざまありますが、中でも画像や外部ファイルのサイズなどが影響することが多いです。

キャッシュの活用やサーバーの見直しで表示速度の改善を図ることもできます。

それぞれ方法をご紹介しますので、ご自身のWebサイトの状況を分析し、できるところからチャレンジしてみてくださいね！

 

① 画像の最適化

ページ速度に悪影響を及ぼす一番の原因になっているのが画像サイズ。

見落としがちなブログなどでアップロードする画像も、サイズを落とすことを心がけましょう。

「というものの、一体どうやって…？」と思う方もいるかもしれませんが、画像サイズを落とすのはとっても簡単です。

現在は、インターネット上のサービスで、利用できる便利なサービスがたくさんあります。

 

私のおすすめは、Googleが提供しているWebアプリ「Squoosh」。

ブラウザ上で作業できるため、面倒なインストール作業などもなく、非常に便利です。

使用方法は、サイズダウンしたい画像を指定の場所にドラッグ＆ドロップするだけ。

画像を見ながらサイズダウンの程度を調整できたり、同じ画面で画像のリサイズができたりと、無料ながらとても機能的なツールです。

圧縮・リサイズした画像は、ボタンひとつで簡単にダウンロード可能です。

 

その他、アップロードしたJPEG画像の画質を落とさずに最小限まで画像サイズを小さくすることができる「JPEGmini」を利用している方も多いかもしれませんね！

 

また、画像をサイズダウンするのではなく、JPEGやPNGよりも軽量な次世代フォーマット「WebP」を使用するという方法もあります。

現在はまだあまり主流ではないものの、画像サイズの大きさに悩んでいる方は、検討してみてはいかがでしょうか？

 

少しでも画像のサイズダウンを心がけて、スリムなサイトを目指しましょう！

是非みなさんも、画像のアップロードする前に圧縮ツールを利用してみてくださいね。

 

② ブラウザのキャッシュの活用

普段、私たちがなにげなく閲覧しているWebページですが、裏側では「一度サーバーにデータをリクエストして、そこから受け取った表示させるページのデータを読み込む工程」があります。

キャッシュとは、その読み込んだデータを一時的に保存する技術のことを言います。

 

これを有効にしておくことで、再度同じページを訪問した際に、わざわざサーバーにデータをリクエストする必要がないため、表示速度の改善に繋がります。

ブラウザのキャッシュを活用したい場合は、.htaccessへの記述が必要です。

ここでは記述方法までは詳しく掘り下げませんが、技術的な知識も必要となる分野のため、専門知識を持った技術者に依頼するのが安心です。

 

③ 外部ファイル（CSSやJavaScriptなど）の縮小

Webページを表示する際、CSSやJavaScriptなどの外部ファイルをサーバーから受け取り、読み込む必要があります。

このとき、外部ファイルの容量が大きかったり数が多かったりすると、それだけブラウザとサーバーの通信負担や回数も増え、表示速度にも悪影響が出てしまいます。

少しでも外部ファイルを縮小するには、過剰な改行やインデント、余白など、無駄な部分を削ぎ落とす必要があります。

 

手動でも可能ですが、ツールを使うと便利です。

CSSの縮小には「CSS Minifier」、JavaScriptの縮小には「JS Minifier」というツールが人気。

いずれも無料で、Web上での作業が可能です。

 

ただし、外部ファイルの縮小には一つ注意点が。

それは、CSSやJavaScriptを縮小してしまうと、後に更新が必要となった場合に編集が大変になるということです。

CSSやJavaScriptは、改行やインデントなどを用いて分かりやすくコーディングしていくのが一般的です。

縮小により改行やインデントが消去されてしまうので、記述が見づらくなり、編集の際に苦労が発生する可能性もあります。

 

大規模なサイトや複数人で編集を行っているサイトの場合などは、縮小すべきか慎重に判断する必要があるでしょう。

 

④ サーバースペックの向上

Webサイトの表示速度が遅い場合、サーバーに問題があることもしばしば。

サーバーのCPUや回線速度を確認し、疑わしければハイスペックなものへの切り替えも検討しましょう。

単純に台数を増やすことでも、サーバーの負荷を分散させ、表示速度の向上を見込めます。

 

クラウドサーバーを契約しているという方が多いかと思いますが、その場合はプランを見直してみるのも良いかもしれませんね！

 

表示速度の計測方法をチェック！

表示速度が遅いから改善します！といっても、根拠は必要ですよね。

客観的に表示速度を把握するためにも、表示速度の計測方法も知っておきましょう。

表示速度を計測できる代表的なツールを紹介します。

 

① PageSpeed Insights（ページスピードインサイト）

表示速度の測定はコレ！と言われるくらいメジャーなツール「PageSpeed Insights」。

操作はいたって簡単。

表示速度をチェックしたいページのURLを検索窓に入力するだけでOKです。

100点を満点とし点数をつけてくれるため、施策前と施策後のスコア比較にも便利です。

 

PC検索、モバイル検索の両方に対応しており、改善できる項目もあれば教えてくれます。

 

②Lighthouse（ライトハウス）

「Lighthouse」は、Googleが提供している無料のChrome拡張機能。

Webサイトの総合的なSEOチェックツールで、もちろん表示速度の計測も可能です。

Chromeウェブストアからダウンロードして使用します。

表示速度を計測したいページを開き、そのページでツールバーに表示されるLighthouseのアイコンをクリック。

「Generate report」というボタンが表示されますので、そちらをクリックすれば分析が開始されます。

表示速度は、レポートの「Performance」の項目から確認できます。

スコアは、PageSpeed Insightsと同様に100点を満点として表示されます。

 

ちなみに、Lighthouseは自分のPC環境で動作しますが、PageSpeed InsightsはGoogleが用意するサーバーで動作するWebサービスです。

 

③ Google Analytics（グーグルアナリティクス）

Webサイトを運営しているなら、「Google Analytics」を導入している方も多いはず。

セッションやCVはよく見ていたけれど、表示速度はあまり見たことがなかったという方も多いのではないでしょうか？

 

左メニューの「行動」に「サイトの速度」の項目があり、そこからWebサイト全体、ページごとの平均読み込み時間をチェックすることができます。

すでに活用している方も多いツールかと思いますので、ぜひこちらもチェックしてみてくださいね！

 

表示速度を改善して「UX」も「SEO」も強化しよう！

表示速度は、ユーザーの行動にも検索順位にも影響を及ぼす、とても重要な要素です。

「Webサイトが遅いな…」と感じたら、表示速度計測ツールを使って確認し、できるところから改善を図っていきましょう。

 

取り組みやすいのは画像の最適化ですが、その他にもブラウザキャッシュの活用やCSS・JavaScriptなどの外部キャッシュの縮小を行うという方法もあります。

また、計測には「PageSpeed Insights」や「Lighthouse」、「Google Analytics」といったツールが便利。

表示速度の改善施策を行う際には、ぜひ活用してみてくださいね！

 

SEOにおいて最も大切なのはコンテンツの質ですが、ユーザーにとってストレスになる優しくないページはいくらコンテンツが良くても評価につながりにくい時代になりました。

貴社のWebサイトに訪れるユーザーに、ページの表示スピードでイライラさせてしまわないよう、このコラムがお役にたてると嬉しいです。