JavaScript

[ガラケー版(QRコード)]
アクセス記録[推移 / PV内訳(過去1日 / 過去1週間) / 外部アクセス元 (昨日 / 過去1週間) / ログイン論客足跡]
プロフィール私書(メール)
   /   /送済
評価(一覧   /)
投票   /共:   /
ファン登録
作品/情報/
DB構築()
ブログ
[書く]
攻略記事リンク集
My Play List
 作成日時分類記事タイトル
12011/09/11JavaScriptソーシャルメディアボタンのソースロードを工夫してペー..
22011/09/04JavaScriptページをロード後にソーシャルツールボタン系のコードを..
 反応日時来客名来客者の最近のメッセージ
12017/02/25Merciこんばんは。サーバー移転後からだと思いますが、以前は見られた..
22017/02/17ねこじゃらしブログ投稿やコメントをしようとすると、たまにエラーになります..
32017/02/16Barnirunお世話になっております。https対応の影響か(またはhtm..
42016/11/10伏魔の剣こんばんわ。形式変更お疲れ様でした。 ところでこの改定につい..
52016/10/31雪霞いつもありがとうございます。ところで、ログアウトした時にポッ..
その他最近のコメント
1.
2011/09/11 JavaScript > ソーシャルメディアボタンのソースロードを工夫してページロード高速化」
[この書込みのみ表示(記事URL紹介用) / 編集 / 削除 / トラバ送信 / 共有分類に追加(タグ付け)]拍手:1個

1. ページ下部のソーシャルメディアボタンの外部ソースはマウスオーバーされたら表示するように作動変更
2. IEのバージョンとソーシャルメディアボタンの関係
3. ソースコード

1. ページ下部のソーシャルメディアボタンの外部ソースはマウスオーバーされたら表示するように作動変更

IE6でソーシャルツールボタンのロードの遅さがページの表示に影響しているという報告を以前頂いた事をきっかけに、
最近はIE9, Chromeではデフォルトで、FirefoxにはFirebugとかのプラグインという形で、HPのページ要素のロード時間解析ツールがついているので、
結構頻繁にそれを眺めてページのロードでどこで時間がかかっているのか眺めています。
そうすると、ページ下部のソーシャルメディアボタンのロード時間の割合がやはり大きいなぁ、という事は見て取れます。

そもそもその為ページ下部にしてメインコンテンツのロードの邪魔にはならないようにはしていましたが、
更に先日その対策としてそこのソースロードをページコンテンツがロードされてからロードされるようにしました。
これにより、タイミング的にはコンテンツのロードを更に邪魔しないようになったとはいえ、ツールで見るトータルページのロード時間は変わらないので、何だかモヤモヤしていました。

そこで思いついた対策が、マウスオーバーしたら、表示されるようにするという対策。
必要無いのにロードさせるのが無駄なので、必要な時/人にだけ表示させれば良いという発想ですね。
マウスオーバーすると表示が切り替わります。

[マウスオーバー前]


マウスをソーシャルサイト系へのテキストの上にもっていく

[マウスオーバー後]

これにより、重たい所がほとんどソーシャルメディアボタンしかない

http://www.accessup.org/

トップページなどは、Wimax環境でロード時間が
2秒→0.2秒
に縮まりました。

また、作品DBのトップページも
4秒→0.8秒
とかに縮まりました。

こっちのサイトは画像分も高速化の為にテキストにしていますが、
画像で最初から表示したい人は、自前で画像を用意して、それを表示しておくだけにするだけでも、
外部JavaScript等のロードを必要な時・人に限定できるので、高速化につながるでしょう。
Twitterとか、あっちのサイトの負荷が高くて調子が悪くなる事なんて多々ありますからね。

ソーシャルメディアボタンが出てきてから頭を悩ましていたページロード時間の拡大ですが、これでお別れ&1秒以下のロード時間の時代に戻れました。
2. IEのバージョンとソーシャルメディアボタンの関係

IE Testerでの作動を眺めた結果として、
IEmixiチェックTwitterGoogle+Facebook(Iframe)
IE5.5×××
IE6×××
IE7××
IE8
という作動状況でした。
ソーシャルメディアボタンのそれぞれのIEのバージョンへの対応状況に合わせて、表示/非表示は変わるようになっています。

こうした状況から見えるように、何だかんだいって、Firefox、Chrome、もしくはIE8以降(出来ればIE9以上)が当サイト、というより昨今のウェブページを見る上では推奨環境になるかと思われます。
なお、先日Chromeをお勧めしておきながらですが、正常に動くのならFirefoxが当サイトでは一番相性が良いようです
(相性原因調査中ですが、Chromeだと作品提案承認画面の表示が非常に遅いです)。
IE7以下だと、Facebookボタンがあるサイトだと、それがJavaScript版だとバグに巻き込まれてしまう事もあります(関係無いページをロードし続けて結果真っ白など)。
また、作動検証はしていませんが、Operaは古いOSでも動くので、OS対応が理由で最新ブラウザーを入れられない方にはお勧めです。

各ブラウザーのダウンロードページ
Chromehttp://www.google.co.jp/chrome/intl/ja/landing_ff.html
Firefoxhttp://mozilla.jp/firefox/
IEhttp://windows.microsoft.com/ja-JP/internet-explorer/downloads/ie
Operahttp://jp.opera.com/

3. ソースコード

どうやっているのかといえば、onMouseOverイベントでjavascriptをロードする関数を呼び出すようにしています。
下のソースコード例では自動変換をさけるため、「<」の後ろにはわざと半角スペースを入れてあります。

var Browser = {
Version: function() {
 var version = 999;
 if (navigator.appVersion.indexOf('MSIE') != -1)
  version = parseFloat(navigator.appVersion.split('MSIE')[1]);
  return version;
 }
}
var iev=Browser.Version();

var load_twitter=0;
var load_facebook=0;
var load_google_plus=0;
var load_mixi_check=0;
var load_hatena_bookmark=0;
var load_yahoo_bookmark=0;

function mixi_check(){
 if(load_mixi_check==0){
  load_mixi_check++;
  (function() {
  var mixibk = document.createElement("script"); mixibk.type = "text/javascript"; mixibk.async = true;
  mixibk.src = "http://static.mixi.jp/js/share.js";
  var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mixibk, s);
  })();
  load_other();
 }
}

