読み込みを高速化し、パフォーマンスを向上させるためにページを最適化する方法

ClickFunnels の スタイル ガイド を使用すると、パフォーマンスを最適化しながら、ページ全体で一貫したデザインを維持することができます。スタイルガイドでは、個々の要素をカスタマイズする代わりに、フォント、色、ボタンデザインなどのグローバルスタイルを定義し、ワークスペース全体に自動的に適用できます。

スタイルガイドがページの最適化をどのように改善するか:

• インラインスタイルを削減します。 スタイル ガイドを使用すると、各要素に繰り返しのインライン スタイルを追加する必要がなくなり、よりクリーンで効率的なコードが得られます。

• 設計の一貫性を合理化します。 一元化されたスタイリングにより、統一感のある外観が保証され、個々の要素を手動で調整する必要性が減り、時間と労力が節約されます。

• 読み込み時間の改善: 個々の要素に適用されるカスタム スタイルが少なくなると、ページ全体の CSS が軽くなり、読み込み時間が短縮されます。

詳細: Getting Started with Styles.

フォントは洗練されたデザインを作成するために不可欠ですが、フォントを使いすぎるとページのパフォーマンスに悪影響を与える可能性があります。ClickFunnels では、使用する各フォントをブラウザーでダウンロードする必要があり、フォントが多すぎると読み込み時間が遅くなる可能性があります。

ClickFunnels のフォントのベスト プラクティス:

• 業界標準に従ってください。 業界のベストプラクティスでは、ページを軽量で効率的に保つために、使用する フォントファミリーは2〜3つ までで、フォントスタイル(標準、太字、斜体など)を制限することをお勧めします。

• スタイルガイドを活用する: ClickFunnels スタイル ガイド を使用して、ワークスペース全体にグローバル フォントを設定し、個々の要素の冗長なフォント スタイルを減らします。

• カスタムフォントを制限する: カスタムフォントやスタイルの多いフォントよりも読み込みが速いため、可能であればデフォルトのフォントまたは最適化された Web セーフ フォントを使用してください。

画像はページ デザインにおいて重要な役割を果たしますが、画像が最適化されていないと読み込み時間が大幅に遅くなる可能性があります。ページをすばやく読み込むには、次の標準的な推奨事項に従ってください。

• 一般的な使用の場合: 画像サイズは可能な限り 500 KB 未満に抑えます。

• より大きなビジュアル(バナーやヒーロー画像など)の場合: 品質を維持しながら 1MB以下 を目指します。

• サムネイルとアイコンの場合: パフォーマンスを最適化するために、これらのファイルは 150 KB 未満に抑えてください。

画像を最適化するためのヒント:

• 画像を圧縮する: TinyPNG、Squoosh、ImageOptim などのツールを使用して、品質を犠牲にすることなくファイル サイズを縮小します。

• 配置のサイズ変更: 画像がページで使用するために適切に拡大縮小されていることを確認します。たとえば、全幅のバナーは 幅が 1920 ピクセルである必要がありますが、小さい画像は縮小できます。

• 適切な形式を選択してください。

  • WebP: すべての画像に強くお勧めします。ClickFunnels は WebP をサポートしており、品質を損なうことなく優れた圧縮を提供します。WebP ファイルは JPEG や PNG よりも大幅に小さいため、ページの読み込みが高速になります。

  • PNG: 透明度やシャープなエッジを持つグラフィックに最適ですが、ファイルサイズが大きくなる傾向があります。

  • JPEG:透明度のない写真や複雑な画像に適しています。JPEG ファイルは PNG よりも小さいですが、WebP よりも効率が低くなります。

詳細情報: Image: Adding and Managing Images.

ClickFunnels の [品質 ] 設定では、圧縮レベルを制御することで、画像の解像度とページ パフォーマンスのバランスをとることができます。画質を下げるとファイル サイズが小さくなり、特にモバイル デバイスやインターネット接続が遅いユーザーにとっては、ページの読み込み速度が向上します。

品質設定を効果的に使用する方法:

