この記事の信頼性について
- 京都大学大学院を卒業後、サラリーマンを10年経験。
- 現在個人事業主として奮闘中。
- 研究気質があるブロガー。
- Webマーケを勉強しブログ開始1年で年間13万PVを達成。
- 読者に有益な情報となり、少しでも読者の日々の生活を明るくできるよう心がけて執筆します。
ブログにツイッターを埋め込むと遅くなる。
と困っていませんか。
もうすでにたくさんの記事にツイッターを埋め込まれており、今さらツイッターの埋め込みをやめることなんてできない。
そんな方に、簡単に解決する方法を解説します。
まず、あるページのツイッターを埋め込んだ際のモバイルのSightSpeed Insightのスコアを見てください。
絶望的な数値ですね。
しかし、あるプラグインを使うと、
と劇的に改善しました。
簡単に使えるプラグインをご紹介します。
目次は次の通りです。
・ブログにツイッターを埋め込むと遅くなる【解決法】
・ツイッターの埋め込みでスコアが悪い理由はJavascriptの使用量
ツイッターを埋め込むとなぜ遅くなるのかというと、ツイッターのスクリプト読み込みでネットワーク通信料が大きくなるからです。
下記、SightSpeed Insightの改善できる項目ですが、 「使用していないJavaScriptnoの削減」 が織り込まれていることがわかります。
URLを確認すると、Twitterの読み込みが多いことが分かります。
・Twitterの読み込みの遅延にはFlying Scripts by WP SPEED Mattersがおすすめ
Flying Scripts by WP SPEED Mattersというプラグインは、指定されたJavascriptを、一定時間読み飛ばすプラグインです。
このプラグインで、ツイッターのスクリプト読み込みを遅延させてみました。
すると、下記改善できる項目から、「使用していないJavaScriptoの削減」 の項目がなくなっていることが分かります。
つまり、改善されたということです。
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」をクリックして設定を保存します。
・まとめ「ブログにツイッターを埋め込むと遅くなる【簡単プラグインで解決】」
ツイッターを埋め込むと、表示速度が遅くなる場合の解決法として、 Twitterのスクリプトの表示を遅延させる方法があります。
Flying Scripts by WP SPEED Matters というプラグインを使います。
プラグインの設定画面でツイッターのスクリプトのwidgets.jsをキーワードにして、5s遅延させれば設定完了です。
私は、それで、SightSpeed Insightのスコアを、38から78に改善できました。
簡単ですので、ぜひ試してみてください。
【コラム】ブログサービスの課金を惜しまないほうがいい理由
ブログをやってて気づいたこともあります。
これまで、600記事を書いてきて、何時間使ったのだろう。
ふと思いました。
1記事2時間使ったとしても1200時間です。
時給1000円だとしても、120万円。
すごいですよね。
それもほぼただ働きの状態。
そう考えると、もっとブログに課金するべきだと考えるようになりました。
いい環境でブログを書くべきだと考えたからです。
安いレンタルサーバーを使って、無料のWordPressテーマを使ってそれで1200時間を投下する。
とっても効率悪いと思うんですよね。
ちょっと気づくの遅いですよね。
なので、サーバーもマイナーなところから、エックスサーバーに乗り換えました。
また、WordPressテーマも、無料テーマからAffingerに乗り換えました。
また、Affingerでは、有料のプラグインも使うようになりました。
これぐらいしても、まだまだ課金は少ないと思います。
もっと、いい環境でブログを書くべきだと思っています。
【有料級】アフィリエイト広告のクリックの流入経路を特定することで希望が見えた件！[AFFINGER6]
以上、参考になれば幸いです。
