ニュースサイト向けの即席サイト軽量化法 後編
前編、中編と続いてサイトの軽量化の話をしたが、最後は閲覧者への負担等を減らすTipsなどを。
CSSのbackgroundでfixedを使用しない
スクロールしても画像の位置がそのまま、なんてページがよくあるが、ブラウザのスクロールがかなり重くなるので、仮に設定する場合でも小さくするなどといった配慮が必要。
img要素にはwidthとheightを
widthとheightが指定されていない場合、ブラウザ側で画像を取得して幅と高さを設定して表示する。
これだけならまだいいんだが、転送速度が遅かったりすると、ソースを全て読み込んだあたりでも画像を読み込んでくれないので、困ったことが出てくる。それはアンカーへのジャンプ。
URLの最後に#exampleなんてついてたりすると、ページ内の指定された場所までスクロールしてくれるのだが、そのページ内に画像がwidthとheightの指定無しで表示されていた場合、
- 真っ先にHTMLを読み込む
- HTML部分の描画が終わってアンカーへジャンプ
- 画像の読み込みが完了して高さと幅を調整
- 画像の量次第では変な位置まで表示位置がずれる
このような手順で最終的にブラウザでの表示位置がずれてしまう。こうなると閲覧側としては混乱するばかりだ。なんで全然関係ない部分に飛んだんだろう？ と。
こうならないためにもwidthとheightの指定は絶対するように。OS的にも余計な描画量が減るので一石二鳥。
背景が「白」なら文字は「黒」は間違い？
間違いではないが、やや灰色に近づけたほうが目に優しい。例えばこのサイトは「#222233」で指定している。背景「白」で文字「黒」でフォントサイズ9px固定とかだと、「目がぁー！ 目がぁー！」となること請け合い。
最後に
三回に渡ってグダグダ書いてきたが、今まで書いたことは何一つ改善しなくてもサイトの運営には全く困らないだろう。だが、時間をかけて改善した見返りはジワジワと現れてくる。何よりも閲覧者へのデメリットとなることが一つもないのだから、人に見てもらうことを前提としているならば改善すべきだと俺は思う。
あと、テーブルレイアウトについてはそこそこ肯定。下手にfloat段組利用されて、ウインドウ小さくするとメニューがすっ飛んだり、ブラウザの文字を拡大するとレイアウトが崩れたりするよりは、テーブルでレイアウトされたほうがまだマシ。でも多段テーブルだけは勘弁な。
Info
- 投稿日
- 2005年3月6日
- このエントリのURL
- このエントリへのリンク（HTMLタグ）
- ブックマークに追加する
-
Navigation
- 関連のあるエントリ
- No related posts.
- 新しいエントリ（日付順）
- 3人に1人は（自称）インターネット「上級者」
- 古いエントリ（日付順）
- CSS記述規則「プロパティ別整理法」の提案
Comment
投稿したコメントは公開されません。サイトオーナーのみが閲覧できます。
返信等を希望する場合は、コメント内に連絡先のメールアドレスかサイトのURLを入力してください。
2005
0306
