ウェブサイトを運営していると、帯域幅という用語を聞くことがあります。帯域幅は、サイトが訪問者に送信するデータ量(データ転送量)を意味し、ページが読み込まれたり、画像が表示されたり、動画が再生されたりするたびに消費されます。

Kinstaにおけるサーバー帯域幅は、オリジンサーバーが訪問者に直接配信するデータを指します(CDN転送量は、KinstaのCDNがCloudflareのネットワークから画像、CSS、またはJavaScriptのようなキャッシュされたファイルを配信する際に発生)。

サーバー帯域幅の数値は、訪問者のリクエストに応答してサーバーが送信する実際のデータが反映されるため、パフォーマンスとプランの使用状況を評価する際に重要になります。

サーバーの処理負荷は少なければ少ないほど、サイトのパフォーマンスが高まります。そこで今回は、サイトで消費する帯域幅を減らして、サイトの読み込みを高速化するのに役立つツールをご紹介します。

Kinstaでサーバー帯域幅にカウントされるもの

訪問者がサイトにアクセスすると、ブラウザはメインのHTMLファイル、複数のCSSファイル、JavaScript、画像、フォント、そして場合によっては動画をリクエストします。

これらリクエストは全て、サーバーにデータの転送を要求するものであり、このデータ転送量がサーバー帯域幅の使用量となります。

Kinstaでは、すべてのデータ転送量がカウントされるわけではありません。例えば、コンテンツデリバリネットワーク(CDN)エッジキャッシュを利用すると、リクエストがエッジで処理され、サーバー帯域幅を消費することがなくなります。また、WordPressのログインページへのアクセス、一般的なボットやクローラーも自動的に除外されます。

KinstaのコントロールパネルMyKinstaで表示される帯域幅の数値(ユーザー名>「企業の設定」>「分析」>「サーバー帯域幅」)は、実際の訪問者のリクエストに応じてオリジンサーバーが送信するデータを反映しています。

MyKinstaに表示されるサーバー帯域幅チャート
MyKinstaに表示されるサーバー帯域幅チャート

つまり、CDNとエッジキャッシュにトラフィックを分散できれば、サーバーの負荷が軽減されます。

KinstaのCDNで負荷を軽減する

先に触れた通り、サーバー帯域幅を減らす手っ取り早い方法は、サーバーの処理負荷を軽減すること。これには、CDNが役に立ちます。

Kinstaでは、すべてのプランにCDNが標準付帯しており、Cloudflareの巨大なグローバルネットワークを利用できます。訪問者がオリジンサーバーから直接ファイルを取得する代わりに、静的コンテンツ(画像、CSS、JavaScript、フォント、PDFなど)はキャッシュされ、訪問者の最寄りのデータセンターから配信されます。

