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

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

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

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

方法はいろいろあるのですが、今回は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>

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

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

●タイプ2

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

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

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

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

●タイプ3

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

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

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

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

●タイプ4

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

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

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

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

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

ブログに設置するコードはこんな感じ。

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

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

今日のわかった

非同期化すると、快適ですよー。

ツール・サービス
スポンサーリンク
当ブログの記事に共感していただけたら、また読みに来ていただけると嬉しいです。読んでくれる方の数が多くなると、更新するヤル気に繋がります(^^)
フォロー、ブックマークしていただけると、ブログ更新を見逃しません

コメント

タイトルとURLをコピーしました