CSS Nite LP, Disk 23「表示速度最適化」 に行って来ました

6/30にCSS Nite LP, Disk 23「表示速度最適化」 に行って来ました。

気になっているテーマでしたので超早割で申し込みました。自分も表示速度最適化に関しては興味があった(勉強会でお話させていただく機会もあった)のでかなり期待してお話を聞きました。
実際に濃い話が多く、4時間あっという間でした。
以下に自分用のメモとして書きます。

1. Measuring Web Performance – 自己満足で終わらないためのパフォーマンス計測 -  ~石本 光司さん(サイバーエージェント)~

改善をどこから行うか
このテーマについては自分も悩んでいましたが、石本さんの定義方法は理解しやすかったです。

改善箇所は Yahoo Developer NetworkのExceptional Performance や Web Performance Best Practices – Make the Web Faster — Google Developers で定義されていますが、両者で重複する項目が多いもののフロントエンドからバックエンドまで様々です。

そこでハイパフォーマンスWebサイトに掲載されている14のルールから、実際に対応しやすく効果が高いものから順に対応したほうがよいとのことでした。フロントエンジニアからみた場合、実際に対応の候補は以下の5つ。

  • Make Fewer HTTP Requests
  • Put Stylesheets at Top
  • Put Scripts at Bottom
  • Avoid CSS Expressions
  • Make JavaScript and CSS External

CSSセレクタの最適化
実際に1000回実施した場合を報告されている方がおり、2009年に実施された時には最適化の有無で-20ms、そして最近のブラウザではさらにパーシングが改善されているので-5msとのこと。この程度しか変わらないであるなら、他の対策を優先したほうがいいですね。

計測ツール系
上から全体→詳細となるので、上から順に進めるのがよいとのこと。

評価・アドバイス系 (アドバイスが見れるので参考にしやすい)
Yslow
PageSpeed Insights (サイトではPC/モバイルがわかれる。日本語なのでわかりやすい)

ASP系
WebPagetest (世界に複数存在する計測ポイントから計測できる)
Mobitest (モバイル用の計測ツール、デバイスタイプが選べるのが特徴)
Google Analytics (Navigation Timing APIで計測が可能。実際に利用者がみた内容が計測できる)

デベロッパーツール系
Chrome Developer Tools
Firebug

スポット計測系
jsPerf (javascriptの処理にかかる時間を計測する)
CSS Stress Test (CSSの処理にかかる時間を計測する)

ソーシャルボタンについて
ソーシャルボタン(カウント数つき)を設置すると0.8sec~1.0sec程度表示完了までの時間が増加する。実際に押されたのは訪問者に対して0.01%~0.2%程度。この数字を高いと見るか低いと見るかは難しいですが、拡散されることで訪問率があがるというメリットがあることを考えると一概に低すぎると考えるのは…。とはいえカウント数なしのポップアップタイプであれば表示完了までの時間は増加しないので、カウント数が不要であれば、カウント数を外すとのもありだなと思いました。(どれだけシェア/ツィートされたか欲しいんだよと言われることがあるので難しいですが)

石本さんはまとめとして、全体を俯瞰して見て効果対費用の高い改善から行うことが良い とのことでした。

 

2. 画像の最適化で地球をエコに  ~岡部 和昌さん(ヤフー)~

画像フォーマットの選び方
GIFを使うかPNGを使うかで悩むことがありますが、岡部さんは以下の指針を示していました。

  • アニメーションをするならGIF
  • 色数が多い写真ならJPEG
  • それ以外はPNG

え?それ以外はPNGでいいの?と思いましたが圧縮アルゴリズムの最適化でGIFよりもファイルサイズが軽くできるとのこと。さらにPNG8でもFireworsであれば半透過が可能とのことなので、PNGを避ける理由はないようです(IE6まではアルファチャンネルが含まれると正しく描画されない問題が残るが…)。

使用するツールとしては以下が紹介された。

最適化ツール (メタデータの除去、圧縮方式の最適化 (=見た目に影響なし))
ImageOptim (Mac)
PNGGauntlet (Win)

減色ツール (減色するため見た目に影響あり)
ImageAlpha (Mac)
OPTPiX Snap (Win) ← 有償
OPTPiX WebFree (Web)

JPEGの最適化ツール (JPEGの場合にはツールを使用すると画質が劣化する)
JPEGmini (Mac、Web)

実際に減色するデモをされていたが、大きく減色しても劣化が見た目ではわからない場合もあって驚きました。
デモの中では PNGフルカラー(171KB) → PNG256色(57KB) という事例もあったので、減色はかなり効果があります。

CSS Sprite
CSS Spriteとは、1つの画像ファイルに複数の画像を配置して、CSSで画像をずらして表示することです。
CSSを手動で書くことは難しいですが、ツールを使用して簡単に作成するデモが行われました。

SpritePad (Web)
Stitches (Web)
SpriteMe (Bookmarklet)
Fireworks CS6

