Webサイトを使ったマーケティングを実施する上で、大切なのが表示速度です。ドメインパワーが強く、高品質なコンテンツをいくら制作しても、サイトの表示が遅いとユーザーは離脱してしまいます。
この状況でいくら記事を上位表示できたとしても、機会損失につながってしまうのです。このような背景から、Webサイトの速度改善は、サイト運営者にとって避けて通れない重要な課題と言えます。
本記事では、Webサイトの速度改善の重要性や原因、7つの対処法などを解説していきます。幅広いアプローチを通じて、あなたのWebサイトのパフォーマンスをさらに向上しましょう。
2014年 大学在学中にソフトウェア開発企業を設立
2016年 新卒でリクルートに入社 SUUMOの開発担当
2017年 開発会社Jiteraを設立
開発AIエージェント「JITERA」を開発
2024年 「Forbes 30 Under 30 Asia 2024」に選出
Webサイトの速度を改善する重要性
Webサイトの表示速度の改善は、ユーザー体験を向上させるために不可欠です。
Googleが2018年に公表した調査によると、ページの表示速度がわずか1秒→3秒に遅くなるだけで、直帰率が32%も上昇すると判明しました。
この調査結果は、ユーザーのWebサイトに対する忍耐力が非常に低いことを意味します。
SEO記事を一生懸命制作して、検索結果で上位表示できても意味がありません。ページのロードが遅くなってしまうと、ユーザーはすぐに離脱します。このような状況は、機会損失でしかないと言えるでしょう。
一方で、表示速度が速いWebサイトは、ユーザーにとって快適な体験を提供します。
結果として、滞在時間を延ばし、離脱率を減らす効果があるため、SEOの観点から効果的です。そのため、表示速度の最適化に向けた取り組みは、どのWebサイト運営者にとっても優先事項と言えます。
Webサイトの速度改善は2.5秒以内
Googleの「Google Developers」では、Webサイトのパフォーマンスを評価するための重要な指標として「Largest Contentful Paint (LCP)」が紹介されています。
LCPは、ページの主要コンテンツがロードされ、ユーザーに表示されるまでの時間を測定する指標です。
良好なユーザー体験を提供するためには、この値が2.5秒以下であることが推奨されています。なお、表示速度が1秒→5秒までかかってしまうと直帰率は90％、1秒→6秒までかかってしまうと直帰率は106％まで上昇します。
いくら読者のためになるコンテンツを制作しても、表示速度が遅いだけで、他社のサイトに流れてしまうわけです。
Webサイトが表示されるには？
Webサイトが表示されるまでのプロセスは、ユーザーが目にする以上に複雑です。
以下のステップに沿って、Webページがブラウザ上に現れるまでの一連の流れがあります。
| 手順 | 内容 |
| 1、URLを入力しアクセス | ユーザーがGoogle ChromeなどのブラウザにWebサイトのURLを入力 |
| 2、DNSサーバーに問い合わせIPアドレスを送信 | ブラウザはDNSサーバーに対し、入力されたURLのIPアドレスを問い合わせ、受け取る |
| 3、IPアドレスを使ってサーバーにアクセス | ブラウザは受け取ったIPアドレスを使用して、Webサイトをホストしているサーバーに接続する |
| 4、サーバーがデータを返す | サーバーは要求されたWebページのデータ（HTMLファイル、CSSファイル、画像など）をブラウザに送信する |
| 5、ブラウザがHTMLなどの情報を理解し表示 | ブラウザは受け取ったデータを解析し、Webページとして表示する |
ユーザーがURLを入力してからページが表示されるまで、上記の5つのステップが迅速に実行されます。外見上は瞬時にページが表示されるように見えますが、実際にはこの複雑な手順が背後で行われているのです。
このプロセスの理解は、Webサイトの最適化やトラブル対応において役立ちます。
Webサイトの速度を計測するツール3選
Webサイトの速度を計測する主要なツールを紹介します。
Page Speed Insights（ページスピードインサイト）
Page Speed InsightsはGoogleによって提供されている、Webサイトのパフォーマンスを計測し、改善策を提案する無料ツールです。
会員登録を必要とせず、URLを入力するだけで簡単にWebサイトの速度を計測できます。計測結果はPC版とモバイル版の両方に対応しており、数値化されたスコアで速度が表示される仕組みです。
また、ただ速度を計測するだけでなく、Webサイトのロード時間を短縮するための具体的な改善策も提案してくれます。
画像の最適化やJavaScriptの最適化、レンダリングを阻害するリソースの除去などのアドバイスが表示されるため、パフォーマンスを大幅に向上させるために不可欠です。
Lighthouse（ライトハウス）
Lighthouseは、Google Chromeの拡張機能として利用できる、Webサイトの品質を総合的に評価するツールです。Chromeウェブストアから無料でインストールできます。ユーザーは特定のWebサイトを開いてLighthouseを起動して、簡単に速度やパフォーマンスを計測可能です。
しかし、Lighthouseの特徴は速度計測にとどまりません。
このツールはWebサイトのパフォーマンスだけでなく、以下の点も提供しています。
- 視覚障害者に優しいか
- 安全性はあるか
- SEO上対策されているか
多角的な評価を確認できるのは、メリットです。
Google Analytics（アナリティクス）
Google Analyticsは、Webサイトのトラフィックやユーザー行動を解析するための強力なツールです。
以前のバージョンでは、ページスピードの計測機能も提供されていました。「行動」→「サイトの速度」→「ページ速度」から確認できます。
しかし、Google AnalyticsがGA4へと更新された際に、サイト速度に関する情報の取得ができなくなりました。
Webサイトの表示速度が遅くなる原因
Webサイトの表示が遅くなる原因は、以下の通りです。
- 画像や動画の容量が大きいから
- JavaScriptやCSSの最適化が不十分だから
- タグが多いから
- サーバーのスペックが不十分だから
- キャッシュの設定が適切でないから
それぞれ確認しましょう。
画像や動画の容量が大きいから
Webサイトの表示速度に大きく影響を与える要因が、画像や動画のファイルサイズです。特に、高解像度の画像や動画や圧縮されていないファイルは速度低下の原因となります。
デジタルカメラやスマホで撮影された高解像度の画像や、4Kなどの高品質動画は、そのままWebサイトに使用するとファイルサイズが非常に大きくなりがちです。
著者のスマホ「OPPO A5 2020 」で撮った写真は、1枚につき2.5Mもありました。また、画像や動画をウェブ用に最適化せずにそのまま使用すると、不必要なデータ量がページのロードを遅らせる原因となります。
JavaScriptやCSSの最適化が不十分だから
JavaScriptとCSSは、Webサイトのデザインと機能性をコントロールするファイルです。
これらのファイルが最適化されていないと、ページのロード速度が低下します。その理由は、不必要なデータが増えてしまい、処理に時間がかかるからです。
大量のスクリプトファイルやスタイルシート、または未使用のコードがページの表示速度に負担をかけます。その結果として、Webサイトの表示に余計な時間がかかるのです。
タグが多いから
Webページのロード速度は、HTMLタグの数に大きく依存します。ページ内にタグが過剰に含まれていると、ブラウザが全てを解析しページ構造を構築するのに余計な時間がかかるのはデメリットです。
この過程が長引くほど、ユーザーが実際にコンテンツを目にするまでの待ち時間も長くなります。また、不必要なタグや複雑な構造を多用することは、ブラウザのページレンダリング速度を直接的に遅らせる原因です。
特に古い方法に基づくWebデザインで見られがちなので、注意しましょう。
サーバーのスペックが不十分だから
Webサイトの表示速度において、サーバーのスペックは非常に重要な役割を果たします。特にコストを抑えるために、レンタルサーバーの安価なプランは、基本的に共有サーバーでスペックも高くありません。この共有環境では、アクセスが増えてしまうとサイトの速度に影響を与えてしまいます。
結果として、サイト全体のパフォーマンスが低下するわけです。
サーバーの物理的なスペックが十分でない、または最適な設定が施されていない場合、特にトラフィックが多い時期にはこの問題が顕著に現れます。
キャッシュの設定が適切でないから
Webサイトの速度向上において、キャッシュの役割は不可欠です。
キャッシュとは、Webサイトの訪問者が一度読み込んだリソースをブラウザに一時的に保存し、同じページへの再訪問時にロード時間を短縮する技術です。
簡単に言うと、会社の顧客データのようなもの。一度でも問い合わせがあれば、電話番号などの履歴が残っているため、次回連絡があった際にスムーズに対応が可能です。このプロセスにより、ページの表示速度が大幅に改善されます。
しかし、キャッシュの設定が適切でない場合、このメリットを享受できません。例えば、キャッシュの期間が短すぎる、またはキャッシュ可能なリソースがキャッシュされていない場合です。
ユーザーは同じリソースを何度もサーバーからダウンロードする必要があり、ロードに時間がかかってしまいます。
Webサイトの表示速度を改善する7つの施策
Webサイトの表示速度を改善するには、以下の施策が有効です。
- 画像や動画のファイルサイズを抑える
- HTMLやCSSファイルのサイズを圧縮する
- ブラウザのキャッシュ機能を使用する
- サーバーの性能を高める
- 不要なプラグインは削除する
- 遅延ロードを設定する
- AMPを設定する
順番に確認しましょう。
画像や動画のファイルサイズを抑える
Webサイトのページロード時間に大きな影響を及ぼすのが、画像や動画です。これらのメディアはテキストと比較してデータサイズが大きく、その結果、ページの表示が遅くなる原因となります。不必要に高い解像度の画像を避けて、ページ上で必要とされるサイズに適切にリサイズすることが肝心です。
さらに、WebPといった最適化されたフォーマットに変換して、品質を維持しつつファイルサイズを削減します。WordPressを使用している場合は、画像を自動的に圧縮してくれるプラグインの導入を検討してください。
動画コンテンツに関しては、その使用を最小限に抑え、実際に必要な場面での利用が望ましいです。動画を組み込む際は直接アップロードするのではなく、YouTubeやVimeoなどの外部ホスティングサービスを活用しましょう。
HTMLやCSSファイルのサイズを圧縮する
Webサイトのパフォーマンスを最適化する上で、HTMLとCSSファイルの圧縮は欠かせません。コード内の不要な空白やコメントが除去できれば、ファイルサイズが大幅に削減されます。圧縮作業は、専用のツールやWebサービスで簡単に実施できます。
また、オンラインで利用できる圧縮ツールも多数存在し、レベルに関わらず手軽に利用可能です。
サーバーからブラウザまでのデータ転送量が減少し、ウェブページのロード速度が向上します。ただし、ファイルを圧縮する際には、不具合が発生するケースが少なくありません。トラブルが起きても、戻せるように必ずバックアップを取りましょう。
ブラウザのキャッシュ機能を使用する
ブラウザのキャッシュを適切に設定することで、リソースをローカルに保存し、サイトの再訪問時にロード時間を短縮できます。重要なのは、キャッシュの有効期限やキャッシュポリシーの管理です。
適切な期限を設定することで、ユーザーがサイトを訪れるたびに最新のコンテンツをロードする必要がなくなり、サーバーへの負荷も軽減されます。
Google Developersでは、キャッシュ期間は少なくとも1週間、更新頻度が低い場合は最大1年が推奨されています。
しかし、キャッシュ設定を過度に長くすると、サイトの更新内容が反映されません。古い情報が表示されてしまうため、ユーザーが利用しにくくなってしまいます。
サーバーの性能を高める
Webサイトの表示速度を向上させるためには、サーバーの性能を最大限に活用することが重要です。
サーバーの応答速度が速ければ速いほど、ユーザーが要求したページが迅速にロードされ、結果として全体的なユーザー体験が向上します。レンタルサーバーであれば、エックスサーバーやConoHa WING（コノハウィング）がおすすめです。
こちらの2社であればアクセス数が増えても転送量が無制限のため、月額料金に上がることはありません。
不要なプラグインは削除する
WordPressでサイトをつくっている場合、プラグインは必要以上に入れてはいけません。10個までに留めておくのがおすすめです。
なぜなら、サイトのロード時間に悪影響を及ぼし、最終的にはユーザー体験を低下させる原因になるからです。プラグインが多いと、サーバーへのリクエスト数が増加し、データベースの負荷が高まります。
不要なスクリプトやスタイルシートがページに読み込まれると、Webサイトの表示が遅くなります。
遅延ロードを設定する
Webページのパフォーマンスを向上させる効果的な手段として「遅延ロード」（または「遅延読み込み」）の技術があります。ユーザーがスクロールして画面に表示される直前まで、画像や動画などの重いコンテンツの読み込みを遅らせる方法です。
このアプローチにより、ページの初期表示速度を大幅に向上できます。遅延ロードは、ページ上で直ちに見えない要素（例えば、ページの下部にある画像）を対象に適用されます。
ユーザーが画面上でまだ表示されていない要素にスクロールして到達するまで、ブラウザはコンテンツを読み込みません。その間にページ上の既に表示されているほかのコンテンツの読み込みに、リソースを割り当てます。
結果として、ページの初期ロード時間が短縮され、ユーザーにより迅速にコンテンツを提供することが可能です。
画像や動画などのコンテンツを、それが画面に表示されるタイミングまで読み込まないように設定する「遅延ロード」を利用することで、初期ロード時のデータ量を減らし、速度を向上させることができます。
AMPを設定する
AMP（Accelerated Mobile Pages）は、モバイル端末上のWebページの読み込み速度を飛躍的に向上させる施策です。Googleが推進するオープンソースで、この技術を導入することでモバイルの表示が2倍〜4倍ほど早くなります。
AMPは、HTMLやCSS、JavaScriptの最適化されたバージョンを使用して、ページの構造を軽量化しパフォーマンスを向上させる方法です。AMPページはGoogle検索結果で高速にロードされるため、ユーザー行動の向上とともに、検索ランキングの改善にもつながる可能性があります。
しかし、AMPの導入はメリットだけではありません。カスタマイズが多いページには向いていない、管理に運用工数がかかるなど、考慮すべき側面も存在します。
そのため、AMPを導入する際にはそのメリットとデメリットを評価し、サイトの目的やユーザーのニーズに合わせて洗濯しましょう。
まとめ：Webサイトの速度改善は避けられない
Webサイトの速度改善は、現代のインターネット環境において避けられない課題です。
ユーザーは迅速な情報へのアクセスを期待しており、遅いとすぐに離脱の原因となります。
サイトの満足度低下だけでなく、SEOランキングにも悪影響を与えてしまいます。
以下のような施策は、単独で行っても効果がありますが、一連の改善策を組み合わせて実行できると、より顕著なパフォーマンス向上を期待できます。
- 画像や動画のファイルサイズを抑える
- HTMLやCSSファイルのサイズを圧縮する
- ブラウザのキャッシュ機能を使用する
- サーバーの性能を高める
- 不要なプラグインは削除する
- 遅延ロードを設定する
- AMPを設定する
まずは手軽な施策から取り入れてみましょう。
株式会社JiteraではAIを使ったシステム・アプリ開発を実施しています。高速表示についても対応できるので、サイト制作を検討されている方はお気軽にご相談してください。
メールマガジン登録
