CSS Nite LP, Disk 23「表示速度最適化」に参加しました
6/30（土）に、東京で開催された、CSS Nite LP, Disk 23「表示速度最適化」に参加してきました。
東京でのセミナー初参加。
めちゃアウェー感。めちゃどきどきしながら行きました。
以下セッション内容です。
- Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 - 石本 光司さん
- 画像の最適化で地球をエコに 岡部 和昌さん
- モバイルWebパフォーマンス最適化 斉藤 祐也さん
- 設計段階から実装まで、今すぐ始める高速化 こもり まさあきさん
- ライブデモ こもり まさあきさん
セッション内容など
石本さん
- なぜ計測しなければならないのか
- ページが表示されるまでの仕組み
- 計測ツールの紹介
- まとめとこれからのこと
適切に計測することによって、数ある最適化の手法の中から効果のあるものを見極め、効果の低いものにリソースを割きすぎない、ムダを省いていこうということだと思いました。
実際、CSSセレクタの最適化は効果が薄いそうです。
YSlowはそろそろちゃんと使います。（インターフェースが英語なのが難点
PageSpeed Insightsは初めて知りました。DeveloperToolsの一部みたいに使えてよさそうです。
両方（やっと）入れたので、徐々に使っていこうと思います。
岡部さん
- 画像の最適化
- CSS Sprite
- 各種ツールの使い方
- 実務フローでの例
画像の最適化・CSS Spriteを、ツールを使って効率良く行おう。という内容でした。
CSS Spriteに関しては、手法は知ってますが画像の準備がなかなかめんどうで、実践してこれませんでした。
が、SpritePadなどのツールがあれば、比較的容易に対応できるのではないかと思いました。
画像に関しても、ツールを使うことであそこまで容量を落とすことができるんですね。
驚きでした。
今後は画像を多様するようなデザインでは必須になるのかなー？
斉藤さん
- モバイルWebブラウザについて
- パフォーマンス最適化の基本
- モダンブラウザを最大限に活かした最適化
- モバイルWebパフォーマンスをさらに向上させるTips
まず、モバイル端末は遅い（6～7年前のパソコンに少し新しいGPUが搭載されている程度のデバイス）し、コネクションも不安定だが、ユーザーはそう認識しておらず、多数の人がデスクトップと同じ速度を期待し、しかもページのロードに5秒以下しか待たない。とされ、ではどういう手法・対策があるのか。というお話しでした。
非常にボリュームのある内容で、はじめて聞く部分も多々ありました。
CSS3のアニメーションのところで、「JavaScriptによるアニメーションはハック」と言われてたのが印象的でした。
こもりさん
- コンテンツのロードを速くしよう
- キャッシュを使いこなそう
- 外部要因による遅延を改善しよう
- リクエストを分散させてより高速に
こもりさんのお話しは、後のライブデモンストレーションもそうですが、総括とゆうような印象で、手法の紹介から計測し、こういう効果が出る。というのを何例か紹介されていました。
例えば、jQueryは、自サイト内のものを読み込むよりも、Googleなどから読み込んだほうが速いそうです。
DNSルックアップを減らすということと矛盾するじゃないかという質問があったみたいですが、ルックアップコストとダウンロードにかかるコストの比較になり、後者の方がコストが低くなるそうです。
できそうなことから・みんなで取り組む
てゆーわけで、できそうなものを列挙
- 計測する（YSlow,PageSpeed Insightsなど）
- HTTPリクエストをへらす
- DNSルックアップをへらす
- 画像最適化
- CSS Sprite
- ファイルを可能な限りまとめる（cssは、sassとかlessでも可？）
- Gzipで圧縮
- mod_expires を有効に
- Application cache
- Local Storage
- ソーシャル系サービスのJS放置はよくない
ざっくりですがこんなとこですかねー？
こもりさんがセッション中にも言われてましたが、表示速度最適化はフロントエンドを実装する人だけが意識すれば良いものではないと思います。
制作に関わる人すべてが意識し、実践することによって、はじめて質の高い最適化がおこなえるのではないかと思いました。
数ある手法もそうで、個々の手法がお互いに関係し、ひとつの効果を出しているものもあります。
例えば、CSS Spriteを利用することや、CSS3でグラデーションや角丸を実現する事、mod_expiresを設定することなどは全てHTTPリクエストを減らすことにつながります。
書いてて思いましたが、そういった同じ効果を生み出すものに集中してまず最適化をしていくことで、ひとつひとつの効果が、よりわかりやすくもなるのかなと思いました。
参加してみて
全体の内容としては、同じテーマで4セッションなのでちょいちょい被るものもありました。
しかし、自身の知識がなさすぎるのか、これが東京のセミナーのクオリティーなのか、それともたまたま参加した回がよかったのかは定かではありませんが、ものすごく濃い内容でした。
すごく勉強になりました。
あと、こもりまさあき さんの講義初めて聴かせていただいたのですが、すごく物腰の柔らかい口調で、ものすごく聴きやすく話される方だなーと思いました。
当日も最後のセッションで、疲れてるところだったのに、お話にめちゃ惹き込まれました。
また機会があったら、お話し伺いたいです。
（登壇された方々みなさん非常に聴きやすかったんですが、特に ということで。上から目線になってたらすみません）
表示速度最適化に関しては、業務でも個人的にも、ほとんど知識がなくての参加でした。
最適化における現在のスタンダードはどういうものなのか？実装方法は？効果はどんなものなのか？
など、最先端の技術が集まるであろう東京で、こういったお話しを聴けたのはとても有意義だったと思います。
東京！行ってよかったです！
