WordPress｜Twitter埋込で遅くなったときの解決策！SWELL編

2023年2月26日2023年3月29日

WordPressにTwitterを埋め込んでみようかな？

WordPressにTwitterを埋め込んだらページ速度が極端に遅くなった…。

上記のような疑問にお答えします。

この記事では、【SWELLユーザーの方】に向けて、WordPressにTwitterを埋め込んだものの、ページ速度が極端に遅くなってしまったときの解決策をご紹介します。

「SWELL」

総合評価

( 5 )

メリット

ムダのないシンプルなテーマ
洗練されたお洒落なデザイン
DEMOページへの着せ替えが便利
オリジナルブロックが豊富
パターンデザインが豊富
多機能が標準搭載されている
フォーラムで質問できる
ユーザー間で横のつながりが強い
アップデートが多い
使っていて楽しい♪

デメリット

導入コストがかかる
カスタマイズ性は高くない（普通）

ページ表示速度が遅いまま放置しておくとユーザビリティ（ユーザーの利便性）が低下し、サイト順位の低下を招く可能性もあります。

結論からいうと、WordPress有料テーマ「SWELL」を使っている人なら、Twitterの読み込みを遅らせる設定がかんたんにできます。

それでは早速みていきましょう。

WordPress｜Twitter埋込で遅くなる対処法

WordPressでブログを運営していると、Twitterを記事に埋め込みたいときがありますよね。
WordPressにTwitterを埋め込むとリアルな評判・口コミをコンテンツに反映できるのでとても便利です。

しかし、ツイートを埋め込み過ぎると、ページ表示速度の低下につながります。
良かれと思ってしたことでも、読込前に離脱されてしまっては本末転倒ですよね。

Twitterを記事に挿入したときはまず、PageSpeed Insightsを使い表示速度測定してみましょう。

PageSpeed Insights

測定の結果、「パフォーマンス」の数値が80点以上であれば問題ありませんが、大抵の場合は大幅に下回っているでしょう。
そんな時は以下の方法で、速度を改善します。

①：ツイートの埋込コードからスクリプトを削除する

WordPressの記事にツイートを挿入する際は、以下の手順で「Twitter Publish」から埋込コードを取得します。

STEP

ツイート右上の記号をクリックする

STEP

ツイートを埋め込むを選択する

STEP

コードをコピーする

②：埋込コードからスクリプトを削除する

続いて、ツイートを埋め込みたい記事にブロックエディタの「カスタムHTML」を挿入します。
上記手順でコピーした埋込コードをカスタムHTMLにコピーすると、以下のように表示されます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/%E3%83%96%E3%83%AD%E3%82%B0%E5%88%9D%E5%BF%83%E8%80%85%E3%81%A8%E3%81%A4%E3%81%AA%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#ブログ初心者とつながりたい</a> <a href="https://twitter.com/hashtag/%E3%83%96%E3%83%AD%E3%82%B0%E4%BB%B2%E9%96%93%E5%8B%9F%E9%9B%86%E4%B8%AD?src=hash&amp;ref_src=twsrc%5Etfw">#ブログ仲間募集中</a> <a href="https://twitter.com/hashtag/Nobilista?src=hash&amp;ref_src=twsrc%5Etfw">#Nobilista</a> <br><br>ブログでは、商品・サービスの良いところをアピールしたくなるけど、デメリットや解約方法を記載するのも効果的です。<br><br>むしろ、ネガティブ要素も入れた方が検索順位上がってるかも🤔</p>— アカロア (@akaroa789) <a href="https://twitter.com/akaroa789/status/1628233265894297600?ref_src=twsrc%5Etfw">February 22, 2023</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

上記の埋込コード内の赤字部分（<script……></script＞)は、ツイートのスタイルを読み込む役割を担っています。

ツイートを複数埋め込む場合は、それぞれのツイートにスクリプトが存在し、同時に読み込もうとするため表示速度が遅くなります。
そこで、上記スクリプト（赤字部分）を削除しましょう。

#ブログ初心者とつながりたい #ブログ仲間募集中 #Nobilista

ブログでは、商品・サービスの良いところをアピールしたくなるけど、デメリットや解約方法を記載するのも効果的です。

むしろ、ネガティブ要素も入れた方が検索順位上がってるかも🤔
— アカロア (@akaroa789) February 22, 2023