function twitter_button(){
 if(load_twitter==0){
  load_twitter++;
  if(!iev || iev < 7){
  }
  else{
   (function() {
    var twitt = document.createElement("script"); twitt.type = "text/javascript"; twitt.async = true;
    twitt.src = "http://platform.twitter.com/widgets.js";
    var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(twitt, s);
   })();
  }
  load_other();
 }
}

function hatena_bookmark(){
 if(load_hatena_bookmark==0){
  load_hatena_bookmark++;
  document.getElementById("footer_hatena_bookmark").innerHTML="< a class=hatena-bookmark-button data-hatena-bookmark-layout=standard title=このエントリーをはてなブックマークに追加 rel=nofollow href=http://b.hatena.ne.jp/entry/>< img alt=このエントリーをはてなブックマークに追加 width=17 height=17 style=border:none; src=http://b.st-hatena.com/images/entry-button/button-only.gif />< /a>";

  (function() {
  var htn_scp = document.createElement("script"); htn_scp.type = "text/javascript"; htn_scp.async = true;
  htn_scp.src = "http://b.st-hatena.com/js/bookmark_button.js";
  var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(htn_scp, s);
  })();
   
  load_other();
 }
}

function yahoo_bookmark(){
 if(load_yahoo_bookmark==0){
  load_yahoo_bookmark++;
  document.getElementById("footer_yahoo_bookmark").innerHTML="<a href=javascript:void onClick=window.open('http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t='+encodeURIComponent(document.title)+'&amp;u='+encodeURIComponent(location ._ href)+'&amp;ei=UTF-8','_blank','width=700,height=480,left=100,top=50,scrollbars=1,resizable=1',0);>< img width=125 height=17 alt=Yahoo!ブックマークに登録 style=border:none; src=http://i.yimg.jp/images/ybm/blogparts/addmy_btn.gif>< /a>< script src=http://num.bookmarks.yahoo.co.jp/numimage.js?disptype=shortmedium>< /script>";
  load_other();
 }
}