作ることはツールを使用することで容易にはなりますが、注意点もあります。注意点は以下の4つ。

  • 更新時にはファイル名を常に変更する
    クライアントキャッシュやサーバキャッシュに残ってしまうので、更新時にファイル名(もしくはディレクトリ名)を変更することで、トラブルを予防します。
  • CSS Spriteの読み込みは1箇所で行う
    更新時にはファイル名の変更が発生しますが、複数箇所で定義していると修正漏れが懸念されるため、読み込みを1箇所で行うと、トラブルが予防できます。
  • CSS Spriteの枚数
    CSS Spriteを1つのファイルで行うのでなく、一部分で適応できるように枚数を分けると運用は容易になります。しかしサイト全体ではファイル数が増えるので速度はトレードオフとなります。このあたりは運用での見極めが必要となりそうです。
  • 画像は隣接させない
    過去に古いiOSでは1px外側の画像まで持ってくることがあったので、画像は1px以上あけて配置したほうが良いとのこと。

岡部さんのお話では、画像の最適化に関してそしてCSS Spriteに関して、それぞれ具体的でわかり易かったのが印象に残りました。

 

3. モバイルWebパフォーマンス最適化  ~斉藤 祐也さん(サイバーエージェント)~

統計の数字

  • 71%のスマートフォンユーザーは、デスクトップと同じ速度で表示されることを期待している
  • 74%のスマートフォンユーザーは、ページのロードに5秒しか待たない

なのでExpireヘッダを利用したキャッシュの利用、gzip化、CSS/JSの配置 がモバイルではさらに重要となってくるのことです。

HTML5 API利用
HTTPリクエストを減らすために以下のAPIが利用が可能とのことです。

Web Storage API(Local Storage、Session Storage)
cookieより多くの内容をモバイル端末に保存しサーバへの問い合わせを減らす。
History API(pushStateとAjaxを組み合わせ)
の利用により、CSS/JS/各リソースの読み込みが発生させないことが可能
Application cache API
.appcacheファイル内からCSS、JS、CSS sprite、変更の少ない画像を読み出しオフラインでも閲覧できるようにする

私はこのあたりは苦手なもんで、ちょっと戸惑ってしまいました(汗)
ブラウザが限定できる環境であれば、これらのアプローチも試してみたいところです。

CSS3の利用

グラデーション、角丸、バックグラウンドパターンの使用することで、画像を使用しなくても様々な表現ができます。またアニメーションもCSSでできるので、javascriptでアニメーションしなくてもよいのでは?とのことでした。
dataURIは確かにリクエスト数は減らせるけど、CSSのファイルサイズが大きくなるから使い所は難しいという印象をうけました。

DOMを減らす
気になったのはこの話。DOMを減らすことでレンダリングを早くなるとのこと。
sectionを使用する、divを避ける、空ノードは削除するといった対応でDOMを減らすをことができます。
ツールとしては DOM Monster (Bookmarklet) が紹介されました。

その他様々なtipsが紹介されたのですが、追っかけ切れませんでした…

 

4. 設計段階から実装まで、今すぐ始める高速化+ライブデモ  ~こもり まさあきさん~

さまざまな著書を書かれていらっしゃるこもりさんが最後に登場。短い時間ながらデモもされました。
たくさん話されていたのですが自分の気になったポイントをピックアップしてみます。

gzip圧縮した高速化
サーバ側でgzip圧縮すると、ファイルによるがテキストファイルであれば1/3~1/5にファイルサイズを削減できます。設定は.htaccessまたはhttpd.conf上にmod_deflate(Apache 2.x)を追記することで利用が可能 (1.xはmod_gzip)とのこと。

キャッシュ
一概にキャッシュと言っても、ブラウザキャッシュ、アプリケーションキャッシュ、サーバキャッシュ等があります。キャッシュを有効に利用するには変更頻度の少ない、CSS/javasctipt、使用頻度が高い画像ファイル、jQueryなどのライブラリを対象とするのが良いとのことでした。

 ブラウザキャッシュ
サーバ側で.htaccessまたはhttpd.conf上にmod_expire(Apache 2.x)を追記することで、Expireヘッダーが設定されます。これにより2回目以降のHTTPリクエスト数を削減できます。

 アプリケーションキャッシュ
.appcacheを利用してキャッシュを有効するファイルを指定します。こちらもHTTPリクエスト数の削減が期待できます。

 サーバキャッシュ
Apache + Varnishを使用する
Webサーバプログラムをnginxに変更する

javascriptのフォールバック
CDN上のjQueryを使用する場合、CDN側でサービスが停止されることを想定してフォールバックできるように記述したほうが良いとのことでした。確かにCDN上がまったく落ちないとは限らないためこのような配慮も必要ですね。

CDN
CloudFlare ・・・ name server切り替え型。無償サービスもありますが実際のところどうなんでしょうか?
Amazon CloudFront + S3 ・・・ オリジンプッシュ型(対象ファイルを格納する)
Amazon CloudFrontのみ ・・・ オリジンプル型(アクセス時にサーバへアクセスしキャッシュコンテンツを格納する)

おまけ(こもりさんが使用していたツール)
こもりさんはデモ中に様々なツールを使用されますが気になったツールをピックアップ^^
Sublime Text 2 ・・・ テキストエディタ。プラグインでFTP接続ができる等の機能があります(クロスプラットフォーム)
SnipEdges ・・・ 画面右端に出ていたスニペット
Zoom It ・・・ ルーペ上に拡大するツール (こちらはWB埼玉でも使用されていた)

こもりさんは最後に、オリジンサーバへのHTTPリクエストを可能な限り減らすこと、と話されていましたが自分の経験からも共感できました。

4時間話を聞いて色々と得ることがありました。実際の現場で活用していきたいです。