ウェブサイトのページ読み込みや操作、そして全体的な速度は、ユーザー体験に大きな影響を与えます。これを考慮せずにウェブサイトを構築すると、ユーザーがサイトを離れてしまう原因になり得ます。また、ページ内のコンテンツのサイズが制御されていないと、帯域幅（バンド幅）が無駄に消費され、オンラインでの存在感が低下する可能性があります。ここでは、ウェブサイトの速度を保ちつつ、帯域幅を効率的に利用する方法について説明します。

ページサイズ

ページサイズとは、ユーザーが特定のウェブページを訪れた際に読み込むデータの総量を指します。通常、キロバイト（KB）またはメガバイト（MB）で測定され、テキスト、画像、動画、スクリプト、スタイルシート、その他のリソースが含まれます。

小さいページサイズは、特にインターネット接続が遅いユーザーやモバイルデバイスを使用するユーザーにとって、ページの読み込み時間を短縮するために望ましいです。

帯域幅

ご利用のプランでは、一定の帯域幅が割り当てられています。これは、請求サイクル内でウェブサイトから送受信できるデータの最大量を表します。もしプロジェクトのウェブサイトやファネルが帯域幅の制限を超えると、ウェブサイトはオフラインになります。

再びオンラインに戻すためには、アップグレードするか、現在の請求サイクルの終了まで待ち、データ量を0にリセットする必要があります。
※10月1日に月払いで課金ている場合は、11月1日に0になります。30日サイクルとなっております。

どちらにしても、サイトトラフィック（アクセス）に応じた十分なプランを選択するか、ウェブサイトやファネルを訪問する際に必要なデータ量を管理することで、この問題を避けることが最善です。

サイズと帯域幅消費の確認方法

ページの「重さ」を確認する方法は2つあります。ブラウザ内蔵の検証機能を使うか、GTmetrixやPingdomなどのウェブサイト速度テストツールを使用することです。

Chromeなどのブラウザのインスペクトツールを使用するには、ページ上で右クリック -> 検証 ->「Network」タブをクリックし、Ctrl/CMD+Rでページをリフレッシュします。ページが再読み込みされると、下部にある「リソース」欄で、ページが消費するデータ量（MB）が表示されます。

例えば、あるランディングページが4.6MBのサイズだとすると、そのページを開くだけでその分の帯域幅が消費されます。もし10GBの帯域幅が含まれるプランを利用している場合、1か月でおおよそ2000回の訪問が可能です。ただし、多くの訪問者は他のページにもアクセスするため、1回の閲覧セッションで消費する帯域幅は4.6MB以上になる可能性があります。

ページサイズと帯域幅の管理方法

1. 画像サイズの最適化

自動的に画像をWebP形式に変換し、品質を保ちながらサイズを減らす仕組みを導入していますが、画像が無駄に大きく、品質の向上が見込めないケースもあります。画像が1〜2MB以上の場合は、ロスレス画像圧縮ツールを使用してアップロード前にさらにサイズを削減することをお勧めします。画像を圧縮することで、以下の2つのメリットがあります。

• ページが古いデバイスや低速の接続でも高速に読み込まれる
• 画像サイズの最適化により、帯域幅が効率的に使用され、追加のプランやアドオンを購入せずにより多くの訪問者がアクセスできるようになる

ロスレス圧縮ツール3選

■TinyPNG
複数の画像ファイルをドラッグ&ドロップするだけでPNGファイルを最大70％圧縮。透過PINGにも対応しています。同じ画像を圧縮してみて、最も高い圧縮率を弾き出しました。圧縮率も表示され、どれぐらいの軽量化されたか一目で確認することが出来ます。

■kraken.io（Chrome拡張機能）
サイト用の画像をブラウザ上で一括でロスレス圧縮。圧縮された画像は一括でzipファイルでダウンロードすることができます。こちらも圧縮率も表示され、どれぐらいの軽量化されたか一目で確認することが出来ます。

[■Jオンラインイメージ最適化ツール
](https://imagecompressor.com/ja/#google_vignette)オンラインイメージ最適化ツールは、画像最適化とファイル圧縮アルゴリズムを組み合わせて、画質を保ったままに、JPEG、GIFやPNGイメージを最小サイズに圧縮する賢いツール

他にも、ロスレス圧縮ツールと検索をすると色々と出てきますので、ご自身の合うものを探してください。

2. カスタムコードの追加

カスタムコードの追加や外部ツールやウィジェットを使用する際には注意が必要です。これらを追加することでプラットフォームの機能を拡張できますが、過剰に使用したり、未検証のコードを使用すると逆効果になることがあります。外部ソースとの接続に時間がかかり、読み込み時間が遅れることがあり、ビルダーと互換性がない場合、コードが全く読み込まれないこともあります。

信頼できるソースからのコードのみを使用し、あまり多用しないようにして、ウェブサイトの読み込み速度やパフォーマンスを損なわないようにしましょう。

いくつかのヒント

1. オンライン速度テストツールに過度に依存しない
   疑問がある場合は速度テストツールを活用することをお勧めしますが、主にリアルなシナリオでのテストを優先しましょう。さまざまなデバイスやブラウザで手動でウェブサイトを読み込み、正確な洞察を得ることが重要です。多くのツールはバックエンドでの遅延を報告し、実際のユーザーには発生していない読み込み時間を過大に報告することがあります。

2. モバイルデバイスでのパフォーマンス
   デフォルトでプラットフォームはモバイル最適化に対応していますが、モバイルでデスクトップ版よりもパフォーマンスが低下している場合、一部のブロックを「モバイル専用」に変換することを検討してください。これにより、そのブロックに追加されたコンテンツがモバイル向けに最適化され、特に画像を含む場合に効果的です。

ダッシュボード一覧

プロジェクトの変更方法

管理者の追加方法について

ページサイズ、速度、そして帯域幅の消費

更新日 18/10/2024