フリーランス WEBデザイナー 【キングサイト】
最近のウェブ制作技術
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目と画像アップロード機能を追加する設定方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目と画像アップロード機能を追加する設定方法
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目を追加する設定方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目を追加する設定方法
ホームページ制作簡単作成ツールWix(ウィックス)
WEB屋になる為の知識と技術
ホームページ制作簡単作成ツールWix(ウィックス)
WordPress(ワードプレス)で記事編集画面でカテゴリーを維持する方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)で記事編集画面でカテゴリーを維持する方法
 WordPress(ワードプレス)でカスタム投稿タイプ(タクソノミー)を利用して投稿記事に設定しているカテゴリーを表示させる時に、子カテゴリーのみを取得して表示する方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)でカスタム投稿タイプ(タクソノミー)を利用して投稿記事に設定しているカテゴリーを表示させる時に、子カテゴリーのみを取得して表示する方法
ウェブ制作カテゴリ
Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

北海道 青森 岩手 秋田 宮城 山形 福島 東京 神奈川 埼玉県 千葉 茨城 群馬 栃木 愛知 静岡 三重 岐阜 新潟 長野 山梨 石川 富山 福井 大阪 京都 奈良 兵庫 滋賀 和歌山 岡山 広島 鳥取 山口 島根 愛媛 徳島 高知 香川 福岡 佐賀 長崎 大分 熊本 宮崎 鹿児島 沖縄

SNSボタン(Facebook、twitter、Adsense) によるページの表示遅延(パフォーマンスが落ちる)を防ぐ設定方法

06.11.15 13:25 | コメント(0)

シェアボタン、広告の表示速度を速める「非同期処理」設定

Webサイトやブログのパフォーマンスが遅くなる原因はいくつかあります。
アクセスが伸びなかったりアクセスアップを気にしている方ならまずサイトの表示速度を考えてみましょう。

 ・Webサイトの表示速度が1秒速ければ
 ・ホームページの表示スピードで売り上げは変わる

Webサイトやブログのアクセスアップ考えて設置したSNSボタン(Facebook、twitter)、利益をだす為に設置したGoogle Adsense、このシェアボタンや広告表示によってサイトの読み込み速度に時間がかかっているのです。
このページの表示遅延(パフォーマンスが落ちる)を防ぐには「非同期処理」設定することによって表示速度を速めることが出来ます。

非同期処理」とは、Webサイトやブログを開いた時に、htmlファイル、画像ファイル、cssファイル、javascriptファイル等のファイルを読み込む処理が開始されます。
通常はこの読み込み処理が1つ1つ行われて1つの処理が完了すれば次の処理に移ります。ここで、1つの処理を待たずに他の処理を行う事を「非同期処理」といいます。

Facebookのいいねボタンやtwitterのツイートボタンは処理速度に時間が多少かかります。
そこで今回はSNSボタン(Facebook、twitter、Adsense) によるページの表示遅延(パフォーマンスが落ちる)を防ぐ設定方法をご紹介いたします。

 1. Facebookいいねボタンの読み込み速度を速める非同期処理する方法
 2. twitterツイートボタンの読み込み速度を速める非同期処理する方法
 3. AdSense広告の読み込み速度を速める非同期処理する方法

Facebookいいねボタンの読み込み速度を速める非同期処理する方法

Facebookいいねボタンの読み込み速度を速めるにはFacebookのdeveloperページから追加したいボタンのコードに1部コードを追加することで「非同期処理」が行われます。 Facebookのdeveloperページからコードの取得を行い、画像のコード部分を探してください。

Facebookいいねボタン

Facebookいいねボタン 上記のコード部分に「非同期処理」に設定する為のコードを追加します。
【追加するコード】
js.async = true;

【変更後のコード】


これでFacebookいいねボタンの「非同期処理」の設定が完了です。

twitterツイートボタンの読み込み速度を速める非同期処理する方法

twitterツイートボタンの読み込み速度を速めるにはtwitterのボタン作成ページから追加したいボタンのコードに1部コードを追加することで「非同期処理」が行われます。 twitterのボタン作成ページからコードの取得を行い、画像のコード部分を探してください。

twitterツイートボタン

twitterツイートボタン 上記のコード部分に「非同期処理」に設定する為のコードを追加します。
【追加するコード】
js.async=true;

【変更後のコード】
<a href="https://twitter.com/share" class="twitter-share-button" data-via="designer_king" data-lang="ja" data-count="vertical" data-hashtags="Webデザイナー">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

これでtwitterツイートボタンの「非同期処理」の設定が完了です。

AdSense広告の読み込み速度を速める非同期処理する方法

AdSense広告の読み込み速度を速めるにはGoogleAdSenseページから広告の設定画面で非同期設定にすれば「非同期処理」が行われます。 GoogleAdSenseページから広告コードの取得を行い、画像のプルダウンボタン部分を探してください。

AdSense広告

AdSense広告 上記のボタンを「非同期」に設定することで「非同期処理」の設定が完了です。
カテゴリ:Google関連情報と使い方, SEOとSEMの基礎対策, SNS活用術, ソーシャルネットサービス【SNS】情報・活用方法, ツイッター(Twitter), フェイスブック(Facebook)
  • このエントリーをはてなブックマークに追加
  • Facebookでコメントする

    コメントする

    おすすめの記事

    PAGE TOP