Webサイトパフォーマンス向上の基礎知識

Webサイトのパフォーマンスを向上させるうえで、学んでおくべき基礎知識は次の2つです。

• フロントエンド
• サーバーエンド

ここでは上記概要について詳しく解説していきます。

フロントエンドとは？

フロントエンドとは、HTMLやCSS、Javascriptといった技術のことです。簡単にいえば、ページがブラウザに表示された時、ユーザーが視認できる部分のことを指します。

ある程度HTMLの記述が可能な場合、ポイントさえ押さえておけば誰でもWebサイトのパフォーマンスを向上させられます。

サーバーエンドとは？

サーバーエンドとは、名称のとおり、サーバー側の最適化のことです。フロントエンドの反対で、ユーザーが視認できない裏側の部分と解釈すれば分かりやすいと思います。

サーバーサイドはフロントエンドと違って、見るべきポイントが状況によって異なる他、ある程度の専門知識が必要です。そのため、サーバーエンド側からパフォーマンスを向上させるのは簡単ではありません。

Webサイトの表示速度に影響を与える3つの要因

Webサイトの表示速度に影響を与える要因は次の3つです。

• サーバー処理
• レンダリング処理
• ネットワーク処理

それぞれ詳しく解説します。

1.サーバー処理

サーバー処理とは、Webサーバーが要求されたコンテンツの処理を行う時間のことです。サーバーの応答時間が短いほど、Webサイトのパフォーマンスは向上します。

サーバー処理を最適化するために行うべき対策は次のとおりです。

• 高性能なソフトウェア・ハードウェアの選択
• サーバー処理の最適化
• キャッシュの活用

2.レンダリング処理

レンダリング処理とは、WebブラウザがHTMLやCSSなどのコードを解析して、コンテンツを表示させるまでの処理時間のことです。レンダリング処理を高速化させる方法としては、HTML・CSS・Javascriptの最適化や、ファイルの削除など様々なものがあります。

後述している「Webサイトを高速化させる8つのテクニック」の項にて、高速化させる方法を解説しておりますので、詳細はそちらをご確認ください。

3.ネットワーク処理

ネットワーク処理とは、ユーザーとサーバー間で行われるデータ送受信時の処理時間のことです。ネットワークの処理スピードを向上させるためには、通信プロトコルの最適化や、ネットワークの帯域幅や遅延といった、ネットワークの最適化を行う必要があります。

具体的な対策としては、「CDN（コンテンツデリバリーネットワーク）の活用」や「キャッシュの活用」などが挙げられます。

Webサイトを高速化させる7つのテクニック

Webサイトを高速化させるテクニックは次の7つです。

• 各種ファイルの削除
• 画像読み込みをスクロールに合わせる
• Webフォントの最適化
• ブラウザキャッシュの有効期限設定
• AMPの採用
• 画像形式をWebP・AVIFに変換する
• サーバーの切り替え

それぞれ詳しく解説します。

1.各種ファイルの削除

各種ファイルを削除することで、Webサイトを高速化させられます。削除対象となる代表的なファイルは次のとおりです。

• 画像ファイル
• 動画ファイル
• 不要な外部ファイル

Webサイトを読み込む際、データサーバーから受信するデータ量が、最も多いのが画像ファイルです。そのため、不要な画像を削除したり、画像圧縮などによって画像サイズを削除したりして高速化を図る必要があります。

次が動画ファイルです。動画ファイルのサイズは、ビットレートを削除することで、サイズを削減できます。

ビットレートとは、動画・音声が1秒あたり、どの程度データ量使用しているかを意味します。ビットレートが高いほど、高画質・高音質となりますが、その分ファイルサイズも大きくなります。

必要な量までビットレートを修正した動画にすることで、Webサイトの高速化が可能です。

不要な外部ファイルとは、不要なコメントや使用していないコードなどのことです。不要な外部ファイルが多いと、無駄なデータを読み込まないといけないため、その分表示速読が遅くなります。

不要な外部ファイルを削除すれば、読み込むデータ量も削減されるため、Webサイトの高速化を図れる可能性があります。

2.画像読み込みをスクロールに合わせる

画像読み込みをスクロールに合わせる遅延ロードの設定も行うとよいです。遅延ロードとは、ブラウザの画面領域外の画像データのみを読み込み、領域外の画像データは読み込まない設定のことです。

遅延ロードが未設定の場合、画面外の画像ファイルも読み込まれてしまいます。Webページのサイズ容量が大きい場合は、すべて読み込まれるまでに時間がかかるため、表示されるまでに時間がかかる可能性が高いです。

遅延ロードを設定しておけば、必要な画像データのみを読み込んでくれるため、Webサイトを高速化できます。

3.Webフォントの最適化

Webフォントは、リクエスト回数が多く、転送時間を要する要素です。必要なフォントセットのみを使用するなどの対策を講じることで、Webフォントの読み込み時間を短縮できます。

また、font-display記述子を使用する方法があります。Webフォントは読み込みが完了するまで、テキストが表示されません。

そこで活用したいのが、「font-displa」です。CSS内に、「font-display:swap;」という記述を加えておけば、Webフォントが読み込まれるまでの間、仮のフォントがWebページに表示されるため、ユーザビリティの向上が図れます。

4.ブラウザキャッシュの有効期限設定

キャッシュとは、アクセスしたWebサイトのデータをブラウザ内に一時保存する技術です。ユーザーが同じWebサイトに何度もアクセスした場合、キャッシュを設定しておけば、データを再読み込みする手間がなくなるため、初回と比べて短時間でWebサイトを表示できます。

ただし、高速化やユーザビリティを意識して、キャッシュを長期間設定するのはおすすめしません。というのも、キャッシュの情報が原因で、ユーザーが最新のWebサイトへアクセスできない可能性があるからです。

