CSSレイアウトの魅力 - 表示の速さ

TABLEタグとのHTMLソース読み込みの違いが表示の速さに影響。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

CSSレイアウトの魅力 - 表示の速さ

ソースの軽さ」では、HTMLファイルの容量が小さくなることで、ページを開くまでの時間を短縮できるということに触れましたが、CSSによるレイアウトで表示が速くなる理由は、ソースが軽くなるからだけではありません。

TABLEタグでレイアウトした場合、サイトが表示されるのはTABLEタグを閉じた後、つまり「</table>」が読み込まれた後になります。「</table>」が記載されるのは当然、ページの末尾になるわけですが、ボリュームの大きなページの場合、ソースを最後まで読み込むまでには少々時間がかかります。

一方、DIVタグを用いたCSSによるレイアウトの場合、ソースが読み込まれた部分から表示されるため、最後まで読み込む時間がかかりません。

この「最後までソースを読み込む時間」ですが、実際の時間にすれば1~2秒と、決して長くはありません。しかし、この1~2秒が、訪問者に大きなストレスを与えてしまいます。

また、JavascriptなどをTABLEタグ内に組み込んだサイトでは、エラーなどが発生し、ソースを最後まで読み込むことができなかった場合、ページが全く表示されないといったケースもあります。そのような場合でも、DIVタグを使ったCSSレイアウトでは、読み込んだ部分は表示されているわけですから、最悪、エラーが発生した以降の記述のみが表示されなくて済みます。(CSSから話はそれますが、このようなケースが考えられるため、ページ上部でのCGIやjavascriptの利用はあまりお勧めできません。)

ページが表示されるまでの速さ、エラーが発生したときのリスクなどを考えても、CSSによるレイアウトはより有効であると言えます。