個別ページの軽量化してみた

ここの裏側しばらく放置してたんですが、先日麦の勢いに任せて軽量化しました。

まず不必要なパーツを洗い出すために、ページのどこがクリックされているかを解析してくれるサービス「CrazyEgg」のお試し版にHomeと当サイトアクセス上位3ページを登録し、1ヶ月ほど走らせてみました。
↓ その結果取ることになったもの。

それと、prototype.jsのLitetboxからjQueryのlightBoxに乗り換えました。
ロード時に謎の黒いオブジェクトが一瞬生成？されるのも気になっていたので。

jQuery版 lightBoxは、定番のThickBoxよりアニメーションエフェクトが滑らかなので、最近一番お気に入りのプラグインです。ただ、公式サイトHow to useには「特定の拡張子のファイルに直リンクしていた場合」の例がなかったので、不勉強ながらいろいろ参考に以下のようにしてみました。

この場合、拡張子がjpg、gif、pngの場合のみ、lightBoxで表示するようになります。
jQueryは1.2.1Minifiedを使用です。

$(function() {
$('div.entryBody a[@href$=".jpg"]')
.add('div.entryBody a[@href$=".gif"]')
.add('div.entryBody a[@href$=".png"]')
.lightBox();
});

それから、a要素のtitle属性は「Click to Enlarge.」が共通で入っているので、lightbox121行目の

 <span id="lightbox-image-details-caption"></span>

を削除してtitle属性を表示しないように。

これで気持ちページの読み込みが早くなったような気がします。
ま、放置してたのが一番の理由なんですけどー。
ついでにFireBugの接続を見てたら、背景画像のロードが“やっぱり”時間かかっているようなので、そろそろデザインも変えたいなぁ…。カテゴライズもマークアップルールも見直したいし…。

その他の変更点

関連記事もどうぞ: