2024.10.15 集客・マーケティング

Webサイトの表示速度を改善する方法とは？速度計測ツールも紹介

#サイト改善

読了目安：11分

Webサイトの表示速度は、離脱率やSEO（検索順位）など様々な面に対して影響を与えます。

特に通信システムが発達して以降、ユーザーは表示速度が遅いサイトに対してはストレスを感じやすく、すぐに別のサイトに移ってしまうリスクが高まってしまいます。

本記事では、Webサイトの表示速度を改善する方法や、速度計測に最適なツールなどについて紹介していきます。

Webサイトの表示速度改善を検討されている方は、是非参考にしてください。

Webサイトの表示速度を改善するメリット
Webサイトの表示速度が遅くなる原因
Webサイトの表示速度を改善する方法8選
Webサイトの表示速度の計測・改善に便利なツール3選
まとめ

Webサイトの表示速度を改善するメリット

Webサイトの表示速度は、ユーザーエクスペリエンス（UX）やSEOに大きな影響を及ぼします。

ここでは、Webサイトの表示速度を改善することによって得られる下記のようなメリットについて詳しく解説します。

SEO効果がある
離脱率が減る
売上アップにつながる

SEO効果がある

Webサイトの表示速度を改善することは、SEOという観点で大きなメリットがあります。

Googleは、2012年時点でページの表示速度がランキングの要因の一つであることをすでに公表しています。

ただ当時は、ランキング要因の中での影響度は小さいものでした。

当時、Googleのウェブスパムチーム/品質管理チームの責任者であるマット・カッツ氏は、下記のように述べるにとどまっています。

もしサイトが本当に、本当に遅かったとしたら、ページのスピードをランキング要因に実際に使うと今までに言ってきた。したがって、それ以外のすべての条件が同じだったとしたら、確かにランキングが低くなることがある。

引用元：モバイル検索の上位表示にページ速度はどのくらい重要なのか | 海外SEO情報ブログ

しかし2018年1月には、ページの表示スピードがモバイルの検索ランキング要因として使用されることが事前アナウンスされ、2018年7月に”Speed Update” として導入されました。

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

また2021年6月には、Googleの方針によりSEOのランキング要素として「Core Web Vitals」の指標を織り込むことが発表されました。

このCore Web VitalsはWebサイトの表示速度や快適性の指標であり、Webサイトの表示速度がいよいよ「集客」にも影響を与えることとなったのです。

このように、サイトの表示速度はGoogleなどの検索エンジンが非常に重要視している指標となっています。

サイトの速度があまりにも遅いページは、マイナスの影響を受け、検索上位に表示されづらくなるおそれがあります。

離脱率が減る

Webサイトの表示速度を改善すると、離脱率が低下するという大きなメリットがあります。

実際に、2018年にGoogleが行っている調査によると、Webサイトの表示速度が1秒から3秒に落ちるだけで直帰率が32%上昇するという結果が出ています。

また、5秒に落ちた場合は90%、6秒に落ちた場合は106％、10秒に落ちた場合には132％上昇するという結果が出ています。

このように表示速度を改善することにより、ユーザビリティが向上し、結果的に離脱率を低下させることができます。

売り上げアップに繋がる

検索結果の表示順位が上がり、離脱率が減れば、サイト内に滞在するユーザーが増えるため、結果的に売上アップに繋がります。

Webサイトの売上は、単純化すれば、『売上＝（来訪者×CVR）×CV単価』という公式で表すことが可能です。

この中で、来訪者数とCVRに直接的な影響を表すのがWebサイトの表示速度です。

このようにWebサイトの表示速度を改善することにより、間接的に売上アップに繋がるというメリットがあります。

Webサイトの表示速度が遅くなる原因

Webサイトの読み込みが遅くなる原因には、様々な要素が存在します。

ここでは、下記のような代表的な要素について紹介します。

画像ファイルが重い
動画やアニメーションを多用している
サーバーの性能が低い
タグを埋め込みすぎている

画像ファイルが重い

Webサイトの表示速度が遅くなる要因として、最も多いのが画像です。

画像ファイルのサイズが大きいと、その分Webサイトの表示速度が遅くなります。

ブラウザが画像を読み込むのに時間がかかってしまうため、ページ全体の表示が遅くなってしまうのです。

まずは、運営しているWebサイト内の画像ファイルが重すぎないか確認してみましょう。

動画やアニメーションを多用している

動画やアニメーションを多用していることも、Webサイトの表示速度を遅くする要因の一つです。

動画やアニメーションは、ファイルサイズが大きくなりやすいため、読み込みに時間がかかります。

