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

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

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

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

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

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

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

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

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

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

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

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

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

<blockquote class=”twitter-tweet”><p lang=”ja” dir=”ltr”>Webサイトの写真にオーバーレイをかける(色を重ねる)と簡単に次の効果が得られます。<br><br>・色味・彩度をフラットに<br>・テキストの可読性アップ<br>・サイト全体に統一感を演出</p>&mdash; 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を読み込む(=遅延読み込みする)という意味になります。

  • scroll・・スクロールしたとき
  • mousemove・・マウスを動かしたとき
  • mousedown・・マウスのボタンを押したとき
  • touchstart・・タッチされたとき
  • keydown・・キーが押されたとき

したがって、ページを表示しただけではJSを読み込まないので、結果的に表示速度が早くなるということになります。

実際に表示速度を検証してみた

以下それぞれのケースの検証結果をシェアいたします。

A:ツイートのURLだけを記事内に埋め込んだ場合
B:TwitterのJSを削除して、読み込むタイミングを変えて対策した場合(今回ご紹介した方法)

当サイトのお知らせに、約40ツイートを埋め込んだページがあるので、そのページのテスト環境をPageSpeed Insightsにて検証した結果です。

  • Aの検証結果
  • Bの検証結果
Aの検証結果
Bの検証結果

上記はPCの表示速度の点数ですが、圧倒的に改善されていることが確認できます。

Aでは白い画面が何秒も表示されておりましたが、対策を施したBでは、体感表示速度も他のページと差はありませんでした。前述の通り、スクロール等の動作を行った瞬間にツイートのJSが読み込まれるので、Twitterのスタイルも問題なく適用されます。

まとめ

Twitterの埋め込み過ぎでページ表示速度が重くなる問題を解決する方法をご紹介いたしました。

コードを削除したり追加したりしますので、初心者の方は少し複雑に感じるかもしれませんが、基本はコピペだけでOKです。当記事を参考にすれば、誰でもかんたんにご対応いただけると思いますので、ぜひトライしてみてください。

ページの読み込みが遅かった原因と対策を以下にまとめておきます。

読み込みが遅かった原因

  • ツイートの埋め込みが大量にあること
  • 各ツイートのJSがページと同時に読み込まれること

今回行った対策と作業手順

ユーザーが操作するまで全ツイートのJSを読み込まないようにする。