ページの表示速度を上げる改善方法10選
ページの表示速度は、Webサイトの性能を評価する重要な指標の一つであります。
ページの表示速度を改善することは、ユーザーエクスペリエンスを上げるだけでなく、ページの評価にも影響しています。ここで、ページの表示速度を上げる改善方法を紹介したいです。
ページの表示速度が遅いデメリット
ページの表示速度が遅いと、Webサイトに色々な影響を及ぼします。ユーザーのエクスペリエンスだけでなく、SEOにも悪影響が出る場合があります。
＞「Semrush」で、サイトスピードを調べる
ユーザーエクスペリエンスへの悪影響
ユーザーエクスペリエンス（UX）とは、ユーザーのあらゆる製品やサービス、システムなどの使用体験全般を指します。具体的に使いやすさ、親しみやすさ、効率性、感動、印象などが含まれます。
ページの直帰率（非エンゲージメント率）が上昇
GA4では
セッションのうち、10 秒を超えるもの／コンバージョンイベントが発生したセッション／2 回以上のページビューもしくはスクリーン ビューが発生したセッションを「エンゲージメント 」と定義し、それ以外を「非エンゲージメント率＝直帰率」と定義しています。
直帰率とは、Webサイトに1 ページしか閲覧されなかったセッション（ユーザーが閲覧を始めたページから他のページに移動することなくWebサイトを離脱したセッション）の割合です。
ページ速度が遅いWebサイトでは、ユーザーがストレスを感じ、非エンゲージメント率＝直帰率が高まりやすくなります。
参考：GA4｜直帰率とは
滞在時間の低下
※「滞在時間」は、GA4でなくなった指標です
滞在時間には「平均セッション時間」と「平均ページ滞在時間」があります。
・平均セッション時間＝セッション全体の滞在時間の平均
・平均ページ滞在時間＝ページごとの滞在時間の平均
またここで注意すべきは「滞在時間＝ページ遷移ごとの差分の時間で計測されている」ということです。
読み込み速度の遅いページは、ユーザーが欲しい情報を即時に取得できないため、Webサイトの回遊を妨げ、別Webサイトへ離脱してしまう可能性が高まります。
ブランディングの低下
商品・ブランドの宣伝を目的としたブランディングサイトなどの場合、ページ表示速度は、宣伝効果にも影響を与えます。どんなに視覚的に美しいWebサイトでも、読み込みが遅くページの表示に時間を要する場合、信頼性を欠いてしまいます。
SEOへの悪影響
Googleは「Core Web Vitals」という、ページの読み込みパフォーマンス／インタラクティブ性、／視覚的安定性をもってユーザーエクスペリエンスを測定する指標をもっており、Webサイトの表示速度はその中の「ページの読み込みパフォーマンス」に該当します。
特に「モバイル検索のランキングには大きく影響する」ことをGoogleが明言しているため、SEOへ悪影響とならないよう改善が必要です。
参考：Google｜ページの読み込み速度をモバイル検索のランキング要素に使用します
ページの評価が下がる
検索エンジンのクローラーがページをクロールする際に、速度が遅いページは、全てのコンテンツを十分に取得されない場合があります。その結果、全てのコンテンツがインデックスされなくなり、ページの権威性や評価に影響を及ぼすことになります。
Google PageSpeed Insightsでは
ページの評価を100点満点で採点しており、
90～100点は緑色（Good）
50～89点は黄色（Medium）
0～49点は赤色（Low）
スコアの低いページは改善が必要です。
検索順位が下がる
同等のコンテンツがある場合、表示速度の遅いページは速いWebサイトよりも低い順位になることがあります。ページが遅い場合、検索エンジンはユーザーエクスペリエンスが悪いと判断し、同じコンテンツであっても、速度の速いページを優先して表示するからです。
また、ページ速度が遅いと、モバイルユーザーにとって特に問題が発生しやすいので、モバイルユーザーの利便性が低下し、検索順位が下がる場合もあります。
Webサイトスピードが遅い原因
Webサイトスピードが遅い原因はいくつか考えられます。
＞「Semrush」で、Webサイト速度を計測する
画像や動画が負荷になっている
一つが、画像や動画が負荷になることです。
画像ファイルのサイズが大きすぎると、読み込みに時間が掛かります。高解像度の画像や動画は、情報をよりダイナミックに表現することはできますが、適切なサイズ、フォーマット（JPEG、PNG、SVGなど）、解像度と圧縮率を使わないと、Webサイトが重くなる原因になります。
外部ファイルが負荷になっている
外部ファイルが多いと、それらをダウンロードするためのHTTPリクエスト数が増えます。これにより、ブラウザとサーバー間の通信回数が増え、ページ読み込み速度が低下します。
また、大きなファイルサイズはダウンロードに時間がかかります。
タグの埋め込みが負荷になっている
タグの埋め込みも、Webサイトの負荷になる可能性があります。例えば、多くの<script>や<img>タグが存在する場合、それぞれブラウザに対して、別々の外部リクエストを発生させるため、ページの読み込み時間が増加します。
もしくは、ウェブフォントを使用する場合、外部のフォントを読み込むためのリクエストが発生し、Webサイトが重くなる可能性があります。
Webサイトスピードをスピードを改善する方法 10選
Google PageSpeed Insights内で紹介されている、Webサイトスピードを改善するための方法を紹介します。
１.ブラウザのキャッシュを利用する
２.gzip圧縮を設定する
３.HTML/JavaScript/CSSを軽量化する
４.画像を最適化する
５.レンダリングを妨げるJavaScriptを削除する
６.ページをスクロール読み込みさせる
７.サーバーのスペックと応答時間を見直す
８.リンク先ページでリダイレクトを使用しない
９.HTTP/2に対応する
10.AMPを実装する※2021年6月AMP優遇が終了
参考：Google｜PageSpeed Insights のルール
１.ブラウザのキャッシュを利用する
ブラウザのキャッシュを活用することで、ページの読み込み速度を向上させることができます。キャッシュは、ブラウザが以前に訪れたWebサイトのリソース（画像、スクリプト、スタイルシートなど）を一時的に保存する機能です。
次回以降に同じページを読み込む際に、サーバーからのリクエストを省略し、キャッシュされたリソースを使用することで、読み込み時間を短縮できます。
２.gzip圧縮を設定する
gzip圧縮とは、ウェブサーバーがテキストベースのファイル（HTML、CSS、JavaScript、XMLなど）を圧縮することです。
gzip圧縮を使用することで、ファイルのサイズが削減され、データの転送時間が短縮されます。これにより、ウェブページの読み込み速度が向上し、ユーザーエクスペリエンスが改善されます。
３.HTML/JavaScript/CSSを軽量化する
HTML、JavaScript、およびCSSを軽量化することも、Webサイト表示速度を改善するためのやり方の一つです。
・HTMLに関しては、不要なタグや属性を削除し、簡潔な構造にすること
・JavaScriptに関しては、コードを圧縮し、不要な空白やコメントを削除すること
・CSSに関しては、使用されていないスタイルを削除し、不要なCSSを排除することが挙げられます。
＞「Semrush」で、Webサイト内の要素サイズを採点する
４.画像を最適化する
画像を最適化することも、ページの表示速度をあげることに役立ちます。
画像の圧縮は主要な手法になります。圧縮を行うことで、画像の品質を劣化させることなく、ファイルサイズを小さくすることができます。
WebPは、Googleが開発した画像フォーマットで、画像圧縮の際に最適なツールだと言われています。画像はもちろん、動画やアニメーションも高圧縮率を持ちながら高品質なファイルを提供してくれます。JPEGやPNGよりも小さいファイルサイズで保存できることが特徴です。また、透過画像もサポートしており、従来のフォーマットであるJPEGでは実現が難しかった透過画像の利用も可能にしてくれます。
ただし、一部の古いブラウザはWebPを正しく表示できないことがあります。圧縮の過度な使用も画質劣化の原因となるため、バランスを保つことが重要です。
５.レンダリングを妨げるJavaScriptを削除する
レンダリングを妨げるJavaScriptを削除することは、Webサイトの読み込み速度とユーザーエクスペリエンスを改善するために重要なステップです。
ページ上で使用されていないコードや、冗長なコードを洗い出し、使用しているJavaScriptライブラリやフレームワークのバージョンを最新のものにアップデートし、パフォーマンスを改善します。
さらに、読み込み速度を監視することで、最適化の余地がある部分を特定すると、よりレンダリングを妨げる要因を特定できます。
６.ページをスクロール読み込みさせる
表示されたタイミングで、Webページ内の全要素を読み込んでしまうと、クロール負荷が大きくなり画面に表示されるまでに時間も要します。
そのため要素の読み込みは、表示されている範囲のHTML／CSS／JavaScript／画像に制限し、スクロールに合わせて段階的な読み込みが有効です。
７.サーバーのスペックと応答時間を見直す
サーバーのスペックとは、CPUのコア数、メモリ容量、ストレージ容量などといった、サーバーが持つ性能や仕様に関する情報です。
それらに十分なリソースが割り当てられているかどうかを確認し、ウェブサーバー（Apache、Nginxなど）の設定を最適化することで、リクエストの処理時間が短縮され、ページの表示速度が早くなります。
８.リンク先ページでリダイレクトを使用しない
リダイレクトは HTTP リクエストとレスポンスのサイクルを増加させ、ページの表示が遅くなる原因となります。
リダイレクトを使用しない場合、直接的にリンク先のページを表示することができるため、ページの読み込み速度は向上します。また、余分なネットワークラウンドトリップや追加のHTTPリクエストも発生しません。
特にモバイルユーザーや低速なネット環境ユーザーにとっては、目的のコンテンツに直接アクセスできるため、ユーザーエクスペリエンスも向上します。
９.HTTP/2に対応する
HTTP/2は、Hypertext Transfer Protocol（HTTP）の次のバージョンであり、インターネット上のデータ通信を行う際に使用されるプロトコルです。
従来のHTTP/1.1よりも効率的なデータ転送を可能にするために設計されているため、ウェブページの読み込み速度の向上に貢献できます。
10.AMPを実装する※2021年6月AMP優遇が終了
AMP（Accelerated Mobile Pages）は、Googleが開発したプロジェクトで、モバイル向けの高速かつ軽量なウェブページを作成するための仕様です。
2021年6月以降、AMPによる検索結果での優遇は終了しましたが、依然としてAMPは高速なモバイルページを構築するための有用なツールです。
また、AMPページはGoogleが提供するAMPキャッシュを利用することができるため、ページの読み込み速度の向上に役立ちます。
サイトスピードを測定できるツール ３選
上記方法の他、ツールを使うことによって、自社WebサイトのWebサイトスピードを把握することもできます。ここから、Webサイトスピードの測定ツールを紹介します。
参考：Google｜PageSpeed Insights、Lighthouse の使用を開始
Page Speed Insights
Page Speed Insightsは、Googleが提供するウェブページのパフォーマンスを測定する無料ツールです。以下の項目に分かれてWebサイトを評価します。
パフォーマンススコア: 0から100のスコアで、ページのパフォーマンスを示します。高いスコアほどパフォーマンスが良いことになります。
読み込み速度の評価: ページの読み込み速度や、ファーストコンテンツフルペイント（FCP）などのメトリクスを示します。
改善提案: ページのパフォーマンスを向上させるための具体的な改善提案を表示します。画像の最適化、キャッシュの利用、JavaScriptやCSSの最適化などが含まれます。
ユーザーエクスペリエンス: ユーザーがページを使用する際のエクスペリエンスに関する情報。例えば、タップターゲットのサイズやコンテンツのレイアウトシフトの有無などが含まれます。
Page Speed Insightsは、ウェブページのパフォーマンスを評価し、改善点を示してくれるため、開発者やウェブマスターがWebサイトのパフォーマンスを向上させるための手助けとなります。
Lighthouse
Lighthouseは、Googleが開発したオープンソースのツールで、ウェブページの品質とパフォーマンスを評価できます。
主に以下のような評価基準に基づいてウェブページを評価します。
パフォーマンス: ページの読み込み速度やレンダリングの効率性など、パフォーマンスに関する評価。
アクセシビリティ: ユーザーの利便性やアクセシビリティに関連する評価。タイトルやalt属性の使用、適切なコントラストなどが含まれます。
ベストプラクティス: セキュリティや標準に準拠した実装に関する評価。HTTPSの使用、適切なコードの実装、最適なパフォーマンスのためのベストプラクティスが含まれます。
SEO（検索エンジン最適化）: ウェブページの検索エンジンへの最適化に関する評価を行います。
ウェブページのURLを入力することで、ページのパフォーマンスと品質を分析し、提案を提示してくれるため、多くのユーザーに利用されています。
Semrush
「Semrush」は、世界1000万人以上のユーザーが利用している、SEO／内部対策／コンテンツマーケティングに対応しているアメリカのツールですが、Webサイトのスピード計測もできます。
Google Page Speed Insightsなどのツールでは刹那的なWebWebサイト調査となりますが、Semrushではエラー項目を記録し続けてくれるため、前回と比較し、改善した部分・悪化した部分の確認が可能です。また、Google Search Consoleで検知されるような内部のエラーをさらに細かく調査することができます。
7日間無料でお試しができ、有料版も$129.95～と低コストで利用できます。カスタマーサクセス（無償）も手厚いので、本格的にSEO対策に取り組みたい方には心強いツールとなるでしょう。
▼▼▼7日間無料トライアル実施中▼▼▼
https://semrush.jp/
まとめ：ページの表示速度を改善し、ユーザビリティ・SEOを高めよう！
今回は、ページの表示速度をあげる改善方法と、Webサイトスピードを測定するツールを紹介しました。
ページの表示速度は、ユーザーエクスペリエンスに深く関わるため、より早い表示速度を目指すことが、Webサイトの改善とユーザー体験の向上に繋ぎます。
上記の改善方法だけでなく、ツールも利用すると、よりWebWebサイトの不足点や問題点を発見しやすく、パフォーマンス改善できるでしょう。
サイトスピードを改善したい方におすすめ
記事内紹介のSEOツール「Semrush」をいますぐお試し！
