Hatena::Groupugochara

Harimauの編集記録等

2011-11-26

こちらでもグループのスピードテストを行ってみた

| 16:05

うごキャラクラブ

の記事を受けまして、こっちでもスピードテスト。

トップページでやってみました。

YSlow

Yahoo提供の有名どころですね。悪かったものを上げていきます。

EHTTPリクエストの数を減らそう画像を含め外部ファイルが読み込まれすぎということです。画像をつなげてCSSで位置を指定させるとか、小さい画像はBase64で埋め込んじゃうとかするといいらしいけどめんどくさい
FCDNを使おう使いようがないので無視
FExpiresヘッダーを追加しましょうやりようがないので無視
FETagを設定しろできないって
F画像はHTMLで大きさを変えずに使用するサイドバーのうごメモのブログパーツの画像が悪いらしい

対応可能なものがHTTPリクエスト数を減らすしかない。それをやるのは面倒だし、編集がやりにくくなるので却下。

で、かかった時間のグラフ。やはり画像が大部分を占めてしまっているようです。

f:id:harimau_tigris:20111126152619g:image

なんか、うごメモのブログパーツの画像読み込みが妙に遅いという報告が・・・

まぁ、iframeで別枠で読み込んでるのでたいしたことはないんでしょうが。

追記

スカイさんが画像を軽量化してくださり、Make fewer HTTP requestsはEからCにまであがりました!

SiteSpeed

Google提供。Googleは検索ページの連続改悪を除いていい仕事しますね。

悪いのを上げていきます。

  • ×ブラウザのキャッシュを活用する
  • ×CSS スプライトに画像をまとめる
  • ×変更後のサイズで画像を提供する

一番悪いのはこれらしいですが、YSlowでも同様の報告はあったし、対応のしようがありません。

  • △画像を最適化する

これはやったほうがよさそうです。

  • △Keep-Alive を有効にする

これはやりようがないです。

  • △誤りのあるリクエストを送信しない

404になってるやつがいくつかうごメモのブログパーツに

YSlowでも報告されてるけど、うごメモのブログパーツできわるくねぇかなぁ


結論

結局、画像の容量が大きいのが問題のようです。

減色

GIFにするか、PNGを256色で保存しなおしたほうがよさそうです(256色PNGのほうがGIFより小さくなるかも?)。

それなりのソフトなら256色への減色処理なんてお手のものだと思われます。

スカイさん、お願いしますm(__)m

そのほか

他にもサイズを小さくする方法はあります。

昔からよく使われる方法なのですが、例えばこの画像があります。

http://cdn-ak.f.st-hatena.com/images/fotolife/S/Sukai/20111120/20111120140033.png

これを、横幅1pxで縦にのみグラデーションしている画像に変え、backgroundを使って敷き詰める、という方法です。

その上から日記の画像や文字を重ねれば何とかそれっぽいものが出来ると思います。左右の角丸もそこだけ角丸の画像を用意すれば大丈夫そうです。

(CSS3のborder-radiusを使っておくのもありですね)

さらにさらに、IEを無視するならばCSS3グラデーションやbox-shadowを使ってしまうのもありですが、まぁ、IEはユーザーが多いので避けるべきでしょう。

SukaiSukai2011/11/26 16:43うごキャラグループの読み込み速度について
分かりやすくまとめてくださりありがとうございます!
了解です!今から画像容量の削減をしていこうと思います。

確かにうごメモのブログパーツは出来が悪いですよね。
ホームに設置しない方が良いでしょうか?

SukaiSukai2011/11/26 18:56画像の減量が完了しました。
上部のキャラクターの部分以外はすべて減量してあります。
だいたい10分の1の容量です。

ちなみに、うごキャラチャンネルのブログパーツについてですが、
以下のようにしたいと思っています。
http://cdn-ak.f.st-hatena.com/images/fotolife/S/Sukai/20111126/20111126185418.jpg

できれば力をかしていただけないでしょうか。

isako4423isako44232011/11/26 19:25>Sukaiさん
そうするとなるとうごキャラチャンネル最新作品内部でrssとサムネ画像の取得が必要になるか、あるいはうごキャラ(作品数)のところを抹消(タイトルのみ)するしか方法はなさそうです

どちらにしても少し難しいと思います・・・