メインコンテンツに移動
ホーム

古松

メインナビゲーション

  • ホーム
  • ビデオ
  • ご連絡

パンくず

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

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

やりたいこと:ソーシャルリンクボタン(例: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="[twitterボタンimgのURI]"/></a>
    • css適切にマウスオーバーなどの効果を設定すれば良いです
  • これで、ロード時間、ボタンロードの間に文字列が表示されることなく、問題解決します

検索フォーム

カテゴリ別

  • laravel
  • drupal
  • javascript
  • windows
  • html
  • mysql
  • php
  • apache
  • css
  • SEO
  • video
  • wordpress
  • linux
  • python
  • Electron
  • Visual Studio Code

google ads