特に、多数の動画やアニメーションがページに埋め込まれている場合、その影響はかなり顕著になるでしょう。

Webサイトの表示速度を向上させるには、動画やアニメーションの使用を最小限にし、必要な場合は最適化を行いましょう。

動画の解像度やビットレートを調整したり、アニメーションのフレーム数を減らしたり、といった工夫が有効です。

サーバーの性能が低い

サーバーの性能が低いと、リクエストの処理やデータの転送が遅れ、結果としてページの読み込み時間が増加するため、表示速度が遅くなってしまいます。

また、共有サーバーでは複数のWebサイトが同じリソースを使用するため、他のサイトのトラフィックが多い場合に自サイトの速度が大幅に低下することがあります。

タグを埋め込みすぎている

過剰なタグの埋め込みも、Webサイトの表示速度を遅くする要因です。

過剰なタグはブラウザに余計な負担をかけ、ページの読み込み時間を延ばしてしまいます。

多数の広告タグやアナリティクスタグが含まれると、それぞれのタグが別々にサーバーとデータのやり取りを行うため、ページ読み込みに時間がかかってしまうのです。

無駄なタグを減らし、必要最低限のタグを使用することで、Webサイトの表示速度を向上させることができます。

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

Webサイトの表示速度を改善する方法には、どういったものがあるのでしょうか。

ここでは、特に重要な下記について解説します。

画像ファイルを圧縮する
利用するサーバーを見直す
ブラウザキャッシュを活用する
CMSを利用している場合はプラグインを減らす
遅延読み込み（レイジーロード）をJavaScriptで実装する
AMPを導入する
HTML・CSS・JavaScriptのソースコードを最適化する
HTTP/2に対応する

画像ファイルのサイズを圧縮する

圧縮した適切なサイズの画像を用いることで、ダウンロード時間を大幅に短縮することができます。

具体的には、「JPEG」や「PNG」形式を使用する際に圧縮ツールを利用して、最適なバランスを見つけることが重要です。

次世代画像フォーマットである「WebP」を採用することも効果的です。

WebPは通常のJPEGやPNGよりも小さいファイルサイズでありながら、同等の画質を提供することが可能です。

また、画像ファイルを圧縮するだけでなく、必要のない画像の削除や利用頻度の低い画像の非表示も検討しましょう。

これにより、無駄なリソースを削減し、効率的なページ読み込みが可能となります。

利用するサーバーを見直す

サーバーの選定は、Webサイトの表示速度に大きな影響を及ぼします。

サーバーの性能や容量が低いと、高トラフィック時に十分な処理能力を発揮できず、結果としてサイトの読み込みが遅延します。

用途に応じてサーバーを適切に選定し、必要に応じてアップグレードすることで、Webサイトの表示速度を大幅に改善することが可能です。

具体的には、共有サーバーから専用サーバーやクラウドサーバーに移行することで、自分だけのリソースを確保し、他のユーザーの影響を受けにくくすることができます。

また、高トラフィックが予想される場合はスケーラブルなクラウドサーバーを利用することで、必要に応じてリソースを柔軟に増やすことが可能です。

どのサーバーが自分のサイトに最適かを見極め、適切な対策を講じることが重要です。

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

ブラウザキャッシュを活用することで、Webサイトの表示速度を劇的に向上させることができます。

ブラウザキャッシュは、ユーザーが一度アクセスしたコンテンツをローカルに保存する仕組みで、再訪時にコンテンツの再読み込みを避けることができるので表示時間が短縮されます。

ブラウザキャッシュを適切に設定し、ユーザーエクスペリエンスを向上させましょう。

CMSを利用している場合はプラグインを減らす

CMSを利用している場合、プラグインの数を減らすことも意識しましょう。

プラグインが多すぎると、Webサイトのロード時間を増大させ、サイト全体のパフォーマンスを低下させる原因となります。

特に不要なプラグインが多いと、サーバーへの負荷も増え、結果的に表示速度が遅くなることがあります。

定期的に自社サイト内を見直し、不要なプラグインがないか確認しましょう。

遅延読み込み（レイジーロード）をJavaScriptで実装する

遅延読み込み（レイジーロード）をJavascriptで実装することも、ページの表示速度を改善する一つの手段です。

Lagyroad（レイジーロード）とは、画像表示の遅延を行う為の処理です。

遅延読み込みを行うことにより、アクセス時に見えている画面の領域内の画像だけを読み込むため、ページ全体の画像を読み込むときと比較して、ページ速度は早くなる傾向にあります。

ただし、レイジーロードは、クローラーに画像を認識してもらえない可能性があります。
クローラーはページ情報を収集する際には、スクロールを行わず、遅延読み込みさせた画像を認識できないためです。

