ソーシャルリンクがページロードを遅らせる原因の一つ

やりたいこと：ソーシャルリンクボタン（例：Twitterフォローボタン）をページに組み込む

• SEOの一環として、ソーシャルリンクボタン（例：Twitterフォローボタン）をページに組み込むのは一般的だと思います。
• ソーシャルリンクをページ貼り付けるのは簡単です
  • 例：Twitterのリンクボタン作成ページ：https://about.twitter.com/ja/resources/buttons#followでボタンリンクコードを取得します
  • 取得したコードがページのどこかに貼り付ければ良いです

問題点：ソーシャルボタンロード時間がかかる、非同期でソーシャルリンクをロード時にリンクのテキストが先に表示してしまいします

• ソーシャルボタンのリンクコードに非同期ロードのjavascriptが含まれていて、これはソーシャルボタンロード時間を省きたいからです
• 実はソーシャルボタンロード時間が場合によって1秒ぐらいもかかることがあります（Chrome Page Load Timeで測定）
  
• また、ページロードテストを複数回で実行する動画をご参考ください
• ソーシャルリンクボタンを非同期にロードするため、ロードしている間に、スタイルがなく、単純的なテキスト文字が表示していまします（ロード時のリンク変化は動画でご確認ください）

解決：イメージ画像を貼り付けてフォローなどの動作は別ページにする単純なaタグにします

• フォローなどの動作は作成したページに完成する必要はありません
• 単純なソーシャルリンクイメージファイルとaタグで完成したほうが上記問題を解決します
  • 例：Twitterフォローボタンのイメージを作成/保存し、ウェブサーバーのどこかに配置します
  • Twitterのスクリーン名を割り出し： Twitterの＠以降の文字列（例：@old_pine_netの場合は「old_pine_net」となります）
  • <a href="https://twitter.com/intent/follow?screen_name=[自分のスクリーン名]" target="_blank"><img src="[ｔｗｉｔｔｅｒボタンimgのURI]"/></a>
  • css適切にマウスオーバーなどの効果を設定すれば良いです
• これで、ロード時間、ボタンロードの間に文字列が表示されることなく、問題解決します