これはpermissionの確認などの為なのだけど、そのせいで負荷が高い。読み込みも遅い。
画像を大量に張ると酷いことになる。どうにかしたい。
とりあえず思いつくもの。各々は直交する。効果は推定。
| 表示の高速化 | サーバの負荷 | 帯域 | 手間 | |
| 直リンにする | 少し効く | 減る | 変化なし | かかる。設計の見直しあり |
| 遅延読み込み | 効く | かなり減る | 減る | 殆どかからない |
| 画像埋め込み | 効く | 減る | サイズ依存 | そこそこ |
1つ目は、現在スクリプトを介しているものをapacheだけで解決できるようにするというもの。permissionを真面目に考えると結構厄介な問題な気がする。publicなものとそうでないもので、置き場所を変えるとかかな。
2つ目は、jsを使ってスクロールするまで画像を読み込まないとかやる方法。
Lazy Load Plugin for jQuery等を使えば楽。
これはdocument.readyのタイミングでimgタグのsrcを一旦外して、view portに入ってきたら復活させるということをやっている。ただ、最近のブラウザだとリクエストを出すのが早いので、結局srcを外す前に既にリクエストが出てるような。意味ねー。
3つ目は、Google News等で使われる手法。base64でsrcタグにjpeg等をそのまま埋め込む。リクエストが減らせるけど、画像の転送量自体はbase64のため13%増えるので、ある程度小さい画像までなら有効。リクエスト自体のオーバーヘッドが1KB弱とすれば10KB以下なら埋め込んでも良さそう。
1つ目はちょっと面倒なことになりそうなのでパス。
で、2つ目と3つ目を導入した。
まずimg要素のsrcに低画質な1.5KB程度のjpegをbase64で埋め込み、original属性に本当のsrcを書く。
次にlazy load pluginを改造してsrcを一旦外すコードを消し、original属性があればlazy load対象とする。
これで画像を大量に張っても今見える範囲の分だけのリクエストしかでない。
そして、そのリクエストが完了するまでは低画質のサムネイルが出る寸法。
user agentが携帯等だったらlazy loadを殺して、低画質のサムネイルだけでよいかも。
しかし大して見に来る人もいないブログだというのに、そのブログのためにコード書いて、それでブログを更新するとはなんというメタブログなんだここは。