その他最近のコメント
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での作動を眺めた結果として、
| IE | mixiチェック | Twitter | Google+ | Facebook(Iframe) |
| IE5.5 | ○ | × | × | × |
| IE6 | ○ | × | × | × |
| IE7 | ○ | ○ | × | × |
| IE8 | ○ | ○ | ○ | ○ |
という作動状況でした。
ソーシャルメディアボタンのそれぞれのIEのバージョンへの対応状況に合わせて、表示／非表示は変わるようになっています。
こうした状況から見えるように、何だかんだいって、Firefox、Chrome、もしくはIE8以降(出来ればIE9以上)が当サイト、というより昨今のウェブページを見る上では推奨環境になるかと思われます。
なお、先日Chromeをお勧めしておきながらですが、正常に動くのならFirefoxが当サイトでは一番相性が良いようです
（相性原因調査中ですが、Chromeだと作品提案承認画面の表示が非常に遅いです）。
IE7以下だと、Facebookボタンがあるサイトだと、それがJavaScript版だとバグに巻き込まれてしまう事もあります(関係無いページをロードし続けて結果真っ白など)。
また、作動検証はしていませんが、Operaは古いOSでも動くので、OS対応が理由で最新ブラウザーを入れられない方にはお勧めです。
各ブラウザーのダウンロードページ
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)+'&u='+encodeURIComponent(location ._ href)+'&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)+"&layout=standard&show_faces=false&height=20&width=75&action=like&font=lucida+grande&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();} ;
} |
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)+"&layout=standard&show_faces=false&height=20&width=75&action=like&font=lucida+grande&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> |
|