Twitter（X）の埋め込み過ぎでページ表示速度が重い問題を解決する方法

WordPressサイトを運営していると、記事内にTwitterを埋め込む機会がありますよね。お客様のリアルタイムなツイートや、口コミをそのままコンテンツに反映できて便利です。

とはいえ、一度に多くのツイートを埋め込みすぎるとページの読み込みが極端に遅く（重く）なることがあります。せっかくの反響をシェアしたくても、ページの読み込み前に離脱されてはもったいないですよね。

そこで今回は、Twitterの埋め込み過ぎによってページ表示速度が重くなる問題を解決する方法をご紹介いたします。1ページ内で複数のツイートを埋め込みたい場合に有効です。

TwitterのJSを削除して、読み込むタイミングを変える

対策はシンプルなのですが、いくつか前提知識が必要になります。手順通りに進めれば誰でも対応できるように、わかりやすく解説いたします。以下の流れで進めていきます。

ツイートの埋め込み方を確認する
埋め込みコードからスクリプトを削除する
読み込むタイミングを変えたJSを追記する

1. ツイートの埋め込み方を確認する

まずは、複数のツイートを埋め込んでいるページを確認しましょう。

ツイートの埋め込み方は大きく分けて2種類あります。シンプルにツイートのURLをそのままコピペして埋め込む方法と「Twitter Publish」で埋め込みコードを取得する方法です。

もし前者の方法でページに埋め込んでいる場合は、「Twitter Publish」で埋め込む方法に切り替える必要があります。詳しくは下記記事でご覧いただけます。

2017.01.01

2022.09.02

WordPressでTwitterのツイート・タイムラインを埋め込む方法

2021/2/12 情報を更新いたしました。 WordPressでは、Twitterのコンテンツを非常に簡単に表示させることができます。当記事では、Twitterの投稿やタイムラインを埋め込む方法について解説していきますので、参考にしてください。 Twitterで埋め込む代表的なコンテンツは２つ...

2. 埋め込みコードからスクリプトを削除する

1.の手順で埋め込み方法を変更したのは、ある特定のスクリプトを手動で削除するためです。例えば、下記のツイートを表示するため埋め込みコードを「Twitter Publish」で取得した場合・・・

Webサイトの写真にオーバーレイをかける（色を重ねる）と簡単に次の効果が得られます。

・色味・彩度をフラットに
・テキストの可読性アップ
・サイト全体に統一感を演出

— WordPressテーマTCD (@tcd_jp) June 7, 2022

エディタには以下のように出力されます。

<blockquote class=”twitter-tweet”><p lang=”ja” dir=”ltr”>Webサイトの写真にオーバーレイをかける（色を重ねる）と簡単に次の効果が得られます。<br><br>・色味・彩度をフラットに<br>・テキストの可読性アップ<br>・サイト全体に統一感を演出</p>— WordPressテーマTCD (@tcd_jp) <a href=”https://twitter.com/tcd_jp/status/1534144838097965057?ref_src=twsrc%5Etfw”>June 7, 2022</a></blockquote> <script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>

上記埋め込みコード内の赤字箇所のスクリプトはツイートのスタイルを読み込む役割を担っています。今回はすべてのツイートからこのスクリプトを削除します。

デフォルトのままですと上記のスクリプトがツイートの数だけ存在し、他のコンテンツと同じタイミングですべて読み込もうとするために表示に時間がかかるというわけです。

該当の記述をすべて削除すると、Twitterのスタイルが適用されなくなり、埋め込んだツイートの見た目は、以下のように表示されます。※テーマによってデザインは異なります。

スタイル無しのツイート

3. 読み込むタイミングを変えたJSを追記する

このまま放置しておくと、Twitterのスタイルが適用されません。ただ、スタイルが適用されないだけならいいのですが、ツイートの埋め込みという扱いにならず、著作権に抵触する可能性も生まれます。
※正しい方法で埋め込んでいる場合は全く問題ありません

そこで、ページの表示速度に影響しないタイミングでJSを読み込む記述を追記します。

ツイートを埋め込んでいるページのエディタを開き、クラシックエディタのテキストエディタにて下記の記述をコピペします。エディタの最下部に設置すればOKです。右上のボタンからコピーいただけます↓

<script>
(function(window, document) {
function main1() {
// TwitterのJS読み込み
var ad = document.createElement('script');
ad.type = 'text/javascript';
ad.async = true;
ad.src = 'https://platform.twitter.com/widgets.js';
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(ad, sc);
}
// 遅延読み込み
var lazyLoad = false;
function onLazyLoad() {
if (lazyLoad === false) {
// 複数呼び出し回避 + イベント解除
lazyLoad = true;
window.removeEventListener('scroll', onLazyLoad);
window.removeEventListener('mousemove', onLazyLoad);
window.removeEventListener('mousedown', onLazyLoad);
window.removeEventListener('touchstart', onLazyLoad);
window.removeEventListener('keydown', onLazyLoad);
main1(); // TwitterのJS読み込み
}
}
window.addEventListener('scroll', onLazyLoad);
window.addEventListener('mousemove', onLazyLoad);
window.addEventListener('mousedown', onLazyLoad);
window.addEventListener('touchstart', onLazyLoad);
window.addEventListener('keydown', onLazyLoad);
window.addEventListener('load', function() {
// ドキュメント途中（更新時 or ページ内リンク）
if (window.pageYOffset) {
onLazyLoad();
}
});
})(window, document);
</script>

上記記述の内容を要約すると、以下のいずれかの条件を満たしたときのみTwitterのJSを読み込む（=遅延読み込みする）という意味になります。