速いウェブページの読み込み速度とリッチコンテンツのバランスをとる方法

公開: 2021-07-19

速いページ読み込み時間とリッチでインタラクティブなコンテンツはどちらもウェブサイトを成功させるための鍵ですが、2つのバランスをとることは難しい場合があります。

ページの読み込み時間がウェブサイトの成功にとって非常に重要であることは、大きな秘密ではありません。 グーグルの検索アルゴリズムは速い読み込み時間を支持し、ページの読み込み時間のわずかな増加がコンバージョンに悪影響を与える可能性があることを示す多くの研究もあります。 HallamデジタルマーケティングマネージャーのTomWhileyは、昨年、ページの読み込み速度を改善する方法について優れたブログ投稿を書きました。 ホスティングパートナーであるWPEngineは、ページの読み込み速度に関する優れたインフォグラフィックを作成しました。

ウェブサイトはまた、コンバージョンを促進するために、コンテンツ、画像、双方向性が豊富である必要があります。 これは必然的に大きなページにつながり、ページの読み込み時間が自然に遅くなります。

スピードの必要性とリッチコンテンツの需要の間の対立は、設計プロジェクトを停止させる可能性があります。 したがって、両方の要件を満たすバランスを見つけることが重要です。

このブログでは、これら2つの相反する課題のバランスを取るのに役立つアプローチを紹介します。

ページの速度をその目的に関連付ける

Webサイトが適度に成熟した段階に発展するまで、読み込み時間を予測することはできません。そのため、速度の測定と改善には反復的なアプローチを取るのが最善です。

重要な出発点は、サイトのSEOランディングページとそのリッチコンテンツページを特定することです。 その後、SEOページのページサイズと読み込み速度を可能な限り減らすことに集中できます。

同様に、リッチランディングページには、ユーザーとの対話のためにもう少し多くのスペースを許可できます。

適用できる大まかなプロセスは次のとおりです。

  1. 読み込み速度を下げるためのターゲットとなる主要なランディングページを特定します。
  2. 低負荷時間のベストプラクティスを中心に設計します。
  3. 低負荷時間のベストプラクティスに関する機能を決定します。
  4. ページを作成します。
  5. ロード時間を節約する機会を測定して探します。
  6. 必要に応じて4〜5を繰り返します。

これは物語の最初の部分だけをカバーしています。 次に、主要なSEOページを継続的に監視して、ページの読み込み時間が期待どおりに機能していることを確認する必要があります。特に、誰でもページを編集できるコンテンツ管理システムを使用している場合はそうです。

したがって、ウェブサイトを立ち上げた後、従うことができる2つの簡単なステップがあります：

  1. キーランディングキーページの月次チェックを設定して、それらがまだ実行されていることを確認します。
  2. ページが合意されたレベルを下回ったときにトリガーされるページ速度監視ツールを使用します。

負荷速度を最適化するための設計上の考慮事項

サイトのデザインは、ページの読み込み時間を最適化できるかどうかを決定する上で重要な役割を果たします。 Webページに関しては、サイズは本当に重要です。 目的は、ページの読み込み時間を理想的には500k未満に保つことですが、確かに最大で1MB未満に保つことです。

ロード時間を最小限に抑えるための手順は次のとおりです。

  1. 主要なランディングページでの画像の使用を可能な限り最小限に抑えます。 図像とデザインの微妙な使用が同じ効果をもたらす可能性がある場合、画像を使用してページを豊かに見せることは簡単すぎます。
  2. 画像を使用する場合は、許容できない品質の低下がないようにしながら最適化する必要があります。
  3. オーガニック検索用に最適化された無駄のないランディングページを利用し、オーガニック検索の対象とならないより深いページにリッチコンテンツを保持します。
  4. 複数のテンプレートにまたがる多くのユニークで複雑なレイアウトは避けてください。 HTMLマークアップが単純であるほど、ファイルは小さくなります。
  5. 重いJavascriptライブラリに依存する複雑なインタラクティブ要素は避けてください。 何かが画面上を移動するのを見るのはクールに見えるかもしれませんが、それは本当に必要ですか？

実装中の技術的な考慮事項

そして最後に、ホスティングの選択の一部として考慮する必要がある、ページの読み込み速度のより技術的な側面のいくつかに踏み込むことができます。

  1. 可能な場合は、サードパーティのスクリプトへの依存を削除します。 これらは、ページが読み込まれる前にこれらのスクリプトの読み込みに依存しているだけでなく、高負荷で通常よりも読み込みが遅い場合があるため、問題を引き起こします。 これにより、ロード時間が「ゴツゴツ」になる可能性があります。
  2. 遅延読み込み手法を使用して、ユーザーがスクロールして表示したときに、折り目の上に表示されない画像が確実に読み込まれるようにします。
  3. レスポンシブ画像をより有効に活用します。 レスポンシブ画像のブラウザによる処理方法にはいくつかの進歩がありました。つまり、すべてのビューポートで機能する単一の大きな画像を提供する必要がなく、特定の解像度でより良い画像を提供できます。
  4. ページの読み込みの一部としてではなく、ページの読み込み後に埋め込み動画の埋め込みが読み込まれるようにします。 これは、ユーザーがビデオのプレビュー画像を表示し、リンクをクリックした後に実際のビデオを表示することを意味します。
  5. 個々のページ間リダイレクトではなく、301リダイレクト用の大きなhtaccessファイルを避け、ルールをバルクカテゴリリダイレクトに結合します。
  6. 画像にはCDNを使用します。 サイトのユーザーベースが特にローカライズされている場合、CDNはパフォーマンスに悪影響を与える可能性があるため、これを測定する必要があります。
  7. CSSファイルとJavascriptファイルを最小限に抑えます。 ほとんどの場合、すでにこれを行っているはずですが、主要なページの一部のファイルを減らす機会がさらにある可能性があります。 これは、新しいプラグインのインストールを決定する際の中心的な部分です。
  8. 古いブラウザのサポートを終了します。 古いブラウザでは、特定のCSSファイルとJSファイルを作成し、条件付きでサイトにロードする必要があります。 これらを完全に削除できれば、リクエストは1つ少なくなります。
  9. サイトで使用されるプラグインの数を最小限に抑えます。 プラグインの肥大化に悩むウェブサイトを定期的に継承しています。 これは、CMSを使用する場合の新しい問題ではありませんが、それでも大きな問題です。
  10. 電子メール署名の画像ホスティングなど、必須ではないホスティング要件への依存を排除​​します
  11. データベース最適化クエリを実行します。 あなたのウェブサイトがしばらくの間存在しているならば、クエリが実行される時間を最適化するために使われることができる多くのデータベース技術があります。

要約すると、高度に最適化されたサイトを作成することは、仕様、設計、および実装の間のバランスです。 私にとって重要な要素は、高度に最適化されたSEOページを可能な限り他のページと区別し、可能な限りこれらを最適化することに焦点を当てることです。

Web開発についてサポートが必要な場合は、遠慮なくお問い合わせください。