【初心者ブロガー向け】WordPress：ツイッター大量に埋め込んだら超重いよ…＜読み込み高速化対処法＞

こんにちは、かわよです！

先日公開した、以下の記事を執筆した際にブログ初心者の私は大失敗をしましたので、初心者ブロガーの皆さんに大量ツイート埋め込みによる事例とページ読み込み高速化の対応策を共有させていただきますね！

【Twitter企画】ツイッター仲間の紹介をしたら楽しすぎた！＜企画参加仲間のブログ＆アカウント紹介＞

こんにちは、かわよです！私、ツイッターアカウントを持っていて、日々仲間との交流や有益情報の収集＆発信などしているのですが、2023年3月3日の初ツイートからちょうど1か月後の2023年4月3日にフォロワーが200人に到達しました！...

この記事をしっかりと確認して、皆さんは同じ轍を踏まないようにご注意ください。

ツイッター埋め込みすぎて重くなりすぎたよ。。。

ツイッター埋め込みすぎて重くなりすぎたよ。。。

前述の記事はツイッター仲間の紹介記事のため、必然的にツイートの埋め込みが大量に必要な状況でした。そこで、初心者の私はWordPressのツイッター埋め込み用のブロックを使用して大量に埋め込んでいき、公開しました。

下書き段階から「今日は保存に時間かかるなぁ」となんとなく思いながらも、初心者の私は「ま、そんな日もあるか」とそのまま進めて公開…。

でも、いざ公開してみるとやっぱり開くのに時間かかりすぎる…。
このままでは、誰かがせっかくアクセスしてくれても、きっと開かずに離脱してしまう…。

ということで、ようやく私はここで調べてみることに。はい。遅いです。
すると、やはりツイッターを埋め込みすぎると重くなることが判明！
（ダメな私は本当はその前になんとなく気づいてたけど、気づかないふりして進めてました…。）

で、ページ読み込み高速化の対応策を調べて、修正したところ、まぁ急にサクサクした動きになりました！
ブログもダイエットできるんですね。笑

今回は、その高速化対応策を初心者ブロガーの皆さんにも共有しますね。

埋め込みツイート読み込み高速化のポイント

埋め込んだツイートの読み込み高速化のポイントをお伝えする前に、なぜ読み込みに時間がかかるのかを理解していきましょう！

ツイート埋め込み方法

まず、ツイート埋め込みには2つの方法がありますので、それぞれの特徴をおさらいしましょう。

① WordPressブロックを使う方法

これは先ほど紹介した方法です。

上記のブロックを選択して、下記に埋め込みたいツイートのURLを貼り付ければ完了です！

この方法はURLから画像の読み込みや表示方法などを解析して表示するので、読み込みに時間がかかります。ですので、記事内に多く埋め込む場合には向かない方法ということになります。

私はこの方法を多用してしまったのが大失敗でした…。

② ツイート埋め込みタグを使う方法

2つ目はツイッター上の埋め込みタグを使用する方法です。

ツイッター上で、埋め込みたいツイートの右上にある「…」とクリックすると、上記の選択肢が表示されるので「ツイートを埋め込む」をクリックして、埋め込み用のタグを表示しそれをコピーします。

次に上記の「カスタムHTML」のブロックを選択し、先ほどコピーした埋め込み用のタグを貼り付けます。これで完了です。

この方法はURLを貼り付ける方法よりは読み込み速度は速いのですが、それでも大量のツイートを埋め込めば、URLを貼り付ける方法同様に、表示方法の解析などに時間がかかるためページの読み込みに時間を要することになります。

埋め込みツイートの読み込み高速化の方法

ツイート読み込みを高速化させるためには上記②の「ツイート埋め込みタグを使う方法」を利用します。この方法を利用してタグを貼り付けると、下記のような表示になります。

<blockquote class=”twitter-tweet”><p lang=”ja” dir=”ltr”>出来た〜〜‼️<br><br>昨日の感謝企画を記事にしました〜🤩<br>ご参加頂いた皆さんに被リンクをプレゼント出来てよかった🎁<br><br>次回、企画の際は、皆さんご参加くだされ〜✨✨<br><br>【Twitter企画】ツイッター仲間の紹介をしたら楽しすぎた！＜企画参加仲間のブログ＆アカウント紹介＞ <a href=”https://t.co/TaD3e050Gr”>https://t.co/TaD3e050Gr</a></p>— かわよ@豊かな生き方×ブロガー (@kawayo_yutaka) <a href=”https://twitter.com/kawayo_yutaka/status/1643145364793614336?ref_src=twsrc%5Etfw”>April 4, 2023</a></blockquote> <script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>

この最後の赤字部分のコードはツイートの表示スタイルを読み込む役割を果たします。ですので、この赤字部分を削除すると、ツイッター上で見えるような表示ではなく、画像などが表示されずにテキストだけの表示となります。

記事内に大量にこのコード情報があると、すべてのツイートの表示スタイルを読み込むのに時間がかかってしまうため、ページが重くなるということです。

ただ、実はこのコードはページ内に1つあればすべての埋め込みツイートに適用されます。

そうです！
最初に表示されるツイートのみこのコードを残し、他の埋め込みツイートからはこの赤字部分のコードを削除すれば、読み込み速度の高速化が図れます！

初心者ブロガーの皆さん！これで私と同じ轍を踏まずに済みますね！