• 高品質 (80%+): 商品画像やバナーなどのキービジュアルなど、詳細が重要な場合に使用します。鮮明で高解像度の画像は、複雑な詳細を紹介し、信頼を築き、コンバージョンを高めるのに役立ちます。

• 中品質(50-70%): 一部の圧縮がユーザー エクスペリエンスに影響を与えないビジュアルやセカンダリ イメージをサポートするのに最適です。

• 低品質(50%未満): 鮮明なディテールを必要としない装飾画像や背景に最適で、ページの読み込み時間を短縮するのに役立ちます。

遅延読み込みは、ユーザーの画面に表示されそうになったときにのみ画像やビデオを読み込むことで、ページ速度を向上させるのに役立ちます。これにより、ページの初期読み込み時間が短縮され、特にメディアの多いページでのパフォーマンスが向上します。

ClickFunnelsで遅延読み込みを有効にする方法:

• 画像の場合:

  1. ページに Image 要素を追加します。

  2. 歯車アイコンをクリックして画像設定を開きます。

  3. 遅延 読み込み オプションを「オン」に切り替えます。

• ビデオの場合:

  1. Video 要素を追加し、動画の URL または埋め込みコードを指定します。

  2. ビデオ設定で「 遅延読み込み 」オプションを見つけて「オン」にします。

詳細情報: How to Lazy Load Images and Videos。

セクション、行、要素など、ページに追加するコンテンツの量は、読み込み速度に影響を与える可能性があります。コンテンツを簡潔かつ目的のあるものに保つことで、パフォーマンスが向上し、訪問者にとってよりクリーンで集中的なエクスペリエンスが生まれます。

コンテンツを構成するためのヒント:

1. 重要なコンテンツに優先順位を付ける: 主要な見出し、行動を促すフレーズボタン、重要なビジュアルなど、ページの目標をサポートするコンテンツのみを追加します。ユーザーの注意をそらす可能性のある二次的または重要でない要素でページを過負荷にしないでください。

2. 同様のセクションを繰り返さないでください。 セクションを複製して同じ内容を複数の場所で繰り返すのではなく、一度だけ含めます。たとえば、ページの中央にお客様の声セクションがある場合は、フッターで重複させないようにしてください。これにより、ページが明るくなり、冗長性が回避されます。

3. 最小限のメディアを使用する: 画像、ビデオ、アニメーションはデザインを向上させることができますが、使いすぎるとページの速度が低下する可能性があります。慎重に使用し、重要なポイントを説明したり、ユーザーを引き付けたりするなど、特定の目的を果たすようにしてください。

4. レイアウトをシンプルに保つ: 入れ子になった行と列が少ない、すっきりとした焦点を絞ったデザインを選択してください。レイアウトが複雑だと、ブラウザの処理時間が長くなり、ページのパフォーマンスが低下する可能性があります。

モバイルまたはデスクトップビュー専用のセクションを複製すると、ページ速度に悪影響を与える可能性があります。1 つのデバイスでセクションが非表示になっている場合でも、バックグラウンドで読み込まれるため、ページ サイズが大きくなり、パフォーマンスが低下します。これにより、特にインターネット接続が遅いモバイル デバイスでは、読み込み時間が長くなる可能性があります。

代替ソリューション:

• モバイル固有のプロパティを使用する: ClickFunnels エディターの特定のコンテナには、モバイルのカスタマイズ用に明示的に設計されたプロパティ (パディング、配置、余白、フォント サイズ、アイコン サイズなど) が含まれています。これらのプロパティを使用すると、小さな画面に効果的にフィットするようにコンテンツを調整できます。モバイル最適化手法の詳細については、 hereをご覧ください。

• フレックスレイアウトを使用する: ClickFunnels の Flex レイアウトを使用すると、重複するセクションを作成することなく、さまざまな画面サイズの要素の位置と表示を制御できます。たとえば、単一のレイアウト内で配置、間隔、可視性を調整できるため、設計プロセスが簡素化されます。Flexコンテナ hereの詳細をご覧ください。

