今回はTwitterを埋め込んでサイトが重い、もしくは読み込み速度が遅くなったと悩んでいる方はasync属性に注意しましょう。
ここを解決すればもしかするとサイトスピードの改善になるかもしれません。
私のサイトの場合は体感で1.3倍くらいは早くなりました。しかも若干ですがCLSの数値の改善にも繋がりました。
Twitterの埋め込み方法・カスタム方法は以下。
Twitterの埋め込みコード
下記は私のTwitterのタイムラインのデフォルトの埋め込みコードです。
< a class = "twitter-timeline"
href = "https://twitter.com/OgJOLPRYK4U7NgH?ref_src=twsrc%5Etfw" > Tweets by OgJOLPRYK4U7NgH < /a>
<script async src="https:/ / platform.twitter.com / widgets.js " charset="
utf - 8 "></script>このコードをソース内に入れれば埋め込みが完了します。
しかしこのまま入れるとある条件下ではサイトスピードを低下させる要因になっている事がわかりました。
Twitterを埋め込んでサイトスピードが低下した場合の改善策
結論から言ってしまうと、下記の様にコードの3行目の「script async」の「async」を削除すれば解決です。
< a class = "twitter-timeline"
href = "https://twitter.com/OgJOLPRYK4U7NgH?ref_src=twsrc%5Etfw" > Tweets by OgJOLPRYK4U7NgH < /a>
<script src="https:/ / platform.twitter.com / widgets.js " charset="
utf - 8 "></script>「async」とは非同期処理という意味です。要するにページの読み込みが開始されたら同時にTwitterの埋め込みを読み込みますと言った意味です。
一見、それはサイトスピードが早くなりそう、良い方向に向いた処理なのではないか？と思います。
実際、非同期処理はうまく使えばサイトスピードの改善に繋がります。
しかし現在の大抵のサイト（ほとんどのWordPressテーマ）では遅延ロードを採用してサイトの下部にある読み込みを後の方にしてるかと思います。
それを採用したサイトの場合に、後ろの方に置いたTwitter埋め込みを「async」で非同期処理をしてしまうと大きくサイトスピードに影響します。
仮にヘッダーの方にTwitter埋め込みを置く場合は早くに表示されるべきなので、非同期処理で良いと思います。
しかし大抵は記事内やサイドバーの下の方、フッターに置いてるのではないでしょうか？
その場合は非同期処理で読み込む必要はなく、遅延ロードで後に読み込んだ方が体感的にサイトスピードが改善します。
おまけ：複数ツイート埋め込みの注意点
最後におまけとして、複数ツイートを埋め込む場合の注意点を紹介します。
Twitterの埋め込みには全て下記のスクリプトタグが入っています。
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>しかしこのタグはページ内に一つだけ入っていれば十分です。
スクリプトはコードの中でも重たい（ページスピードに影響がある）のでなるべく減らしていった方が良いとされています。
なので複数ツイートを埋め込む場合は最初の一つだけにスクリプトタグを入れて、それ以降のツイート埋め込みのコードにあるスクリプトタグは削除した方がいいでしょう。
以上が「Twitter埋め込みでサイトが重いと感じたらasyncに注意」でした。
これで少しでもサイトスピードの改善になったら幸いです。
