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

BLOG ブログ不具合

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

公開日2021/11/8 更新日2021/11/8

颯 Sou

こんにちは、soublogを運営している作曲家ブロガーの颯 Souです。

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

と困っていませんか。

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

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

まず、あるページのツイッターを埋め込んだ際のモバイルの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テーマ 「WING(AFFINGER5)」

AFFINGERの導入法は下記。

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

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

BLOGに戻る

  • この記事を書いた人

颯 Sou

【経歴】京大院卒/大企業/自由を求め脱出/作曲家・ブロガーのフリーランス 【作曲】21曲リリース/AWA動画広告BGMプログラム採用実績あり/Audiostock審査通過/委嘱楽曲の提供経験あり 小学校でピアノを習い、中学校でアコギを買い、高校でエレキを始め、大学で軽音サークルに入り、社会人から作曲家でボカロPとして音楽活動をしています。 【ブログ】soublog500記事/昨年13万PV 社会人になってからブログ制作を開始。最初はボカロ活動を広めることを目的に執筆。「ボカロPになるには」というキーワードで検索順位1位に。また途中から自己啓発を発信し、「自己啓発 一覧」というキーワードで1位を獲得経験あり。SEOを考慮したブログノウハウも発信中。

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