ページの読み込み速度や対話性、一般的なウェブサイトの速度はユーザー体験にとって非常に重要です。サイト構築時にこれらを考慮しないと、ウェブサイトの成功に大きな影響を及ぼす可能性があります。
訪問者をウェブサイトから遠ざけるだけでなく、使用されるコンテンツのサイズが制御されないことで帯域幅の割り当てを消費し、オンラインでの存在感を制限することもあります。 ここでは、ウェブサイトを高速かつ帯域幅の使用効率を保つ方法について見ていきます。
ウェブページのサイズとは、特定のウェブページをオンラインで訪問した際に読み込む必要のあるデータの総量を指します。これは通常、キロバイト(KB)またはメガバイト(MB)で測定され、テキスト、画像、動画、スクリプト、スタイルシート、その他のリソースなど、ウェブページを構成するすべての要素を含みます。 ウェブページのサイズが小さいほど、特にインターネット接続が遅い人やモバイルデバイスを使用している人にとって、ページの読み込み時間が速くなり、望ましいです。
プランには、ある量の帯域幅が提供されます。この割り当ては、請求サイクルの月間でウェブサイトからのデータの最大転送量を表します。プロジェクトのウェブサイト/ファネルが帯域幅制限を超えた場合、ウェブサイトはオフラインになります。オンラインに戻るには、帯域幅のアドオンを購入するか、現在の請求サイクルの終わりまで待って0にリセットされるまで待つ必要があります。 いずれにしても、ウェブサイトのトラフィックを十分にカバーするプランを選択するか、ウェブサイト/ファネルが訪問された際に交換される必要のあるデータ量を管理することで避けるのが最善です。
ページが「重い」かどうかを確認する方法は2つあります。ブラウザの組み込み「ページ検証」機能を使用するか、GTmetrixやPingdomなどのウェブサイト速度テストツールを使用します。
ブラウザの組み込み検証ツールを使用するには、Chromeなどでページを右クリック -> 「検証」-> 「Network」タブをクリックし、ページをCtrl/CMD+Rでリフレッシュします。下部の統計バーで「resources」と表示されるところで、ページ訪問ごとに消費されるデータのMB数を確認できます。上記の例では、ランディングページのサイズは4.6MBなので、ページを開くだけでその分の帯域幅が消費されます。10GBの帯域幅が含まれるプランを持っている場合、帯域幅がリセットされる前に約2000回の訪問が可能です。ただし、多くの訪問者が他のページにもアクセスするため、ブラウジングセッションの帯域幅消費は1ページ訪問だけよりも多くなり、合計で4.6MB以上になる可能性があることに注意してください。
画像サイズの最適化
画像をWebp形式に自動変換してサイズを削減しつつできるだけ品質を維持することを導入しましたが、画像が品質向上のためではなく無駄に大きい場合があります。画像が1-2MBを超える場合は、アップロード前に無損失画質圧縮ツールを使用してさらにサイズを削減することをお勧めします。画像を圧縮することで、ウェブサイトは古いデバイスや遅い接続でも非常に高速に保たれ、プロジェクトの帯域幅も画像サイズの最適化から大きく恩恵を受け、プランをアップグレードしたりアドオンを追加することなく、より多くの訪問者がアクセスできるようになります。
カスタムコードの追加
確認されていないソースからのカスタムコードの追加や過度の使用は避けてください。外部ツール、ウィジェット、カスタムコードやスクリプトを介したコンテンツの追加はプラットフォームの機能を拡張する良い方法かもしれませんが、過度になると多くの場合、逆効果を生み出します。外部ソースへの接続により読み込み時間が遅れることがあり、場合によってはカスタムコードがビルダーと互換性がなく全く読み込まれないこともあります。 検証済みのソースからのコードのみを使用し、ウェブサイトのコンテンツ読み込み能力やパフォーマンス速度を妨げないようにしすぎないようにしてください。