2011-12-10
【重要】デザインの最適化を行います。
管理人各位
予告どうり現在HTMLとCSSの総最適化を行っています。最適化には数日かかるかもしれません
その間管理ページの「ページのヘッダ」「トップページのHTML」「ページのフッタ」「スタイルシート」の書き換えを原則として行わないでください。
掲示板やキーワードなどはいじりませんので書き換えていただいてかまいません。というか、ぜひ編集を行ってください。
また、調整中は各所のデザインが一時的に崩れる場合があります。だからといって他の人が書き換えてしまいますといろいろと問題がでる場合がありますので、修正終了の報告をするまでお待ちいただければと思います。
修正すべきところなどは掲示板で言っていただければ直しておきます。
また、編集前の状態でバックアップをとってあるので、必要なようなら差し戻しすることができます。
Sukai了解です!
いつもWEBデザインの活動をしてくださってありがとうございます。
デザインの最適化頑張ってください!
画像に関して要望があれば遠慮なく何でも言ってくださいね。
takuyarei0差し替えたいお知らせもあったのですが、デザイン最適化終了までできない...。
harimau_tigris>Sukaiさん
がんばります!画像はいつもお世話になっています。
>takuyarei0さん
HTMLのほうの編集はとりあえずできているので変えてもらってもOKですよ。
2011-11-26
こちらでもグループのスピードテストを行ってみた
の記事を受けまして、こっちでもスピードテスト。
トップページでやってみました。
YSlow
Yahoo提供の有名どころですね。悪かったものを上げていきます。
E | HTTPリクエストの数を減らそう | 画像を含め外部ファイルが読み込まれすぎということです。画像をつなげてCSSで位置を指定させるとか、小さい画像はBase64で埋め込んじゃうとかするといいらしいけどめんどくさい |
F | CDNを使おう | 使いようがないので無視 |
F | Expiresヘッダーを追加しましょう | やりようがないので無視 |
F | ETagを設定しろ | できないって |
F | 画像はHTMLで大きさを変えずに使用する | サイドバーのうごメモのブログパーツの画像が悪いらしい |
対応可能なものがHTTPリクエスト数を減らすしかない。それをやるのは面倒だし、編集がやりにくくなるので却下。
で、かかった時間のグラフ。やはり画像が大部分を占めてしまっているようです。
なんか、うごメモのブログパーツの画像読み込みが妙に遅いという報告が・・・
まぁ、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
そのほか
他にもサイズを小さくする方法はあります。
昔からよく使われる方法なのですが、例えばこの画像があります。
これを、横幅1pxで縦にのみグラデーションしている画像に変え、backgroundを使って敷き詰める、という方法です。
その上から日記の画像や文字を重ねれば何とかそれっぽいものが出来ると思います。左右の角丸もそこだけ角丸の画像を用意すれば大丈夫そうです。
(CSS3のborder-radiusを使っておくのもありですね)
さらにさらに、IEを無視するならばCSS3グラデーションやbox-shadowを使ってしまうのもありですが、まぁ、IEはユーザーが多いので避けるべきでしょう。
Sukaiうごキャラグループの読み込み速度について
分かりやすくまとめてくださりありがとうございます!
了解です!今から画像容量の削減をしていこうと思います。
確かにうごメモのブログパーツは出来が悪いですよね。
ホームに設置しない方が良いでしょうか?
Sukai画像の減量が完了しました。
上部のキャラクターの部分以外はすべて減量してあります。
だいたい10分の1の容量です。
ちなみに、うごキャラチャンネルのブログパーツについてですが、
以下のようにしたいと思っています。
http://cdn-ak.f.st-hatena.com/images/fotolife/S/Sukai/20111126/20111126185418.jpg
できれば力をかしていただけないでしょうか。
isako4423>Sukaiさん
そうするとなるとうごキャラチャンネル最新作品内部でrssとサムネ画像の取得が必要になるか、あるいはうごキャラ(作品数)のところを抹消(タイトルのみ)するしか方法はなさそうです
どちらにしても少し難しいと思います・・・
2011-11-24
グループを現状ベータ版からRC版、そして正式版への道のり
現在このグループはデザインそのほかをベータ版としています。
うごキャラ3周年となる2012年1月5日に正式版になる予定です。
しかし、ベータから正式版に一気に上げるのは避け、RC版を12月中にはさみたいと思います。
RC版は「リリース候補」と呼ばれるバージョンで、正式版に一番近いバージョンです。特に不具合がなければそのまま正式版に出来るようなもので、かなり整えておかなければなりません。
そろそろ11月も終わりということで、そこに向かってロードマップを計画します。
11月中 [追加期]
デザインの修正や整えるのが必要な部分を片っ端から探し、修正をかけます。
キーワードで足りないものを追加し、手のあいた人が書くようにしていただきたいです。
期末試験のある方もいるでしょうから、学問に支障のないように。
12/3~12/9 [修正期]
引き続き修正を加えますが、こまごまとした修正を各ブラウザで行いたいと思います。
対応するブラウザとしては、最新版のOpera、GoogleChrome、Firefox。
考慮するものはiPhoneとDSiブラウザ、3DSブラウザ、Wii、IE8以降
そのほかのブラウザは参考までに。
12/10~12/16 [最適化期]
HTMLやCSSがわかる方ならわかると思いますが、細かい修正を加えすぎてだいぶゴタゴタしています。みにくいHTML、CSSは未来の修正の障害になるので、私が最適化を行いたいと思います。
間違った指定、後の追加で上書きされる指定、無駄な指定の修正。
インデントなどによってみやすく。そして文中のコメントを削除します。
1日ではできないでしょうから、この時期に他の方に変更を加えられるとおかしくなってしまうかもしれないので、原則としてその間の編集をなしにし、変更箇所があれば掲示板にて報告、という形にさせていただきたいと思っています。
他の方はキーワードの充実やイベントの計画などをしてくださるのがいいかもしれません。
12/17~12/22 [確認期]
みんなでおかしい部分がないかを確認して、最後の修正をします。
12/23~1/4 [RC版]
グループをRC版としていろいろあった2011年を思いつつ年越しします。
宿題は12月中に終わらせ、1月はゆっくりしましょう。ええ。
正月3日ぐらいは私は参加できそうにないです。
1/5 [正式版へ]
正式公開
候補ということで、何か意見があればコメントまで。
Sukai正式版を迎えるために必要なことが簡潔にまとまっていますね!
RC版ですか。それは良いアイディアだと思います。
確かに年末年始は何かと日常生活で忙しくて大変になりそうです。
新名称についても決まればRC版のうちにすべて書き変えた方がいいかもしれませんね。
対応するブラウザも列挙してくださった通りで問題なさそうです。
私はharimau_tigrisさんの計画に賛成です。
fnsmasao2010私も賛成します
てことは早くグループの名前も決めないといけませんなw
そしてブラウザじゃなくてブラウザー(ry
Webデザイン面では大変助けてもらいました。
そして、オリジナルゲームやソフトまで
たくさんの楽しさを届けてくれました。
Harimauさんがいなかったらクラブは完成しなかったと思います。
昨年は本当にありがとうございました。
活動が少なくなるのは寂しいですが、
これからもHarimauさんを応援しています。
短くてすみません。でもこれだけは伝えたいんです。~ありがとうという気持ちを~
私も皆さんを応援していますよ!!