インターネットコラム スタイルシートCSS)でページサイズダウン!表示が速い!
ノミでもわかるインターネット
スタイルシートでページが軽くなる?
トップページからテーブルタグを全て無くし、スタイルシートを使ってデザインに変更してみると、スタイルシートで作成しただけで、44kから20kほどにサイズダウンです。余分なタグを無くすだけで、ずいぶん、スリム化が実現できました。
 トップページが重い!
実はここの所、ずっと悩んでいたことがありました。
それは
「トップページが重い!」
ということです。
サイト開設当初より
「絶対に50kは超えないぞ!」
の意気込みでサイト作成してきて、超えてしまいそうな危機に陥ると
「リニューアルだ!」
とトップページのメニューを見直したり、出来る限りの画像をはずしたり、昔と現在のページとは全く違う装いです。以前はトップのメニューを囲っている枠の四隅を丸くするのにも、全て画像で作成をしていました。
とにかく必要のない画像はすべて削除・トップに出す必要のないメニューを中入れにして→これでトップページが、だいたい44k。うーん、微妙です。現在はブロードバンド環境なので、そんなにストレスは感じませんが、ダイアルアップ接続なら、もっと軽いほうが良いに決まってます。
トップのページタイトル画像がだいたい6k。これの解像度を下げようか・・・試しに下げてみたら、これまた、すごくきたない画像に。そうするとタイトル画像はいじれない。(書き直しが必要ということです→もっとサイズが小さくなるように)
 しぶしぶテーブルデザインを卒業することを考えます
  • テーブルデザインがすたれ傾向(ポータル見ると、テーブルタグだらけだったのに、テーブルが無くなってる)
  • テーブルデザインはタグをものすごく必要とする(ページサイズが大きくなってしまう)
  • 人気サイトや検索エンジンでの上位表示サイトの多くが、テーブルデザインではなく、スタイルシートの活用をしている
  • タグの簡素化で検索エンジンのロボットがキィーワードを集めやすくなる(SEO対策にも有効)
以上の事を聞くと、重い腰を上げるしかなさそうです。何で重い腰か?
  • ブラウザによって表示が違ったりする(ブラウザ毎にチェックが必要)
  • ちょっとの時間ですぐに変更ができない(時間がかかる)=すごく面倒
もしかしたら、同じような理由から、スタイルシート変更を迷っているサイト運営者様もいらっしゃるかもしれませんね。作成途中では、本当にいろいろな事がありました。叫びたくなる、いや、叫びましたね上手く表示できなくて。
 ブラウザで表示が違う
すべてのブラウザに同じように表示というのは、出来るはずがありません。そこで、よく使用されているブラウザに的を絞ります。IE・Mozilla Firefoxなどが、よく使われているブラウザです。また、サイト訪問のアクセス解析を利用して、主要訪問者のブラウザに合わせるのも方法です。
的を絞ったブラウザで表示出来れば、ほぼ完成です!また、サイズのスリム化で、トップページ表示までの時間も短くなりました。あと、もう一息です。
 結論
スタイルシート(外部)でのページの作成で、ページは見違えるほど軽くなります。ユーザビリティのUPにもつながります。
 役に立つリンク
  • CSS Style
    私の大好きな管理人さんのサイトでCSSをテーマにして初心者にもわかりやすく解説しています。これからCSSを勉強したい人におすすめです。
 コラムガイド
 ■メール
 ■PC
 サイト運営
 サイト運営
 スタイルシートでページが軽くなる?

-当サイト利用によるトラブルや損害について一切の責任を負いかねます。ご利用の際は、必ず該当サイトで確認を-