こってりモダンハウス再アップ！／転送量対策始めてみる

今後のことも考えて転送量減らすのに試したいことがあって、昔 Easter Egg のイベントで投稿した「こってりモダンハウス」を再アップしてみました。

［ちょっと後に追記］ これを書くために書いたようなものなのに書き忘れてたんですが、「こってりモダンハウス」で画像表示されないって方は、一度ブラウザの更新ボタンを押したりしてキャッシュを更新してください。

それで Twitter でも少し書いたのですが、転送量対策として以下の方法を取ってみることにしました。

• 画像を直リンクできるストレージサービスを使う（とりあえずのところ「お家紹介」と「おみやげ置き場」だけの予定）
• jQuery Unveil を使って、画面に画像が見えるようになった時点で画像を読み込むようにする

ストレージ

photobucket はしばらくすると勝手に画像が劣化するので（jpg の場合）、Copy.com というオンラインストレージサービスを試しに使ってみました。Dropbox みたいなクラウドってやつらしいです。
Dropbox は１日の転送量が 10GB という制限があるそうですが、Copy はないそうなので。まあ、10GB あれば十分ですけどね！（私が借りてるサーバーより多いｗ）

紹介リンクから登録したので、5GB 追加で無料で 20GB もディスクスペース貰えました♪
興味があったら、紹介リンクお知らせしますよ！ 紹介したほうもされたほうも 5GB 増えるのでｗ

有料プランもあることから、突然お知らせなしにサービスがなくなるってことはないと思いますけど、事前連絡あったとしても画像 URL 変更するの面倒くさい～という不安はありますね 杞憂なことを祈る！

jQuery Unveil

画像ロード中、左のような画像（実際にはアニメーションします）が表示されるようにしてみました。
やはりよそから引っ張ってくる分、Copy を利用した画像は読み込まれるまでに多少時間がかかるので見る機会は多いかも。でも自分のサイト画像だと、ローディングのアニメ gif を見るほうが難しかったりｗ

ページ表示したものの見ないで閉じる人の分、転送量少なくなるんじゃないかなと期待。
あとから画像を読み込むため、ページ自体の初期読み込みも速くなると思うので、スマホの方にも優しいかも？　画像表示のタイムラグがうぜぇってなるかもしれないですが

肝心のシム日記＆雑記での実装はこれからですけどね。
JavaScript をオフにしている場合の対策もするので、一気に置換できなそう～…。とりあえず今後投稿する分はやっていくつもりです。

---

そして拍手どうもありがとうございましたー！
昨日返信不要でコメントくださった mmみどりさん、ありがとうございました！ お役に立てて光栄です～