サイトのコンテンツが世界中のサーバーに保存されるCDNの仕組み(出典:Nitropack)
サイトのコンテンツが世界中のサーバーに保存されるCDNの仕組み(出典:Nitropack

CDNを利用することで、世界中のユーザーにサイトをより高速配信できるだけでなく、オリジンサーバーの負荷が軽減され、帯域幅を大幅に節約することができます。

Kinstaでは、CDNがデフォルトで有効化されますが、MyKinstaにログイン後、「WordPressサイト」>(サイト名)>「キャッシュ」>「CDN」タブで「CDNを利用する」をクリックして簡単に利用することができます。

MyKinstaのキャッシュ画面でCDNを利用する
MyKinstaのキャッシュ画面でCDNを利用する

表示されるモーダルで「CDNを利用する」を再度クリックして完了です。

モーダルでCDNの有効化を確定
モーダルでCDNの有効化を確定

これで、5GBまでの静的ファイルが訪問者の最寄りのデータセンターから配信されるようになります。なお、サードパーティのCDNサービスを利用している場合は、競合を避けるため無効にしてください。

KinstaのCDNは、サイトのメインドメインをそのまま使用するため、URLの見栄えがよく、将来サーバーを変更することになった場合にも、画像などのファイルが引き続き使用できるため便利です。

さらに、画像が自動で最適化されます。これについては、次のセクションで詳しく見ていきます。

組み込みの最適化機能で画像を圧縮

画像は、サイトの帯域幅使用量の大部分を占めることがよくあります。画像を最適化することで、読み込み時間が短縮されるだけでなく、データの転送を減らして帯域幅の消費量を削減することができます。

MyKinstaの「CDN」画面で「画像最適化」セクションの「設定」をクリックします(CDNを利用していない場合は、まずはCDNの有効化が必要です)。

MyKinstaのCDN画面で画像最適化を設定
MyKinstaのCDN画面で画像最適化を設定

画像最適化を設定すると、画像がWebPのような軽量な形式に自動変換することができ、元画像より小さくなる場合はこの形式が配信されます。

最適化の方式は、各ピクセルの鮮明さを維持する可逆圧縮、または画質よりもサイズの圧縮を優先する非可逆圧縮のいずれかを選択できます。

画像の最適化方法を選択
画像の最適化方法を選択

いずれにしても、どちらにしても、これらの最適化されたバージョンはディスク容量にカウントされず、エッジにキャッシュされます。

KinstaのCDNと画像最適化は、一度設定すれば、手間要らずでパフォーマンスを改善することができます。コードに触れることなく読み込みを高速化し、リクエストの量を減らして大幅に帯域幅を削減することが可能です。

エッジキャッシュでフルページを高速配信

静的ファイルの処理をCDNに分散しても、当然ページ自体の配信は必要です。サーバーは通常、訪問者にその都度ページの完全なHTMLを転送することになります。これに役立つのが、エッジキャッシュです。

Kinstaのエッジキャッシュは、CDN同様すべてのプランに標準搭載されており、サイトのキャッシュされたHTMLを保存して、Cloudflareのグローバルネットワークに分散します。

訪問者がページを読み込む際は、オリジンサーバーが応答する代わりに、Cloudflareの300以上のエッジロケーションの1つからページを配信することができます。

KinstaのWordPressサーバーのアーキテクチャ
KinstaのWordPressサーバーのアーキテクチャ

これにより、読み込み時間が短縮され、オリジンサーバーの処理負荷が軽減されます。

MyKinstaでエッジキャッシュを有効にするには、「WordPressサイト」>(サイト名)>「キャッシュ」>「エッジキャッシュ」タブで「利用する」をクリックします。

MyKinstaのキャッシュ画面でエッジキャッシュを有効化
MyKinstaのキャッシュ画面でエッジキャッシュを有効化

有効にすると、キャッシュされたページはデフォルトで24時間、エッジキャッシュ経由で配信されます。コンテンツが頻繁に更新されない場合は、「サーバーキャッシュ」タブで「キャッシュの有効期限を変更する」をクリックして、この有効期限を変更することができます。

MyKinstaのサーバーキャッシュタブでキャッシュの有効期限を変更
MyKinstaのサーバーキャッシュタブでキャッシュの有効期限を変更

表示されるモーダルで任意の有効期限を選択し、「有効期限を変更」をクリックします。

MyKinstaでキャッシュの有効期限を変更
MyKinstaでキャッシュの有効期限を変更

なお、キャッシュのクリアはMyKinsta、WordPress管理画面、またはWP-CLIからいつでも実行可能です。

Kinsta MUプラグインを使ってWP管理画面でキャッシュをクリア
Kinsta MUプラグインを使ってWP管理画面でキャッシュをクリア

エッジキャッシュの効果は凄まじく、テストを行なった際、エッジキャッシュを使用するサイトでは、ページの読み込み時間がほぼ半分に削減、TTFB(Time to First Byte)は50%以上短縮しました。もちろん、Cloudflareのネットワークから配信されるため、サーバーの帯域幅使用量も削減されます。

このように、CDNとエッジキャッシュを導入することで、訪問者のブラウザが必要とする静的ファイルとHTMLページのほぼすべてを分散することができます。サイトが高速化され、サーバーの負荷も軽減されるため、いいことづくしです。

アセットの保護(直リンク禁止+国別ブロック)

ここまではコンテンツを効率的に配信する方法を取り上げましたが、不要なトラフィックで帯域幅を消費するのも避けたいところ。これにも役立つ機能があります。

直リンクの禁止

直リンクは、他のサイトが自分のサイトのサーバーでホスティング画像やファイルを直接埋め込むことを意味します。一見、大した問題ではないように思えますが、膨大な量の帯域幅を消費する可能性があります。

以前、ハフポスト(旧ハフィントン・ポスト)が漫画家Matthew Inman氏のウェブサイト、The Oatmealに掲載されている画像を直リンクし、同氏のサーバー請求額が膨れ上がるということがありました。これを受け、同氏は直リンクされていた画像を実際の請求額と皮肉なメッセージを載せた画像に差し替えました。

ハフポストの直リンクを皮肉った画像
ハフポストの直リンクを皮肉った画像

直リンクは、リンク元のサイトにコストとリソースを発生させることになります。

Kinstaをご利用で、他のサイトからの直リンクを防ぎたい場合は、カスタマーサポートまでご連絡ください。サポートスタッフが直リンク保護を設定します。

国別許可リスト

日本国内のユーザーのみを対象にしたサービスを提供しているなど、サイトを特定の国にのみ配信したい場合、それ以外の地域からのリクエストへの応答は帯域幅の浪費ともいえます。

この場合は、国別許可リストを利用するのが効果的かもしれません。Kinstaでは、カスタマーサポートにその旨を伝えると、不要なトラフィックをエッジでブロックし、帯域幅の使用を特定の地域に集中させることができます。

この2つの対策は、シンプルですが強力です。帯域幅の消費量を減らし、コンテンツを守り、サーバーの負担を軽減しながら、訪問者に最高のエクスペリエンスを届けることができます。

まとめ

Kinstaでは、サーバー帯域幅の消費量を効果的に抑えることができます。

またMyKinstaでは、サイトの帯域幅の使用量を長期的に追跡し、日々の傾向を比較して、どれだけ削減できているかを正確に把握することができます。そのため、毎月リソースの使用量を柔軟に制御することが可能です。

まずはCDNかエッジキャッシュを利用して、その数日後に分析を確認してみてください。読み込み時間が短縮され、サーバーの処理負荷が軽減され、帯域幅の使用量が大きく減少しているはずです。そこから、他のツールを併用して設定を微調整することができます。

プラン選びや帯域幅ベースプランへの切り替えにお悩みの方は、お気軽にご相談ください。WordPressプランの詳細をこちらからご覧いただくか、営業担当が適したプランをご提案させていただくことも可能です。

Joel Olawanle Kinsta

Kinstaでテクニカルエディターとして働くフロントエンド開発者。オープンソースをこよなく愛する講師でもあり、JavaScriptとそのフレームワークを中心に200件以上の技術記事を執筆している。