ブログスピード低下の原因 − Twitter 複数埋め込みの問題解決

WordPressにTweetを複数埋め込む方法

このページでは

  • ページの表示スピードが遅い
  • 該当ページにTwitterを沢山埋め込んでいる
  • PageSpeed Insight のスコアが悪い

そんな方のヒントになるかもしれません。

目次

WordPress の Twitter 埋め込み方法は簡単だけど

調子に乗って埋め込んでいると、

ページ表示スピードが遅くなります。

理由は、表示させたいTweetの内容をくださいと何度もサーバーとのやり取りが行われるため。

それも埋め込まれた数の分だけ。

これに意外と気が付かないことが多いです。

Pagespeed Insights で読み込みが遅延の原因になっていて、Tweet が沢山埋め込まれているページならこちらの方法で埋め込み方法を変更してみてください。

この方法は、TCDさんのページで公開されている方法です。

素敵な情報に感謝!

Tweet 埋め込み手順

手順としてはこんな感じ

  1. 埋め込みたい Tweet の URL をコピーする
  2. Twitter Publish にて URL をペーストする
  3. 生成された HTML を、カスタム HTML ブロックへペーストする
  4. HTML の一部を削除する
  5. 該当 Javascript をページのカスタム HTML へペーストする

順番に説明します。

STEP
埋め込みたい Tweet の URL をコピーする
Tweet埋め込み方法01
STEP
Twitter Publish にて URL をペーストする
Tweet埋め込み方法02
Tweet埋め込み方法03
STEP
生成された HTML を、カスタム HTML ブロックへ貼り付ける
STEP
HTML の一部を削除する
Tweet埋め込み方法04
STEP
該当 Javascript をページのカスタム HTML へ貼り付ける

5-1.まず、下のコードをコピペします。

<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>

5-2. 次にページの一番下にカスタムHTMLブロックを作成して、その中に1.のコードを埋め込みます。

Tweet埋め込み方法05

これで保存して、一度プレビューで表示してみてください。

Tweetの埋め込みができていれば完成です。

お疲れさまでした!

そよパパ

カスタム JS 欄ではなく、本文最下部にカスタム HTML ブロックを作成して、そこへ Javascript コードを貼り付けます。

WordPress の基礎スピードが大事

WordPress の基本的なスピードが遅いとどうしようもないです。

基本のスピードは、サーバーの性能と利用しているテーマで決まります。

サーバー選びはサポート体制で選びましょう!

サイトみても分からないのがサポート体制。

実際に問題が発生しないとサポートのお世話になることはありません。

困った時にしっかりとサポートしてくれたところは、Xserver と さくらレンタルサーバーさんでした。

めちゃくちゃ頼りになる2社は、私が自信をもってオススメできるサーバー会社さんです。

エックスサーバー

さくらのレンタルサーバ スタンダードのお申込みはこちら(公式ページ)

テーマはスピード対策された SWELL

Swell

WordPress でブログを作る時に悩むのがテーマ選び。数あるテーマの中でもオススメするのは、有料テーマSWELL。

ブログ作成に便利な機能、使用者の「あれがしたい」というのが盛り込まれたテーマは、表示スピード対策にも力を入れてます。そのため、このテーマでページを作るだけでスタート地点は間違いありません。

有料なテーマだけに気軽にオススメはしませんが、ブログを始めてテーマを変更するのは本当に大変なので、もし余裕があるのであれば、有料テーマの利用をオススメします

SWELLは、検索をしてもわかりますが、ブログを運営している人が大絶賛しているテーマの一つです。その他のテーマからの移行ツール(もちろん完全ではない)も用意されていますので、それを利用する人も多いです。

参考サイト

もっと詳しく技術的なことも知りたい方は、こちらのサイトを参考ください。

https://tcd-theme.com/2022/06/wordpress-multiple-tweets.html

素敵な解決方法を示してくださった、TCD編集チーム様に感謝!

ありがとうございました!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次