サイトパフォーマンス:パフォーマンス重視のウェブサイトをデザインする

読了時間:3分
関連性があり、整理されたコンテンツを含むサイトページは、通常、読み込み時間が短縮され、サイト訪問者のエクスペリエンスがよりスムーズになります。
スクロールせずに見える範囲(Above the fold)を最適化したり、専用ページを作成するなど、以下のデザインのヒントに従って、ページのパフォーマンスを向上させましょう。
この記事では、下記の項目について説明します:
ヒント:
通常、訪問者が最初に目にするページであることから、ホームページに特に注意を払うことをおすすめします。

パーツが読み込まれる順序

サイトのパーツは特定の順序で読み込まれます。静的、または低解像度のパーツは、重いパーツやインタラクティブパーツよりも速く読み込まれます。
パーツがサイトで読み込まれる順序は次のとおりです:
  1. 静的:テキストやシェイプなど、低解像度で通常はアニメーション化されないパーツ。
  2. 流体:コンテンツの量が多く、画像や動画など、高解像度のパーツです。
  3. インタラクティブ:インタラクティブコンテンツで、iFrame やサードパーティ製アプリなどの外部コードが含まれる場合があります。
サイトを構築し、コンテンツを追加する際は、読み込み順序に留意してください。読み込みの一番速いパーツを スクロールせずに見える範囲(Above the fold セクション)に追加することをおすすめします。

スクロールせずに見える範囲

スクロールせずに見える範囲は、訪問者がスクロールすることなく表示できるセクションで、通常はサイトで最初に読み込まれる部分です。
必要な静的要素のみを追加し、このセクションのデザインはシンプルで適切なものにすることをおすすめします。
サイトの折り目セクションの上に追加することをおすすめします:
  • テキスト:テキストは訪問者にサイトページやブランドについて明確に説明します。さらに、検索エンジンによってインデックスされ、サイトの SEO を改善することができます。システムフォントを使用し、異なるフォントファミリーや太さを使いすぎないことおすすめします。サイトのテキストを最適化する方法はこちら
  • CTA(行動喚起):CTA は、購入や会社への連絡など、訪問者がサイトで必要な行動を取るのに役立つボタンとリンクです。 CTA は明確に定義する必要があり、訪問者の注意をそらす可能性のあるパーツは追加しないことをおすすめします。

ギャラリー、動画、アニメーション

流体で高解像度のパーツは、サイトに躍動感を加えます。しかしながら、サイトの読み込み時間が長くなり、パフォーマンスに影響を与える可能性があります。
これらのパーツには注意が必要です。必要な場合にのみ使用し、サイトのスクロールせずに見える範囲に追加しないようにしてください。

専用ページとページの長さ

Wix では、サイトに追加できるさまざまなアプリを用意しており、それには、ストア、ブログ、ビデオなどがあります。
これらのアプリには、サイトのホームページではない専用ページを用意することをおすすめします。これにより、ホームページが過負荷になるのを防ぐことができます。ボタン、メニューアイテム、リンクなどのパーツを使用して、ホームページからこれらの専用ページにリンクできます。
また、専用ページを追加すると、ページの長さを短くすることができます。これは、サイトページ全体を表示するために訪問者がスクロールする必要がある画面の数です。必要なコンポーネントのみを追加し、CTA の使用を最適化することで、ページの長さを 8画面以下に保つことをおすすめします。

ボタン

ボタンを使用すると、サイトのパフォーマンスを損なうことなく、コンテンツをプレビューできます。
訪問者にサイトコンテンツのサンプルを見せる静的パーツ(テキストなど)をホームページに追加し、それぞれのページにリンクするボタンを追加します。例としては「ブログをチェック」、「続きを読む」、「今すぐ購入」などがあります。

お役に立ちましたか?

|