遅いブログパーツを高速表示する方法

ブログパーツの表示が遅いと、ページ全体の描画が止まってしまいますよね。

ブログパーツを「非同期化」してしまえば、ストレス無くページが表示されるようになりますよ。

非同期化とは、ページの一部分を、全体のページから独立して描画させる方法です。

方法はいろいろあるのですが、今回はJavascriptの「setTimeout()」関数を利用しました。

setTimeout()は、メインの描画とは別に、指定した時間後に命令を実行する関数です。時間を0にすれば、非同期で動作させることが可能です。

ブログパーツは、主に3つの形に分けることができます。各々の形ごとに、高速化する方法を紹介します。

●タイプ0

<iframe src=”http://hogehoge.com/blogparts.cgi”></iframe>

iFrameのタイプは、すでに非同期化されているため、特に対策は必要ありません。

●タイプ1

<a href=”hogehoge.com”><img sec=”hogehoge.com/image.cgi”></a>

画像を表示させるタイプで、一番シンプルな形です。画像の描画が完了しないと、続きが描画されませんので、非同期化します。

<span id=”blogparts”></span><br /><br /> <script><!–<br /> setTimeout(function() {<br /> document.getElementById(‘blogparts’).innerHTML = ‘<a href=”hogehoge.com”><img sec=”hogehoge.com/image.cgi”></a>’;<br /> }, 0);<br /> //–></script>

のように記述すればOK(URLなどは実際のものに書き換えてください)です。複数のブログパーツを非同期化する場合は、id値（blogparts）を変更して、重複させないようにしてください。

●タイプ2

<div id=”hogehoge”></div>

<script src=”http://hogehoge.com/blogparts.cgi”>&lt/script>

divタグを、Javascriptで書き換えるタイプです。この場合はappendChild()関数で、script部を後からぶら下げてあげると良いでしょう。

<br /><br /> <div id=”hogehoge”></div><br /> <p><span id=”blogparts”></span><br /><br /> <script><!– setTimeout(function() { var obj = document.getElementById(‘blogparts’) var scriptObj = document.createElement(‘script’); scriptObj.src = ‘http://hogehoge.com/blogparts.cgi’; obj.appendChild( scriptObj ); }, 0); //–></script>

と、記述すればOKです。注意点はタイプ1と同じです。

●タイプ3

<script src=”http://hogehoge.com/blogparts.cgi”>&lt/script>（ページ内にひとつ）

スクリプトのみのタイプです。このパターンが一番難しいです。なぜかというと、このパターンのパーツは、document.write()関数で描画させているものがほとんどだからです。

詳細は省きますが、簡単に言うと、document.write()関数は、setTimeout()関数と相性が悪くて、前記のような方法では上手く動きません。

もし、ページ内にこのパターンのパーツがひとつだけ設置するのであれば、document.write関数を書き換えて、あとで元に戻すことをすれば非同期化が可能です。

<span id=”blogparts”></span><br /><br /> <script><!– // 書き込みする場所 el = document.getElementById(‘blogparts’); // document.writeの代わりの関数を指定 document.write = function(t) { // innerHTMLで、指定した要素に書き込み el.innerHTML += t; }; // 退避したdocument.writeを戻す関数 document.write.res = function() { document.write = s; } setTimeout(function() { // document.writeを退避 s = document.write; var obj = document.getElementById(‘blogparts’); var scriptObj = document.createElement(‘script’); scriptObj.type = ‘text/javascript’; scriptObj.src = ‘http://hogehoge.com/blogparts.cgi’; obj.appendChild( scriptObj ); // document.writeを元に戻す document.write.res(); }, 0); //–></script>

●タイプ4

<script src=”http://hogehoge.com/blogparts.js”>&lt/script>（ページ内に複数）

適宜対応しなければならないので、具体例は省いて、方法だけ説明します。

呼び出すjsファイルを読み込んで、document.write(…)関数を、document.getElementById(‘blogparts’).innerHTML = ‘…’;

に書き換えるスクリプトを書けばよいのです。phpでもperlでも、なんでも良いと思います。

当ブログのTopsyのブログパーツは、この方法で非同期化しています。かなり適当に書いたコードですが、もし必要ならご参考にどうぞ！topsy.php

ブログに設置するコードはこんな感じ。
<span id=”blogparts”></span><br /><br /> <script><!– setTimeout(function() { var obj = document.getElementById(‘blogparts’) var scriptObj = document.createElement(‘script’); scriptObj.src = ‘https://www.wakatta-blog.com/topsy.phptxt’; obj.appendChild( scriptObj ); }, 0); //–></script>

※上記のコードには、間違いあるかもしれません。エラーが出たら、適当に修正してください。私には聞かないでください^^　自分でプログラムをしたことがある中級者以上向けの内容です。

※Javascriptを利用しているため、JavascriptをOFFしているブラウザでは、当然動きません。まあ無視してよいかと。