function facebook_button(){
 if(load_facebook==0){
  load_facebook++;
  if(!iev || iev < 8){
  }
  else{
   document.getElementById("footer_facebook").innerHTML="< iframe src=http://www.facebook.com/plugins/like.php?href="+escape(location ._ href)+"&amp;layout=standard&amp;show_faces=false&amp;height=20&amp;width=75&amp;action=like&amp;font=lucida+grande&amp;colorscheme=light scrolling=no frameborder=0 allowTransparency=false style=border:none;overflow:hidden;width:75px;height:20px width=75 height=20>< /iframe>";
   load_other();
  }
 }
}

function google_plus(){
 if(load_google_plus==0){
  load_google_plus++;
  if(!iev || iev < 8){
  }
  else{
   (function() {
   var gpp = document.createElement("script"); gpp.type = "text/javascript"; gpp.async = true;
   gpp.src = ("http:" == document ._ location.protocol ? "http://" : "https://") + "apis.google.com/js/plusone.js";
   var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(gpp, s);
   })();
   load_other();
  }
 }
}

function load_other(){
 if(load_twitter==0){
  twitter_button();
 }
 if(load_facebook==0){
  facebook_button();
 }
 if(load_google_plus==0){
  google_plus();
 }
if(load_mixi_check==0){mixi_check();} if(load_hatena_bookmark==0){hatena_bookmark();} if(load_yahoo_bookmark==0){yahoo_bookmark();} ;
}


コメントする1個

2.
2011/09/04 JavaScript > ページをロード後にソーシャルツールボタン系のコードを非同期ロードする方法」
[この書込みのみ表示(記事URL紹介用) / 編集 / 削除 / トラバ送信 / 共有分類に追加(タグ付け)]拍手:1個

1. ソーシャルサイト連携ボタンによる遅延問題対策
2. サンプルコード

1. ソーシャルサイト連携ボタンによる遅延問題対策

ページをロード後にソーシャルツールボタン系のコードをロードする方法について、簡単に紹介。
近頃はソーシャルツールボタンを設置するのがデフォルトのようになってきていますが、
それぞれのパーツは外部のサイトにあるので、サイトのコンテンツのロード時間の遅延にどうしても繋がります。

これをするとソーシャルツール系ボタンしかないページで、大体1.5-2.5秒、最悪の場合には10秒以上ページのonloadまでに掛かっていたのが、そこの時間が後ろ回しになるので、0.5秒といった秒数固定で安定ロードできるようになります。
端的に言えば、自分のサイト以外の要素は、ページのロードが終わってから、非同期ロードを開始させる方法です。

まだ、この技法を全部には反映しきれていませんが、今の所作品DBのページ共通下部にはこの変更を反映しました。

function boomkark_script(){
// ロードされてから実行される処理を書いておく //
...
}

// onloadをなるべく使わず、複数の箇所でロードされたら動く処理を書けるようにする
if(window.addEventListener){
window.addEventListener('load',bookmark_script,false);
}
else if(window.attachEvent){
window.attachEvent('onload',bookmark_script);
}
else{
window.onload=bookmark_script();
}
の部分がページロード後のコード等ロードの肝です。

スクリプトの非同期ロード(前のコードのロードによって後ろのコードのロードを邪魔させない/同時ロード)の肝は
// scriptを作っている
(function() {
var twitt = document.createElement("script");
twitt.type = "text/javascript";
twitt.async = true; // これが非同期のプロパティ
twitt.src = "http://platform.twitter.com/widgets.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(twitt, s);
})();
です。
2. サンプルコード

自動変換をさけるため、「<」の後ろにわざと半角スペースを入れてあります。
詳しくは、これにあたる部分を、ページのソースの下部で見てもらうのが一番早いかも。

< a href=http://twitter.com/share class=twitter-share-button data-count=none data-lang=ja>Tweet< /a> <= scriptのロードをここに記述せず、後にロードするようにしてある

< img id="htn_bkk"> <= 画像のロードをここに記述せず、後にロードするようにしてある

< div id="footer_facebook"></div> <= facebookのiframeのロードをここに記述せず、後にロードするようにしてある

