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とサムネ画像の取得が必要になるか、あるいはうごキャラ(作品数)のところを抹消(タイトルのみ)するしか方法はなさそうです

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

2011-11-24

グループを現状ベータ版からRC版、そして正式版への道のり

| 18:21

現在このグループはデザインそのほかをベータ版としています。

うごキャラ3周年となる2012年1月5日に正式版になる予定です。

しかし、ベータから正式版に一気に上げるのは避け、RC版を12月中にはさみたいと思います。

RC版は「リリース候補」と呼ばれるバージョンで、正式版に一番近いバージョンです。特に不具合がなければそのまま正式版に出来るようなもので、かなり整えておかなければなりません。

そろそろ11月も終わりということで、そこに向かってロードマップを計画します。


11月中 [追加期]

デザインの修正や整えるのが必要な部分を片っ端から探し、修正をかけます。

キーワードで足りないものを追加し、手のあいた人が書くようにしていただきたいです。

期末試験のある方もいるでしょうから、学問に支障のないように。

12/3~12/9 [修正期]

引き続き修正を加えますが、こまごまとした修正を各ブラウザで行いたいと思います。

対応するブラウザとしては、最新版のOperaGoogleChromeFirefox

考慮するものはiPhoneDSiブラウザ、3DSブラウザ、WiiIE8以降

そのほかのブラウザは参考までに。

12/10~12/16 [最適化期]

HTMLCSSがわかる方ならわかると思いますが、細かい修正を加えすぎてだいぶゴタゴタしています。みにくいHTMLCSSは未来の修正の障害になるので、私が最適化を行いたいと思います。

間違った指定、後の追加で上書きされる指定、無駄な指定の修正。

インデントなどによってみやすく。そして文中のコメントを削除します。

1日ではできないでしょうから、この時期に他の方に変更を加えられるとおかしくなってしまうかもしれないので、原則としてその間の編集をなしにし、変更箇所があれば掲示板にて報告、という形にさせていただきたいと思っています。

他の方はキーワードの充実やイベントの計画などをしてくださるのがいいかもしれません。

12/17~12/22 [確認期]

みんなでおかしい部分がないかを確認して、最後の修正をします。

12/23~1/4 [RC版]

グループをRC版としていろいろあった2011年を思いつつ年越しします。

宿題は12月中に終わらせ、1月はゆっくりしましょう。ええ。

正月3日ぐらいは私は参加できそうにないです。

1/5 [正式版へ]

正式公開




候補ということで、何か意見があればコメントまで。

SukaiSukai2011/11/25 00:06正式版を迎えるために必要なことが簡潔にまとまっていますね!
RC版ですか。それは良いアイディアだと思います。
確かに年末年始は何かと日常生活で忙しくて大変になりそうです。
新名称についても決まればRC版のうちにすべて書き変えた方がいいかもしれませんね。
対応するブラウザも列挙してくださった通りで問題なさそうです。
私はharimau_tigrisさんの計画に賛成です。

fnsmasao2010fnsmasao20102011/11/25 20:43私も賛成します
てことは早くグループの名前も決めないといけませんなw

そしてブラウザじゃなくてブラウザー(ry

2011-11-01

いくつか変更履歴

| 18:07

いくつか変更したので。

面倒なのでコードは省略!!

主にヘッダ部の調整を行いました。

タイトルとパンクズリストの非表示。

左右のカエルや「<」にマウスを乗せると出現。

CSS3ってたのしいな♪

takuyarei0takuyarei02011/11/01 20:03DSiブラウザの2画面モードやiPhoneのブラウザだとパンクズリストを出すのが大変になるかも...。
日記に書いておくか...。

SukaiSukai2011/11/01 20:36期待を超える出来で驚きましたよ!
ありがとうございました!

掲示板にも書きましたが質問させてください。
各メニューページをキーワードで作成し
各コンテンツをモジュールを使って表示しているのですが、
自動的に表示内容が更新されないようです。
何かいい方法はないでしょうか?

SukaiSukai2011/11/09 08:12id:harimau_tigrisさんを今お気に入りに設定させていただきました!色々お世話になってます!

SukaiSukai2011/11/20 14:30以下は掲示板にも書いた内容です。

id:harimau_tigrisさん編集ありがとうございます!
そして申し訳ございません。
ちょうど同じ時間にデザインの調整をしていたみたいですね。
最新の日記が増えて長すぎてサイトのバランスが悪いため、
id:fukuhiro0628さんのアイディア通り、
左のメインコンテンツの部分に最新10件のみで表示するようにしたらいいのではないかと私もHTMLや画像を作ってました。
せっかく調整してくださったのに申し訳ございません。
また少しCSSの調整をお願いしてもよろしいでしょうか?