みなさんこんにちは。本日は小ネタです。ソーシャルアイコンの表示がWebサイトを遅くする可能性について紹介します。
実は記事に配置するSNSの共有アイコン（正式にソーシャルアイコン）はパフォーマンス上とても遅いです。多くのサイトで幸いページの下方に配置されることほとんどなので、気づかないだけのですが、パフォーマンステストにおいては引っかかる場合があります。ソーシャルアイコンは要するに外部サイトの読み込みなので、連携するサービス数を減らすしか対策方法はないです。ちなみにこのアイコンの表示を高速化させるためにエンジニアが努力しているわけです。期待しましょう。
まずは以下のTweetの埋め込みをご覧ください。
上記のTwitterの埋め込みの場合、サイトに以下のコードを書く必要があります。このうち script タグは非同期とはいえ外部通信になるため、遅延が発生するという原理です。Twitter社に問い合わせてパーツを表示しているので当然ですね。
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Sunsets don't get much better than this one over <a href="https://twitter.com/GrandTetonNPS?ref_src=twsrc%5Etfw">@GrandTetonNPS</a>. <a href="https://twitter.com/hashtag/nature?src=hash&ref_src=twsrc%5Etfw">#nature</a> <a href="https://twitter.com/hashtag/sunset?src=hash&ref_src=twsrc%5Etfw">#sunset</a> <a href="http://t.co/YuKy2rcjyU">pic.twitter.com/YuKy2rcjyU</a></p>— US Department of the Interior (@Interior) <a href="https://twitter.com/Interior/status/463440424141459456?ref_src=twsrc%5Etfw">May 5, 2014</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
※ ソーシャルアイコンの全てのパーツが遅いわけではありません。特に iframe や scriptを利用した外部アクセスが必要なものが遅さの原因です
2016年に書かれた有名なブログ記事です。当時とはパフォーマンスの観点では大きく改善されているはずですが、古くから提起されている問題であることが分かります。
https://blogpros.com/blog/2016/01/why-social-bu
しかしこのソーシャルアイコンが無駄ではあるとはいえません。一例ですが、New York Times のツイートのうち16.3%はソーシャルボタンからの流入だということです。
16.3% of tweets about the New York Times come from social buttons on the site. The percentage rises to 20.2% in the case of the Wall Street Journal.
https://supporthost.com/social-media-icons/
ソーシャルアイコンを表示するしないはトレードオフということですね。みなさんもこの内容を読んで判断していただければと思います。
それではまた次の記事で👋