WEBデザインの作法 » web http://web.kokok.net webデザインに関する作法をシステム上、ユーザーインターフェース上、コストパフォーマンス上、でデザインに要求される要件をまとめています Mon, 09 May 2016 01:34:05 +0000 ja hourly 1 http://wordpress.org/?v=3.2.1 ページ内の読み込むファイルの数を減らそう http://web.kokok.net/lists/7 http://web.kokok.net/lists/7#comments Tue, 03 May 2016 22:44:57 +0000 adominn http://web.kokok.net/?p=7 ページ内で読み込むファイル数が多いと、ページの読み完了に時間がかかったり、ページが表示エラーになったり、部分的に欠落したり、あるいはレイアウトが崩れたりします。

特にアクセスの多い時間帯に起こりがちですが、インターネットやサーバーの不具合などの原因不明で片付けられることも多いかもしれません。

しかしこれは多くの場合、ページを作ったデザイナーの人災です。

webブラウザーがサーバーに複数のファイルの要求を出す場合に1ファイル毎に以下の処理を行います。

  1. DNSサーバーにドメインのるサーバーのipアドレスを問い合わせる
  2. DNSサーバーからipアドレスを受け取る
  3. 指定されたipアドレスに対してファイル提供要求を出す
  4. 指定されたipアドレスからファイルを読み取る
各サーバーにはサーバーの保護のために以下のような制限がかかっています。
「同時アクセス数の上限値」
webブラウザーからのファイル提供要求があまりにも多い場合サーバーは提供要求を無視しますので、cssファイルが無いとレイアウトが崩れます、画像ファイルがないと画像を中途半端に表示したり表示しなかったりします。
この現象は動的なので原因不明でそのままになったりしやすいのですが明らかに人災です。
また、1つのステップで最低でも128バイトのデーターのやり取りがあります。尤も実際には500bytes程度やり取りがあると思います。
読み込むファイルの内容が例え以下の1行だけだとしても

line-height:12pt;

やり取りされるデーターは18bytesではなく、18bytes+3000bytes*5=1518bytesとなります。
小さなファイルが多くあるとやり取りされる全体のデータ量は「2桁」多くなるケースも考えられます。
以上から、
ページ内で読み込むファイルの数は最低限にしましょう。
  1. cssファイルやjavascriptのファイルはできるだけ1つにまとめる
  2. 画像ファイルを必要以上に多くしない、1つ尾ファイルにできるのであればまとめる
などの方策が必要になります
]]> http://web.kokok.net/lists/7/feed 0 Webデザインで大切なこと http://web.kokok.net/lists/1 http://web.kokok.net/lists/1#comments Thu, 07 Apr 2016 04:22:05 +0000 adominn http://web.kokok.net/?p=1 デザインとはただ単に絵を描くことではありません。
全体の構成を考え、効果を効果的に達成するためのスキームを考え。
ここのページの設計を行うことが大切です。
そのために必要なこと、テクニックを紹介したいと思います。

]]> http://web.kokok.net/lists/1/feed 0