ツイッターのアイコンの画像。

BLOG ブログ不具合

ブログにツイッターを埋め込むと遅くなる【簡単プラグインで解決】

2021年11月8日

颯 Souのイラスト

soublogについて

  • 音楽ブログだよ!
  • 「soublog」と覚えてね
  • soublogトップページはこちら
  • 筆者は颯 Souで作曲家のフリーランス
  • 作曲実績は、AWA動画広告BGMプログラムにて採用

ブログにツイッターを埋め込むと遅くなる。

と困っていませんか。

もうすでにたくさんの記事にツイッターを埋め込まれており、今さらツイッターの埋め込みをやめることなんてできない。

そんな方に、簡単に解決する方法を解説します。

まず、あるページのツイッターを埋め込んだ際のモバイルのSightSpeed Insightのスコアを見てください。

SightSpeed Insightのスコア38。

絶望的な数値ですね。

しかし、あるプラグインを使うと、

SightSpeed Insightのスコア38。

と劇的に改善しました。

簡単に使えるプラグインをご紹介します。

目次は次の通りです。

・ブログにツイッターを埋め込むと遅くなる【解決法】

スマホ。

・ツイッターの埋め込みでスコアが悪い理由はJavascriptの使用量

ツイッターを埋め込むとなぜ遅くなるのかというと、ツイッターのスクリプト読み込みでネットワーク通信料が大きくなるからです。

下記、SightSpeed Insightの改善できる項目ですが、 「使用していないJavaScriptnoの削減」 が織り込まれていることがわかります。

URLを確認すると、Twitterの読み込みが多いことが分かります。

PageSpeed Insightの解析結果に表示される「改善できる項目」の1つである「Javascriptの削減」に、Twitterのスクリプトの読み込みが多く存在している様子。

・Twitterの読み込みの遅延にはFlying Scripts by WP SPEED Mattersがおすすめ

Flying Scripts by WP SPEED Mattersというプラグインは、指定されたJavascriptを、一定時間読み飛ばすプラグインです。

このプラグインで、ツイッターのスクリプト読み込みを遅延させてみました。

すると、下記改善できる項目から、「使用していないJavaScriptoの削減」 の項目がなくなっていることが分かります。

つまり、改善されたということです。

PageSpeed Insightの解析結果に表示される「改善できる項目」の1つである「Javascriptの削減」が改善された様子。

Twitterを埋め込む際には、下記スクリプトが入っています。

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このスクリプトが重いたい原因です。

・ Flying Scripts by WP SPEED Mattersの使い方

Flying Scripts by WP SPEED Mattersの使い方は簡単です。

まず、プラグインをインストールしてください。

このwidgets.jsを遅延させていきます。

Flying Scripts by WP SPEED Matters の設定画面を開きます。

Include Keywordsに、「widgets.js」を追加します。

widgets.jsは、ツイッターのJavascriptです。

このキーワードに追加されると、ユーザー操作時に読み込みされます。

また、Timeoutは「5s」ほど設定しておきます。

もし、ユーザー操作がなければ、5秒遅延してスクリプトをロードさせます。

「Save Changes」をクリックして設定を保存します。

WordPressのプラグインのFlying Scripts by WP Speed Matters Settingsの設定画面。

・まとめ

ツイッターを埋め込むと、表示速度が遅くなる場合の解決法として、 Twitterのスクリプトの表示を遅延させる方法があります。

Flying Scripts by WP SPEED Matters というプラグインを使います。

プラグインの設定画面でツイッターのスクリプトのwidgets.jsをキーワードにして、5s遅延させれば設定完了です。

私は、それで、SightSpeed Insightのスコアを、38から78に改善できました。

簡単ですので、ぜひ試してみてください。

【コラム】有料テーマを使う必要がある?

無料テーマを使っているけど、自分のSEOで上位表示されないのは無料だからじゃ。。。

とモヤモヤしていませんか?

私は、最初からずっと無料テーマを使っていて、500記事ほど達したころ有料テーマにしました。

正直なところ、無料でも有料でもどちらでもSEOで上位されます。

しかし、「無料だから上位表示されにくいのではないだろうか」という気持ちを持ち続けていました。

モヤモヤしながら、毎日記事を書いていました。

また、無料テーマを使っていると、どこか有料テーマを使っている人に一歩先をいかれている気持ちになりました。

おもいきって有料テーマのAFFINGERにしました。

すると、モヤモヤがすっきりとれたんです。

おそらく、問題は目の前に可能性が広がっているのに、手をださないことでした。

有料テーマにして、他の周りの有料テーマを使っている人と環境は同じになりました。

つまり、SEOで上位表示されないのは、自分の責任だということになるわけです。

もちろん、有料テーマは、有料なだけあって内部SEO対策などしっかりしています。

だから、SEOで上がりやすいと言えばそうなのかもしれません。

実はAFFINGERにしたのはもう1つ理由があります。

それは、デザインが好みだったこと。

見た目がいいブログならまた訪れたいと思います。

AFFINGERは人気があります。

簡単に人気のデザインにすることができます。

かわいいという口コミがありましたよ。

WordPressテーマ 「ACTION(AFFINGER6)」

AFFINGERの導入法は下記。

AFFINGER6の購入と有料テーマのWordPressへのインストールの仕方!【徹底解説】

以上、参考になれば幸いです。

Blog運用術のトップ記事に戻る

ボカロで音楽活動を始める方法

-BLOG, ブログ不具合
-, , ,