*
ホーム > 偽テクニック編 目次 > テーブルを使っても表示を速く(?)する方法

テーブルを使っても表示を速く(?)する方法

TABLEの中に大量の文章を入れない
  ヘッダ部分のTABLEは本文と分ける


実は、これってweb-channelさんの
ファイルサイズ削減に関するいくつかのTipsより引用です。
http://web-channel.com/
  1. TABLEの中に大量の文章を入れない
  2. ヘッダ部分のTABLEは本文と分ける
ページ全体をひとつのTABLEでくくってしまうと、ページ全体のファイルを読み込み尽くすまで内容が表示されません。

ほんと、最近まで、しらなかったんです!

だから、おもいっきりくくってました!
最低限、これだけは実行しないとなぁーと、ちょっと反省



 つまり



■橘課長のWebな憂鬱...
テーブルレイアウトに悩む
本文****************
*******************
*******************
*******************
*******************
*******************
*******************
*******************
*******************
Copyright(c)橘リュウイチ

↑こうやって、ひとつのテーブルでくくってしまうと(わかりやすいように枠を表示してます)
全ての文字を読み込むまで何も表示されないのです。

本文が長くなればなるほど表示されないのです。(あ゛ぁーしらんかった)
テキストや画像が多いのでページが重くなり表示が遅いと思っていた

↓なので今後は、こうする↓

■橘課長のWebな憂鬱...
      切り離す
テーブルレイアウトに悩む
      切り離す
本文****************
*******************
*******************
*******************
*******************
*******************
*******************
*******************
*******************
      切り離す
Copyright(c)橘リュウイチ
(わかりやすいように枠を表示してます)

↑これならから上から順番に表示されるので
「あー読み込んでるんだな」とわかるので閲覧者に優しいわけですね♪
これからは、ユーザーアビリティーを考えた人に優しいユニバーサルWebデザインのホームページ作りを目指してボヤいていこうと思ってます(ボヤくのかよっ!)

上の文章ぢゃ、「よくわかんなーい?」
の声がありましたので、ちょっと追記します。
つまり同じページ容量でも表示されるまでの
体感時間が違うってことを言いたかったのです。

比  較
A テーブルを全部くくったページ
↓     ↓     ↓
B テーブルを分けたページ
↓     ↓     ↓
■橘課長のWebな憂鬱...
テーブルレイアウトに悩む
本文****************
*******************
*******************
*******************
*******************
*******************
*******************
*******************
*******************
Copyright(c)橘リュウイチ
■橘課長のWebな憂鬱...
テーブルレイアウトに悩む
本文****************
*******************
*******************
*******************
*******************
*******************
*******************
*******************
*******************
Copyright(c)橘リュウイチ
わかりやすいように枠を表示してます。
枠を非表示にすれば、まったく同じに見えます。

Aの全部くくったものだと一番下まで読み込み尽くすまで、何も表示されないのに対し、Bのテーブルを分けたものだと上から順番に表示され「おっ、読み込んでるな!」と、わかるのでストレスを感じづらいわけですよ♪

テーブルでレイアウトされてるかたは、まさに必須テクニックですね!
そんなのとっくにしってるってか♪(しらんかったのはオレだけさぁー)
確認の為、企業のサイトを見れば、ほとんどこうなってましたね!

最終的に全て表示されるまでの時間は、たぶん同じくらいかもしれませんので、タイトルの【テーブルを使っても表示を速く(?)する方法】は、ちょっと意味合いが違うかもしれませんね(笑)

関連ページ
Webな憂鬱 ホームページの表示を速くする本当の理由

偽テクニック編の目次に戻る


Page Top


main

BR→
main_box