< script language="JavaScript">
< !--

function bookmark_script(){
// hatenaの画像ロード
document.getElementById("htn_bkm").src=".../hatena.gif";

// facebookのHTML部分ロード
document.getElementById("footer_facebook").innerHTML="< iframe src=http://www.facebook.com/plugins/like.php?href="+escape(location ._ href)+"&amp;layout=standard&amp;show_faces=false&amp;height=20&amp;width=75&amp;action=like&amp;font=lucida+grande&amp;colorscheme=light scrolling=no frameborder=0 allowTransparency=false style=border:none;overflow:hidden;width:75px;height:20px width=75 height=20>< /iframe>";

// twitterのjavascriptロード
(function() {
var twitt = document.createElement("script"); twitt.type = "text/javascript"; twitt.async = true;
twitt.src = "http://platform.twitter.com/widgets.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(twitt, s);
})();

}

// ページロード後にロードできるのならロードさせる
if(window.addEventListener){
window.addEventListener('load',bookmark_script,false);
}

else if(window.attachEvent){
window.attachEvent('onload',bookmark_script);
}

else{
// onloadを複数記述していてバッティングが起きうるところがある場合には一つしか実行されないから、バッティングが起きうるのなら、ここはonloadせず
// bookmark_script();
// と普通に書くのもあり
// 但し前の二つの条件のいずれかが満たされていれば問題ないので、旧ブラウザーをどこまで考えるか、の話でもある(そしてそれらはこれから減っていく)
window.onload=bookmark_script();
}
// -->< /script>


コメントする1個
RSS購読
RSS
ブログ表示スタイル
リスト/携帯(QRコード)
画像/動画/音声/リンク
表示開始年月
分類
全て
1.このサイトについて
2.作品DB開発/運用
3.ホームページ制作技術
4.Perl
5.C言語 / C++
6.検索エンジン&SEO
7.サッカー
8.自分のこと
9.Linux
10.旅行
11.思ったこと
12.パソコン
13.Berkeley DB
14.その他技術系
15.企画
16.スマートフォン
17.鑑賞
18.皆声.jpニュース
19.インターネット業界
20.運用マニュアル(自分用)
21.技術系以外実用書
22.料理
23.ALEXA
24.アニメ
25.会計
26.漫画
27.設計書
28.色々サイト作成
29.サーバー
30.自分専用
31.生活
32.OP/ED/PV
33.ゲーム
34.DB整備
35.新規開始作品紹介
36.英語圏の話題
37.大道芸
38.映画
39.PHP
40.ダイエット
41.Mac
42JavaScript
43.MySQL
44.介護
45.作品DB作品追加作業
46.BI
47.Web API
48.パフォーマンス
49.インターネットの活用方法
50.Riak
51.Androidアプリ開発
52.Cassandra
53.スパム
54.写真
55.iOSアプリ開発
56.AWS
57.マーケティング
58.Web漫画
59.法律
60.mongodb
61.開発環境整備
62.Google Apps Script
63.meteor
64.Pentaho
65.Ansible
66.VPS
67.技術書メモ
68.Vagrant
69.Docker
70.dokuwiki
71.Apple Watch
72.Webサービス
73.セキュリティ
74.Elastic Search
75.Wordpress
76.クラウド
77.英語
78.MVNO
79.シンガポール
80.マレーシア
81.管理人さん
82.管理人さん
日記の主な内容
サイト運営/開発
検索エンジン情報
・技術ネタ(Berkeley DB,
Linux, Perl, サイト作成)等

サイト管理
全まとめ
サーバー管理
定期処理状況
開発予定
削除提案
作品追加依頼
OP/ED追加依頼
OP/ED not found
作品提案承認欄

格言 fromスクライド
この世の理は即ち速さ
20年かければ馬鹿でも
傑作小説を書ける

助けられたら助け返す
それが俺のルール

強くなるには
一番弱い考えをする事だ
そしてその考えに反逆する




右側に何か入れてみるテスト


仕事でのサイト
介護DB
Helpyou
Doctor career
Nurse career
上へ ↑上へ 最速検索作品DB皆声