ページの軽量化

トップページをリニューアルした理由について書きます。

最近ページの表示にかなり時間がかかるときがあった。現在は軽くしてしまったので違うが その当時は大体１２０ＫＢくらい。

一般の個人ページであれば全く問題のないレベルだとは思いますが、通過点に過ぎない おーしゃんぶるーにとっては許されないレベルかもしれない。ページの重さを計測するツールを紹介していますが １００ｋＢ以上は普通以下の判定になってしまいます。

特に今まで気にはしませんでしたが、これからもっとたくさんの人にきて欲しいと思うと 解消しておかねばならない問題の一つでした。

おーしゃんぶるーに限らなければいくつかの原因があると思います。

• 重い写真などの画像を使用している。
• ＦＬＡＳＨを使用している。
• ページの一部にＣＧＩを用いている。
• ＧＩＦ等の動く画像を多数使用している。
• サーバの転送量が少ない。
• サーバの処理速度が遅い（ＣＧＩの使用などによる過負荷）
• テーブルなどの構造を入れ子に多数使用している。
• フレームページなどで多数のページを表示している。
• 異常にテキストが多い。

といったところでしょうか。

上記でおーしゃんぶるーに該当するのは

• 重い写真などの画像を使用している。
  →使用していた。
• ページの一部にＣＧＩを用いている。
  →電光掲示板・カウンタ・アクセス解析
• ＧＩＦ等の動く画像を多数使用している。
  →まあ、ほぼなし。
• サーバの処理速度が遅い（ＣＧＩの使用などによる過負荷）
  →LOLIPOPですが、CGIの処理速度が若干遅い(重い)。
• テーブルなどの構造を入れ子に多数使用している。
  →激しい入れ子になっていました。

と、こんな感じでした。

この中で改善できるものとできないものを分けると。

●可能なもの。

• 重い写真などの画像を使用している。
  →使用していた。
• ページの一部にＣＧＩを用いている。
  →電光掲示板・カウンタ・アクセス解析
• ＧＩＦ等の動く画像を多数使用している。
  →まあ、ほぼなし。
• テーブルなどの構造を入れ子に多数使用している。
  →激しい入れ子になっていました。

●不可能なもの。

• サーバの処理速度が遅い（ＣＧＩの使用などによる過負荷）
  →LOLIPOPですが、CGIの処理速度が若干遅い(重い)。

となり、ほとんど全てを改善できることがわかります。

●画像をどうするか。
なくしてしまうと寂しいので、ある程度は使いたいと思っていました。 なので、「細い」画像を用意し、それをバックグランド画像に指定して 連続表示させるようにしました。

おーしゃんぶるーのグラデーションになっている部分は縦５ピクセルの 小さな画像でできています。

また、タイトルも別で作成し、背景を透過にして作成しました。
作成に使用したツール→プンプンソフト

これで６０ｋｂ程の軽量化を実現。

●ＣＧＩをどうするか。
何もしませんでした。ページ内の位置も悪いのかも知れませんが、 おーしゃんぶるーの肝の一つなので何もする気はなし。

やるとすればテーブルから外に出して上げることくらいでしょうか。

●ＧＩＦをどうするか。
ＧＩＦが多数あると重くなりますが、おーしゃんぶるーでは「ＮＥＷ」を使用している 程度のなので無視しました。

但し、アニメーションＧＩＦが多くなると、表示にも時間がかかりますし、表示後も 見ている方のマシンスペックによってはぎこちない動きになったりします。

→特にＦＬＡＳＨは見ている方のスペックによるところが大きいです。自分のＰＣは 大丈夫だからと思っていても、多数の人が「カクカク」した動きに困っていたり、 最悪ブラウザが落ちるなんてことも。

●テーブルの入れ子
解消しました。最大で4つのテーブル入れ子状態がありましたが、ある程度テーブルの 数を減らすことに成功しました。

しかし、最大入れ子の数は3つのままです（汗）

若干軽くなったような気がします。
ただ、ＣＧＩ表示のせいか、ページがちゃんと開かないことがあるようです。 う〜ん。。。どうしよう。

見た目的には、ちょっと見やすくなったと思っていますが、字の密度が高すぎて ごちゃごちゃして見えてしまいます。
ＣＳＳの調整とかして隙間をうまく作っていきたいと思います。

打倒「ワンクリック退場」へ向けてがんばるぞ〜〜〜〜