Googleは回避策を用意しているため、詳しくはGoogle公式サイトの「遅延読み込みコンテンツをGoogleが認識できるようにする」を参照してください。

正しくレイジーロードの対策を行うことで、ページ表示速度の大幅な改善の可能性があります。

AMPを導入する

AMP（Accelerated Mobile Pages）とは、Googleが提供するオープンソースのフレームワークであり、主にモバイル端末でのページ読み込み速度を向上させるための技術です。

基本的に、AMPページは軽量化されており、不要な要素が削除されるため、表示速度が速くなる傾向にあります。

AMP（アンプ）の優遇措置は2021年で終了していますが、モバイルにおいて表示速度が速くなること自体は変わりがないため、SEO的なメリットは大きいと言えます。

HTML・CSS・JavaScriptのソースコードを最適化する

Webサイトの表示速度を向上させるためには、HTML・CSS・JavaScriptのソースコードを最適化することが効果的です。

ソースコードに無駄な記述があったり、改行が多かったりすると読み込むのに時間がかかり、ページの表示が遅くなります。

したがって、不要なコメントアウトを削除したり、無駄な空白を削除したりすることにより、最適化することが可能です。

また、問題が発生した場合に、迅速に原因を特定して修正するためにHTML・CSS・JavaScriptの管理および更新履歴を管理しておきましょう。

HTTP/2に対応する

HTTP/2とは、高速にコンテンツを表示できるように開発されたサーバーとブラウザ間での通信に使用されるプロトコル（通信手段）です。

HTTP/2は、従来のHTTP/1.1での課題であったレスポンス速度向上の取り組みとして開発されたプロトコルのため、ページの読み込み速度の向上に貢献できます。

HTTP/2が高速なのは、下記のような理由があるからです。

HTTPヘッダーを圧縮できる
接続を多重化し、複数のリクエストを処理できる
コンテンツの種類による優先度を設定できる

次世代プロトコルといわれるHTTP/2に対応し、Webページの読み込み速度を改善しましょう。

Webサイトの表示速度の計測・改善に便利なツール3選

Webサイトの表示速度は、Googleの無料ツールで測定することが可能です。

代表的な3つのツールをそれぞれ紹介します。

Page Speed Insights
Lighthouse
Googleアナリティクス4

Page Speed Insights

PageSpeed Insightsは、Webサイトの表示速度を測定・評価する分析ツールで、Googleが無料で提供しているツールです。

調べたいWebサイトのURLを入力するだけで、モバイル・パソコンのそれぞれのWebページの読み込み速度がスコアで表示されます。

また、速度測定のみならず、利便性やSEOなどの側面でも計測してくれるツールです。

下記のような指標に注目して確認しましょう。

指標	説明
First Contentful Paint（FCP）	ユーザーがURLをクリックしてから、サイトがレンダリングを開始する（データを読み込んでブラウザで表示を開始する）までの時間。
Speed Index（SI）	ページのコンテンツがどれだけ早く目に見える形で表示されているかを示すページ読み込み性能の指標
Largest Contentful Paint（LCP）	ユーザーがページ内にアクセスしてから、メインコンテンツを見ることができるようになるまでの時間
Time to Interactive（TTI）	ページが完全にインタラクティブになるまでにかかる時間
Total Blocking Time（TBT）	合計ブロッキング時間
Cumulative Layout Shift（CLS）	ページコンテンツにおける「視覚的な安定性を示す指標」

また、指標の提示だけでなく、改善方法も合わせて指示してもらえます。

特に影響の大きな改善策からまずは対策していくことをおすすめします。

Lighthouse

Lighthouseは、Webサイトのパフォーマンスやアクセシビリティを評価・改善するためのツールです。

主に以下のような評価基準に基づいてウェブページを評価します。

指標	説明
パフォーマンス	ページの読み込み速度やレンダリングの効率性など、パフォーマンスに関する評価。
アクセシビリティ	ユーザーの利便性やアクセシビリティに関連する評価。タイトルやalt属性の使用、適切なコントラストなどが含まれる。
ベストプラクティス	セキュリティや標準に準拠した実装に関する評価。HTTPSの使用、適切なコードの実装、最適なパフォーマンスのためのベストプラクティス。
SEO（検索エンジン最適化）	ウェブページの検索エンジンへの最適化に関する評価を行う。

ウェブページのURLを入力することで、ページのパフォーマンスと品質を分析し、提案を提示してくれるため、多くのユーザーに利用されています。

Google Chromeの拡張機能であるため、「現在ブラウザでアクセスしているページ」の改善項目を確認したい場合には、活用しやすいといえます。