そのため、Webサイトの更新頻度が多い場合は短期間、更新頻度が少ない場合は長期間というように、更新頻度に合わせてキャッシュの有効期限を設定することをおすすめします。

5.AMPの採用

AMP（Accelerated Mobile Pages）とは、Webコンテンツを即座に読み込んで表示する手法のことです。Googleが推奨している手法であり、AMP HTML使用に沿ったAPMページ（Webページ）を作成することで対応させられます。

従来のWebサイト手法とは異なるため、別で作成する手間はかかるものの、AMPを採用すれば、スマホでのWebサイト表示速度を高速化させることが可能です。

6.画像形式をWebP・AVIFに変換する

WebP・AVIFは、従来の画像形式であったPNG・JPEGよりも圧縮率が高い画像形式です。例えば、WebPはPNGよりも26％程度、PEGよりも25〜34％程度、ファイルサイズを軽量化できます。

そのため、画像形式をWebP・AVIFに変換することで、Webサイトの表示速度を高速化させることが可能です。必ずやるべき対策ではありませんが、サイト表示速度測定ツールを活用した際、改善策として提示された場合は実施することをおすすめします。

7.サーバーの切り替え

サーバーの切り替えもWebサイトを高速化させるテクニックの1つです。Webサイトの表示速度はサーバーの応答時間によって大きく変動します。

そのため、これまで紹介したテクニックを行っても高速化ができない場合、信頼性・高速性を備えたサーバーへ切り替えることをおすすめします。

Webサイトのパフォーマンスを向上させるメリット

Webサイトのパフォーマンスを向上させるメリットは次の4つです。

• PV・CVR向上による売上アップ
• 離脱率の低減
• SEO評価を向上させられる
• サーバー側の処理を軽減できる

それぞれ詳しく解説します。

1.PV・CVR向上による売上アップ

Webサイトのパフォーマンスを向上させられれば、ユーザビリティが向上するため、ユーザーはストレスなくコンテンツを閲覧できます。ストレスなくコンテンツを閲覧できれば、購買意欲・情報共有意欲の維持・向上が可能です。

その結果、PV（ページ数）やCVR（コンバージョン率）が向上し、売上アップが期待できます。

2.離脱率の低減

Webサイトが表示されるまでに3秒以上かかると、ユーザーの離脱率が急増することが、調査で分かりました。

Webサイトの高速化によって、パフォーマンスを向上させられれば、ユーザーの待ち時間を短縮できるため、離脱率を低減できます。

3.SEO評価を向上させられる

Googleなどの検索エンジンはユーザビリティ向上の観点から、Webサイトの表示速度を、SEOの評価基準に加えています。つまり、Webサイトを高速化させて、パフォーマンスを向上させれば、検索エンジンからの評価が向上して、上位表示される可能性が高まるということです。

上位表示されれば、ユーザーの流入数も増加するため、売上アップが期待できます。

4.サーバー側の処理を軽減できる

Webサイトが高速化されれば、サーバー側の負荷を軽減できる可能性があります。高速化されたWebサイトであれば、多くのユーザーが同時にアクセスしても、サーバーの応答時間が短縮されるためです。

サーバーのパフォーマンスを維持できれば、Webサイトの安定性も向上させられます。

Webサイトのパフォーマンスを向上させるデメリット

Webサイトのパフォーマンスを向上させるデメリットは次の3つです。

• 管理・更新の手間がかかる
• サーバー切り替え時に操作失敗によるデータ消失リスク
• 画像形式にブラウザが対応していない

端末が古く旧式のブラウザを使用している場合、新しい画像形式に対応していないため、WebP・AVIFを採用してしまうと、画像が掲載されません。新しい画像形式に変換する際は注意が必要です。

Webサイトパフォーマンスの測定方法

Webサイトパフォーマンスの測定方法は次の2つです。

• Lighthouse
• Page Speed Insights

それぞれ詳しく解説します。

1.Lighthouse

Lighthouseとは、Googleの拡張機能の1つで、Webサイト上でパフォーマンスを分析できるツールです。診断項目の1つとしてWebサイトの表示速度も測定できます。

Google Chromeの拡張機能であるため、Chromeウェブストアからインストールする必要がありますが、計測したいWebサイトを開いた状態で速度計測が行えます。Webサイトのデザインも合わせて確認したいという方におすすめのツールです。

2.Page Speed Insights

Page Speed Insightsとは、Googleが提供している無料ツールです。測定したいWebサイトのURLを入力すれば、測定したWebサイトの表示速度をGoogleスコアで可視化してくれます。

モバイルとパソコンそれぞれのスコアが表示されますが、Googleはモバイルファーストなサイトを高く評価しています。そのため、パソコンではなく、モバイルのスコアを重視する必要があります。

また、Page Speed Insightsは診断結果だけでなく、改善案も表示してくれるため、効率的にWebサイトの高速化と、パフォーマンスの向上が可能です。

高速化テクニックでサイトのパフォーマンスを向上のまとめ

Webサイトパフォーマンスを向上させるためには「フロントエンド」と「サーバーエンド」について理解しておく必要があります。しかし、サーバーエンドからアプローチするためには、専門的な知識を要していなければなりません。

そのため、Webサイト担当者が行う施策としては、フロントエンドがメインとなります。ただ、当記事でも解説したとおり、高速化させるテクニックは「各種ファイルの削除」や「Webフォントの最適化」など、様々なものがあります。

むやみに施策を講じても手間がかかるだけで、効率的なパフォーマンス向上は図れません。効率的にパフォーマンスの向上を目指すのであれば、診断ツールを活用してWebサイトを診断後、必要な改善策を講じていくのがおすすめです。