時々 読み込みがとんでもなく重くなっちゃうブログパーツを、ストレス無く読み込む方法を考えよう！と云うお話です。

例えばこのブログで愛用しているブログパーツのサービスで言うと「drecomrss」「feedSket」など、前回紹介したブログ更新通知を行うブログパーツは大抵 表示が遅く、ページの先頭に置いていたりすると非常にストレスがたまります。

ランキングサービスで言うと「ブログランキング ドットネット」も時々。

この手のjavascriptを使用したブログパーツは、サービス元のサーバーの調子や込み具合で、時々だけど本当に重くなりますね。

そんな表示の重たいプラグインは、以下の方法でストレスなく表示する事が可能になります。

プラグインは右サイドバーで使用する

厳密に言うと、HTMLコードの流れが、

「ブログタイトル部分」→「ブログの記事本文」→「ブログパーツ部分」

上記のようにデザインされているブログテンプレートを使い、画面をスクロールしなければ見えない部分にプラグインを配置していれば、たとえ表示にもたついていても、それに気が付くコトはありません。

ブログのデザインを工夫してHTMLの後ろの方にブログパーツを置いてやれば、何とかなります。

左から順に読み込んで行くデザインのブログの場合、サイドバーの左側のてっぺんに重たいブログパーツがあったりすると、そこで引っかかって全体が表示されなくて、見るのも嫌になっちゃたりしますよね(´Д｀；)

でもこれは根本的な解決方法ではありません（＾_＾;

ブログパーツを埋め込みオブジェクトにする1

※注） 外部ファイルを使う性質上、LivedoorBlogの無料版などのhtmlファイルのアップロードが出来ないサービスではこの技は使えません。

HTMLのタグに「object」タグというものがあります。
HTML文書、画像に限らず、様々な外部ファイルをブログやホームページに埋め込む為のタグです。

外部にプラグイン表示用のHTML文書を用意して、
ブログ内にobjectタグで埋め込んでやる。

これでたとえプラグインの読み込みや表示が重くても、全体の描画がもたつく事はなくなります。

例えば以下の様な文書を作ります。（青字部分はhtmlのお約束です）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Google Adsense</title>
<meta http-equiv="Content-Style-Type" content="text/css">       
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css"><!-- body { margin: 0; padding: 0; overflow: hidden; border: none; } --></style>
</head>
<body>
ここにブログパーツのコードを書き込みます。
例えば私のziyu.netのアクセスランキング表示の場合だと
<script type="text/javascript"src="http://pranking9.ziyu.net/js/boktv.js"charset="utf-8"></script>
</body>
</html>
※2008.08.19 一部記述が間違っていたので修正しています
※2008.09.19 XHTML 1.0 Transitionalで DOCTYPE宣言すると、上記の書き方では上手く枠線が消えません。

これを「ranking.html」などと名前を付けて保存、サーバーにアップします。
そしてブログ内のブログパーツを表示させたい箇所で

<objectdata="http://～ブログのパス/ranking.html"type="text/html" width="250" height="700"> アクセスランキング（任意の説明文）</object>

とobjctタグを使ってやると、外部ファイルとしてランキング読み込んでくれます。もちろんwidth（幅）や height（高さ）はブログパーツの大きさに合わせます。

これで表示の遅いブログパーツを使っても、そこでサイト全体の描画が遅くなる事は無く、スムーズに全体を表示してくれます。

ブログパーツを埋め込みオブジェクトにする2

※注） この方法も外部ファイルを使う性質上、LivedoorBlogの無料版などのhtmlファイルのアップロードが出来ないサービスではこの技は使えません 。

実はobjectタグを使うと、埋め込むファイルによってはIEではスクロールバーなどの枠線が消えず 、キレイに表示させるのに一苦労する場合が多々あります。

そんな時はiframeタグを使用すると一発解決です。

上記OBJECTタグを使用する場合と同様に外部にブログパーツのタグを書き込んだ外部HTMLファイルを作り、

<iframe src="http://～ブログのパス/ranking.html"title="ランキング" frameborder="0" scrolling="no" style="WIDTH: 250px;HEIGHT: 700px">アクセスランキング（任意の説明文）</iframe>

とブログ内のパーツを表示したい部分に書き込みます。
コッチの方がお手軽ですかね。

objectタグやiframeタグは、サービスによっては禁止されていないか？

さて、これだけ便利に表示を軽くしてくれるタグですが、ブログパーツを配布されているサービス会社さんによってはこのような使用方法を禁止されているかもしれません。

利用規約をキチンと読んでからこの方法を使うようにしましょう。

広告スクリプトを object タグで読み込む方法 : 亜細亜ノ蛾 - Weblog
▲実はこのブログでobjectタグを使う方法を学びました。
この方はadsenseをこの方法で表示されています。現在ではadsenseの表示が遅くなる事は滅多に無いので、100%正しいコードでhtml文書を書きたい人向けの情報です。

Google AdSense を XHTML valid に : 亜細亜ノ蛾 - Weblog
▲objectタグでadsenseコードを埋め込む方法に問題ないか確認していらっしゃいます。2007.09.11時点では大丈夫なようです。

アフィリエイトによる検索順位の低下について
▲iframeタグで各社アフィリエイトサービスのリンクタグを埋め込んだ場合どうなるか？
各社でOK、NGの判断が違います。

今回の場合は「表示の重いプラグインを何とかしたい」と云う事なので、上記リンク群は「アフィリエイトの規約に沿っているかどうか」が主題で、やや論点がずれています。が、参考にはなりますよね？

 

まとめ

と、云う事で私の運営するブログでは、現在非常に表示のもたつくRSSリーダー系のブログパーツのみをobjectで埋め込みしております。
リンク先にジャンプした場合、埋め込んだファイル名がリファラとして伝わってしまうという欠点 がありますが、同一ドメイン内のリファラなので大きな問題では無いでしょう。

 

Drecom RSSに限らず、複数のブログのRSS・更新情報をまとめて表示出来るブログパーツって、なかなか見つかりませんよね。いくつかは同様のサービスがありますが、ドコも同じくらい表示にモタつきかあるように感じます。

毎日更新するブログ、やっぱり自分のお気に入りのブログパーツで固めて「華やかに」「賑やかに」そして「楽しく」、はたまた「便利に」運営したい！！！って考えるのが人間ってモンです。

でもブログのサイドバーにどんどんブログパーツやプラグインをどんどん追加していくと、それに比例してブログの表示は遅くなっていきます。

パソコンのメモリをガンガン食うようなタイプのブログパーツは仕方が無いとしても、そのブログパーツを提供しているサービス元のサーバが貧弱で表示が遅くなっちゃう場合は十分有効な方法です。
便利だけど重たいプラグインや外部サービスを、何とかストレス無く使いたい！

そんな時は是非お試し下さい。
（一度追記で別の方法も書きましたが、テスト不足でした。上手しなかったので削除しました）