Webサイトパフォーマンス向上の基礎知識
Webサイトのパフォーマンスを向上させるうえで、学んでおくべき基礎知識は次の2つです。
- フロントエンド
- サーバーエンド
ここでは上記概要について詳しく解説していきます。
フロントエンドとは？
フロントエンドとは、HTMLやCSS、Javascriptといった技術のことです。簡単にいえば、ページがブラウザに表示された時、ユーザーが視認できる部分のことを指します。
HTMLを編集できても、変更が必要な範囲はページの作りによって異なります。まず診断結果を確認し、表示や必要な機能に影響しない方法を制作担当者と検討しましょう。
サーバーエンドとは？
サーバーエンドとは、名称のとおり、サーバー側の最適化のことです。フロントエンドの反対で、ユーザーが視認できない裏側の部分と解釈すれば分かりやすいと思います。
サーバーサイドはフロントエンドと違って、見るべきポイントが状況によって異なる他、ある程度の専門知識が必要です。そのため、サーバーエンド側からパフォーマンスを向上させるのは簡単ではありません。
Webサイトの表示速度に影響を与える3つの要因
Webサイトの表示速度に影響を与える要因は次の3つです。
- サーバー処理
- レンダリング処理
- ネットワーク処理
それぞれ詳しく解説します。
1.サーバー処理
サーバー処理とは、Webサーバーが要求されたコンテンツの処理を行う時間のことです。サーバーの応答時間が短いほど、Webサイトのパフォーマンスは向上します。
サーバー処理を最適化するために行うべき対策は次のとおりです。
- 高性能なソフトウェア・ハードウェアの選択
- サーバー処理の最適化
- キャッシュの活用
2.レンダリング処理
レンダリング処理とは、WebブラウザがHTMLやCSSなどのコードを解析して、コンテンツを表示させるまでの処理時間のことです。レンダリング処理を高速化させる方法としては、HTML・CSS・Javascriptの最適化や、ファイルの削除など様々なものがあります。
後述の「Webサイトを高速化させる7つのテクニック」で、改善方法と注意点を紹介します。診断で見つかった問題に関係する項目から確認してください。
3.ネットワーク処理
ネットワーク処理とは、ユーザーとサーバー間で行われるデータ送受信時の処理時間のことです。ネットワークの処理スピードを向上させるためには、通信プロトコルの最適化や、ネットワークの帯域幅や遅延といった、ネットワークの最適化を行う必要があります。
具体的な対策としては、「CDN（コンテンツデリバリーネットワーク）の活用」や「キャッシュの活用」などが挙げられます。
Webサイトを高速化させる7つのテクニック
Webサイトを高速化させるテクニックは次の7つです。
- 各種ファイルの削除
- 画像読み込みをスクロールに合わせる
- Webフォントの最適化
- ブラウザキャッシュの有効期限設定
- AMPの採用
- 画像形式をWebP・AVIFに変換する
- サーバーの切り替え
それぞれ詳しく解説します。
1.各種ファイルの削除
使っていないファイルの読み込みを減らすと、転送量や処理を減らせる場合があります。公開前に、ほかのページや機能で必要とされていないかを確かめます。見直しの対象には、次のようなものがあります。
- 画像ファイル
- 動画ファイル
- 不要な外部ファイル
画像は、ページの転送量が大きくなる原因の一つです。不要な画像の読み込みを減らすほか、表示する大きさに合う寸法や画質を選びます。画像が常に最も重いとは限らないため、診断結果や実際の転送量を確認しましょう。
動画も転送量が大きくなる場合があります。ビットレートを下げると容量を減らせますが、文字の読みにくさや映像・音声の劣化がないか、用途に合わせて確認します。
ビットレートとは、動画・音声が1秒あたり、どの程度データ量使用しているかを意味します。ビットレートが高いほど、高画質・高音質となりますが、その分ファイルサイズも大きくなります。
必要な量までビットレートを修正した動画にすることで、Webサイトの高速化が可能です。
JavaScriptやCSSなどは、使っていない部分を減らす余地がないか確認します。コメントを消すことと、不要な外部ファイルの読み込み自体を止めることは別です。削除前に、フォームやメニューなど必要な動作への影響を確認しましょう。
不要な外部ファイルを削除すれば、読み込むデータ量も削減されるため、Webサイトの高速化を図れる可能性があります。
2.画像読み込みをスクロールに合わせる
遅延読み込みは、最初の画面から離れた位置にある画像の読み込みを、表示領域へ近づくまで待たせる仕組みです。画面内の画像だけを先に表示したい場合に使います。画面外の画像を先に読み込む、という意味ではありません。
ただし、最初に見えるメイン画像などまで遅延させると、表示が遅くなることがあります。特に、ページ内の主な内容が表示されるまでの時間に関わる画像は、遅延対象にしないよう確認します。
画像を遅延させる場合も、表示する領域をあらかじめ確保し、読み込み時に文章やボタンがずれないかを確認します。すべての画像に一律で設定せず、最初の画面とスクロール後の画面を分けて確かめましょう。
3.Webフォントの最適化
Webフォントは、使う書体・太さ・文字の範囲によって読み込む量が変わります。必要なものに絞り、文字の表示を待たせていないかを確認します。
文字がWebフォントの読み込みを待って見えなくなるか、代わりのフォントで表示されるかは、font-displayなどの指定によって異なります。Webフォントの使用中は必ず文字が表示されない、というわけではありません。
例えば制作担当者が、フォントを定義する@font-face内に「font-display: swap;」を指定すると、代わりのフォントを表示し、読み込み後に切り替える動作になります。ただし、切り替えで文字幅や行数が変わる場合があるため、見た目も確認が必要です。
4.ブラウザキャッシュの有効期限設定
キャッシュとは、アクセスしたWebサイトのデータをブラウザ内に一時保存する技術です。ユーザーが同じWebサイトに何度もアクセスした場合、キャッシュを設定しておけば、データを再読み込みする手間がなくなるため、初回と比べて短時間でWebサイトを表示できます。
キャッシュの期間を長くすること自体が問題とは限りません。内容を更新した際に別のファイル名・URLへ切り替えられる画像やCSSなどは、長く保存する設計もできます。一方、同じURLの内容を更新する場合は、古い内容が残らない仕組みが必要です。
HTMLや画像などの種類、更新方法、ログイン後の個別情報かどうかを分けて、有効期限や再確認の方法を決めます。単にサイト全体の更新頻度だけで、一律に短期・長期を設定しないようにしましょう。
5.AMPの採用
AMPは、AMP HTMLなどの仕様を用いてWebページを作る方法です。現在のGoogle検索では、AMPかどうかにかかわらず同じ基準でページが扱われます。検索順位を上げるために必ず採用するものではありません。
AMPを採用する場合は、必要な表示や操作に対応できるか、通常のページと内容をそろえて更新できるかを確認します。既存ページの画像や処理を改善する方法とも比べ、運用の手間を含めて判断しましょう。
6.画像形式をWebP・AVIFに変換する
WebPやAVIFは、画像を軽量化する際の選択肢です。GoogleのWebP紹介には、PNGに対する可逆圧縮で26％、同等の画質条件のJPEGに対する非可逆圧縮で25〜34％小さいという比較値があります。ただし、すべての画像が同じ割合で小さくなるという保証ではなく、この数値をAVIFにもそのまま当てはめることはできません。
形式だけを一律に変えるのではなく、変換前後の容量・画質・表示サイズと、利用する端末での対応を比べます。元画像より重くなる場合や、必要な表示に問題が出る場合まで変換する必要はありません。
7.サーバーの切り替え
サーバーの応答が遅いことが原因なら、処理や契約環境の見直しが候補になります。ただし、ページの表示速度は画像やブラウザ側の処理、通信条件などにも影響されます。遅さの原因を、サーバーだけと決めつけないようにしましょう。
サーバーを切り替える前に、応答時間と処理状況を確認し、現在の環境で改善できる範囲を調べます。切り替えが必要な場合も、移行費用や作業中の影響、動作確認まで含めて比較しましょう。
Webサイトのパフォーマンスを向上させるメリット
Webサイトのパフォーマンスを向上させるメリットは次の4つです。
- PV・CVR向上による売上アップ
- 離脱率の低減
- SEO評価を向上させられる
- サーバー側の処理を軽減できる
それぞれ詳しく解説します。
1.PV・CVR向上による売上アップ
Webサイトのパフォーマンスを向上させられれば、ユーザビリティが向上するため、ユーザーはストレスなくコンテンツを閲覧できます。ストレスなくコンテンツを閲覧できれば、購買意欲・情報共有意欲の維持・向上が可能です。
待ち時間を減らすことは、ページを見たり申し込んだりしやすくするための改善です。ただし、PV（ページの閲覧回数）やCVR（問い合わせ・購入などに至った割合）、売上が必ず増えるわけではありません。改善前後の利用状況を分けて確かめます。
2.離脱率の低減
「3秒を超えると、どのサイトでも一律に離脱が急増する」とは判断しないようにしましょう。待ち時間の影響は、利用者の目的や端末、通信環境によって異なります。自社のページでどこを待たせているかを確認することが先です。
不要な待ち時間を減らすことは、閲覧を続けやすくする取り組みです。離脱が減ったかは別に確かめ、速度だけを原因として成果を断定しないようにしましょう。
3.SEO評価を向上させられる
Googleは、Core Web Vitalsなどを検索のランキングに利用すると案内しています。ただし、PageSpeed InsightsやLighthouseの点数が上がれば、検索順位も上がるという関係ではありません。内容の役立ちやすさなども含めて評価されます。
診断の点数、検索からの訪問、問い合わせや売上は分けて確認します。点数を上げることだけを目的にせず、必要な情報を見つけ、申し込みまで進めるかも確かめましょう。
4.サーバー側の処理を軽減できる
キャッシュの活用などでサーバーへ届く要求や処理を減らせれば、負荷を軽減できる場合があります。一方、画像の表示やブラウザ側の処理を速くしただけで、サーバーの処理量まで自動的に減るわけではありません。
サーバーのパフォーマンスを維持できれば、Webサイトの安定性も向上させられます。
Webサイトのパフォーマンスを向上させるデメリット
Webサイトのパフォーマンスを向上させるデメリットは次の3つです。
- 管理・更新の手間がかかる
- サーバー切り替え時に操作失敗によるデータ消失リスク
- 画像形式にブラウザが対応していない
端末が古く旧式のブラウザを使用している場合、新しい画像形式に対応していないため、WebP・AVIFを採用してしまうと、画像が掲載されません。新しい画像形式に変換する際は注意が必要です。
Webサイトパフォーマンスの測定方法
Webサイトパフォーマンスの測定方法は次の2つです。
- Lighthouse
- Page Speed Insights
それぞれ詳しく解説します。
1.Lighthouse
Lighthouseは、Webページのパフォーマンスなどを自動で調べるオープンソースのツールです。Chromeに付属する開発者ツールから利用でき、拡張機能の追加は必須ではありません。
Chromeで対象ページを開き、開発者ツールの「Lighthouse」から条件を確認して診断します。端末の負荷や拡張機能などで結果が変わることがあるため、改善前後は条件をそろえて比較しましょう。
2.Page Speed Insights
PageSpeed Insightsは、Googleが提供するページの診断ツールです。URLを指定すると、一定条件でのLighthouse診断と、十分なデータがある場合の実ユーザーデータを確認できます。スコアを、Googleによるサイト全体の採点と受け取らないようにしましょう。
モバイルとパソコンは、それぞれの条件で確認します。モバイルの診断スコアが高いだけで検索評価が決まるわけではありません。また、過去28日間の実ユーザーデータは現在の単発診断と期間・条件が違うため、分けて読みましょう。
また、Page Speed Insightsは診断結果だけでなく、改善案も表示してくれるため、効率的にWebサイトの高速化と、パフォーマンスの向上が可能です。
高速化テクニックでサイトのパフォーマンスを向上のまとめ
Webサイトパフォーマンスを向上させるためには「フロントエンド」と「サーバーエンド」について理解しておく必要があります。しかし、サーバーエンドからアプローチするためには、専門的な知識を要していなければなりません。
そのため、Webサイト担当者が行う施策としては、フロントエンドがメインとなります。ただ、当記事でも解説したとおり、高速化させるテクニックは「各種ファイルの削除」や「Webフォントの最適化」など、様々なものがあります。
むやみに施策を講じても手間がかかるだけで、効率的なパフォーマンス向上は図れません。効率的にパフォーマンスの向上を目指すのであれば、診断ツールを活用してWebサイトを診断後、必要な改善策を講じていくのがおすすめです。
参考資料（2026年10月30日確認）：Chrome：Lighthouseの利用方法／Google：PageSpeed Insightsの読み方／web.dev：画像の遅延読み込み／MDN：font-display／MDN：HTTPキャッシュ／Google：AMPの扱い／Google：WebPの比較条件／Google：ページ体験と検索結果。