• カスタムCSS: 数行のカスタム CSS を使用して、モバイルまたはデスクトップ ビューの特定の要素を非表示にしたり調整したりできます。このアプローチでは、同じ結果を達成しながら、セクション全体の重複を回避できます。CSS hereの追加の詳細については、こちらをご覧ください。

ヒント：

重複するセクションを作成する前に、Flex レイアウトまたは CSS を使用して目的のデザインを実現できるかどうかを評価してください。これらのテクニックは、ページ構造を合理化し、全体的な読み込み速度を向上させるのに役立ちます。

未使用または非表示のコンテンツ (セクション/行/要素) は引き続きバックグラウンドで読み込まれ、パフォーマンスに影響します。

隠されたコンテンツを特定する方法:

• ClickFunnels の エディター レイアウト ナビゲーション を使用すると、「非表示」としてマークされているものを含め、ページ上のすべてのセクション、行、および要素を簡単に表示できます。
  

• 非表示のコンテンツには、テスト用に作成されたセクションや、使用されなくなったがデザインにまだ存在するコンテンツが含まれる場合があります。

次のタスク:

• 不要になった要素やセクションを見つけた場合は、それらを削除してページ サイズを小さくし、読み込みを高速化します。

• 非表示の各要素を確認して、その要素がまだ目的を果たしているかどうか、または完全に削除できるかどうかを判断します。

アニメーションはページに視覚的な魅力を加え、ユーザー エンゲージメントを高めることができますが、過剰または最適化されていないアニメーションはページのパフォーマンスに悪影響を与える可能性があります。アニメーションは追加の CSS または JavaScript に依存することが多く、ブラウザのワークロードが増加し、特にモバイル デバイスでは読み込み時間が遅くなる可能性があります。

アニメーションがページ速度に与える影響:

• 複数のアニメーションや複雑なアニメーションでは、より多くの処理能力が必要となり、レンダリングが遅くなり、ユーザー エクスペリエンスに悪影響を及ぼします。

• 過剰なアニメーションは、特にハードウェアやインターネット接続が遅いデバイスでは遅延を引き起こす可能性があります。

カスタム CSS や JavaScript などの外部コードを追加すると、ページのデザインと機能を強化できますが、過剰または不必要なコードを使用すると、ページのパフォーマンスが大幅に低下する可能性があります。

1. ページの読み込みに影響を与える外部コードの削減

   • サードパーティのウィジェットや追跡ツールなどの外部スクリプトは、外部サーバーに依存するため、読み込み時間が長くなる可能性があります。

   • ページに必要なスクリプトのみを使用し、Google PageSpeed Insights などのツールを使用してページ速度への影響をテストします。

2. 過剰な CSS コードを避ける

   • カスタム CSS を大量に使用すると、特に最適化が不十分な場合、ページ サイズと処理時間が長くなる可能性があります。

   • カスタム コードの必要性を減らすには、CSS を簡潔に保ち、可能な限り ClickFunnels に組み込まれているページ エディターのデザイン要素を使用します。

3. サイトのヘッダーとフッターのトラッキング コードを制限する

   • ClickFunnels のサイト アプリのヘッダーとフッターの領域は、ファネル、ランディング ページ、ブログなどを含むワークスペース内のすべてのページに適用されます。ここに不要な追跡スクリプトを追加すると、ワークスペース内のすべてのページの速度が低下する可能性があります。

トラッキングコードのベストプラクティス:

• サイトアプリのヘッダー/フッターには、Google アナリティクスや Facebook Pixel などの 重要なトラッキング コードのみ を含めます。

• サイト アプリの設定に適用するのではなく、ページ固有の追跡または機能に必要なスクリプトをそのページに直接追加します。

iFrame は、カレンダー、フォーム、サードパーティ ツールなどの外部コンテンツをページに直接埋め込むのに役立ちます。ただし、iFrame を使いすぎたり、重いコンテンツを埋め込んだりすると、ページ速度に悪影響を与える可能性があります。これは、iFrame が独自のリソース セット (HTML、CSS、JavaScript) を個別にロードし、ページの全体的な読み込み時間が長くなるためです。