【コアウェブバイタル】X（旧 Twitter）アカウントのWebサイト埋め込みを最適化する

本記事では、X（旧 Twitter）を「X」と簡略化して記載します。

はじめに

Webサイトの表示速度を最適化することは、ユーザー体験の向上とSEO対策の両面で重要です。特に、XのようなSNSコンテンツを埋め込む場合、適切な実装を行わないとページの読み込み速度に大きな影響を与える可能性があります。本記事では、Xアカウントを埋め込んだ際に発生する可能性のあるパフォーマンス上の問題点と、JavaScriptを使用した最適化方法について解説します。

Webサイトへのコンテンツ埋め込みの意義

Xのコンテンツをウェブサイトに埋め込むことには、以下のような意義があります。サイトのコンテンツ戦略において、これらのメリットを活用することで、より効果的な情報発信が可能となります。

まず、他社のサイトとの差別化を図ることができます。リアルタイムで更新される情報を提供することで、サイトの価値を高めることができます。また、定期的な情報更新は検索エンジンからの評価向上にもつながります。さらに、XとWebサイトの間でユーザーの相互送客が可能となり、より広範な情報発信が実現できます。

Xアカウント埋め込み時の技術的課題

アカウントの埋め込みを実装する際には、以下のような技術的な課題があります。

パフォーマンスへの影響

アカウント単位での埋め込みを行う場合、Xプラットフォームにより制御された数の最新投稿が表示されます。この初期読み込みとその後の追加読み込みの処理が、ページの表示速度やスクロール時のパフォーマンスに影響を与える可能性があります。

プラットフォームによる制限

標準の埋め込みウィジェットでは、表示方法や投稿の表示数はXプラットフォームにより制御されており、カスタマイズが限られています。X API v2は主にデータ取得や分析用途向けに設計されており、埋め込みウィジェットの表示制御用途としては適していません。そのため、パフォーマンスの最適化は、JavaScriptを使用した読み込みタイミングの制御が現実的な解決策となります。

「data-tweet-limit」属性やmax-heightによる制御もできるとされていますが、うまく機能しないこともあるため、JavaScript制御の方法を行いました。

JavaScriptによる最適化実装

Intersection Observer APIを使用することで、ユーザーの閲覧状況に応じた効率的な読み込みを実現できます。以下が具体的な実装例です。

// Xウィジェットの動的遅延読み込み実装
document.addEventListener('DOMContentLoaded', function() {
  function loadTwitterWidget() {
    if (window.twttr) return;

    // Xウィジェット用のスクリプトを動的に生成
    const script = document.createElement('script');
    script.setAttribute('src', 'https://platform.twitter.com/widgets.js');
    script.setAttribute('charset', 'utf-8');
    document.body.appendChild(script);
  }

  // Intersection Observer の設定
  const options = {
    root: null,
    rootMargin: '80% 0px',  // ビューポートの80%手前で発火
    threshold: 0
  };

  // Intersection Observer のインスタンス作成
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      // 要素が視界に入った場合
      if (entry.isIntersecting) {
        loadTwitterWidget();
        observer.disconnect();
      }
    });
  }, options);
  
  // 監視対象の要素を取得して監視を開始
  const twitterElement = document.querySelector('.twitter-container');
  if (twitterElement) {
    observer.observe(twitterElement);
  }
});

実装のポイント

_{今回の処理内容のイメージ}

効率的なリソース管理
ユーザーが実際にXウィジェットの位置までスクロールした時点で初めてスクリプトを読み込むため、初期ページ読み込み時の負荷を軽減できます。

ユーザー体験の向上
ページの初期表示が高速化され、ユーザーにストレスを与えにくい実装となっています。

柔軟な制御
rootMarginの値を調整することで、実際にウィジェットが表示される前にどれだけ早く読み込みを開始するかを制御できます。

まとめ

Xアカウントの埋め込みは、Webサイトのコンテンツを豊かにする有効な手段です。しかし、そのパフォーマンスへの影響を考慮し、適切な最適化を行うことが重要です。

Xコンテンツを埋め込むことで、他サイトとは内容を差別化しやすく、SEOに好影響を与えることができるとされていますが、パフォーマンスを悪化させてしまうとSEOに悪影響を与えてしまいます。

そうならない為にも、本記事で紹介したIntersection Observer APIを活用した遅延読み込みの実装は、この課題に対する効果的な解決策の一つとなると思います。

ぜひ活用していただければと思います！また、X埋め込みに関してより良い方法があればぜひご教授いただけると嬉しいです！

本記事を一読いただきありがとうございました！