Blogが重くなる原因(その2)

昨日、「Blogが重くなる原因」というエントリーを書きました。
今日はその続きで、「tableレイアウトの問題」を取り上げます。

tableレイアウトとは?

HTMLでは、表組みを作るには「table」というタグを使います。
この表組みを利用して、複雑なレイアウトのページを作ることを、「tableレイアウト」と呼びます。
tableレイアウトでは、表の行/列のサイズを細かく設定して、レイアウトを決めていくという方法を取ります。

tableレイアウトは、複雑なレイアウトを比較的簡単に行うことができるというメリットがあります。
また、古いWebブラウザでも、表示が崩れにくいというメリットもあります。

Blogでは2カラムや3カラムなどの段組のレイアウトを取ることが多いです。
tableレイアウトを使えば、2カラムや3カラムのページを比較的簡単に作ることができます。
あちこちのBlogでHTMLを見てみると、tableレイアウトを取っているところが結構あります(特にレンタルBlog)。

tableレイアウトの問題

ところが、tableレイアウトを行うと、「表の中身をすべて読み込み終わらないと、表の部分が表示されない」という問題が起こります。
そのため、中身を読み込み終わるまでに時間がかかると、表が表示されるまでの間しばらく待たされることになります。

tableレイアウトのBlogの場合、サイドバーにBlogパーツをたくさん貼り付けた時に、問題が起こりやすくなります。
Blogパーツのどれかが負荷が高い状態になっていると、そのBlogパーツを読み込むのに時間がかかるようになります。
tableレイアウトにしていると、そのBlogパーツを読み込み終わらないとページ全体が表示されないので、表示が重く見えることになります。

ご自分のBlogがtableレイアウトになっているかどうかは、ページを表示してみれば分かります。
ページに接続してから、ある程度時間がたった後でページ全体が一度に表示される場合は、tableレイアウトになっていると思われます。

以下のリンクをクリックすると、当Blogのトップページをtableレイアウトにしたものが表示されます。
接続してしばらくしてから、ページ全体が一度に表示されることがお分かりいただけると思います。

tableレイアウトの例

解決策その1・Blogパーツをはずす

tableレイアウトで重く見えている場合、1つの解決方法は、「表示に時間がかかるBlogパーツ等を、ページからはずす」ということです。
また、Blogパーツ専用のページを作って、重いBlogパーツはそちらに移動するといった方法も考えられます。

この策なら、作業自体は自分で簡単に行うことができるでしょう。
ただ、「せっかくのBlogパーツをページからはずしたくない」という方も多いのではないかと思います。

解決策その2・tableレイアウトをやめる

もう1つの解決策は、「tableレイアウトをやめる」ということです。
tableレイアウトではなく、テンプレートとスタイルシートを工夫してレイアウトすれば、重いBlogパーツがあってもその手前まで表示されて止まるようになりますので、見た目上軽くなったように見えます。
ちなみに、当Blogもtableレイアウトは使っていません。

レンタルBlogでテンプレートを自由に編集できない場合、業者から提供されているテンプレートを順に試してみて、tableレイアウトを使っていないものを探す、というのが1つの策です。
また、テンプレートの中身を自由に編集できるレンタルBlogサービスに乗り換えるか、あるいはMovable Type等のカスタマイズ性の高いBlogツールに移行するという策も考えられます。

MT Cloud Starter Kit
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください