【リアルタイム更新!!】Chrome Tech Talk Night #5レポート【 メモ】

2013.01.31

Chrome Tech Talk Night #5

2013年1月31日(木)。Chrome Tech Talk Night #5が Google 日本本社にて開催されたので、六本木ヒルズ森ビルまで行って来ました。

DSC_0010

第 1 部:Making the Web Fast with PageSpeed

PageSpeed ​​は、サイト所有者が自身のサイトを最適化し、そのプロセスを自動化をする Google によるプロジェクト スイートです:Insights はお勧めを提案します。mod_pagespeed と ngx_pagespeed はサイトの最適化プロセスを自動化するオープンソースプロジェクトです。PageSpeed​ Service は、2013 年に提供開始を予定している Google の新しい最適化サービスです。本講演では、PageSpeed がどのように動き、どこに向かい、皆さんのサイトでどのように役立つかについて、詳しく見ていきます。

{mod, ngx}_pagespeed

Ilya Grigorik氏によるセッション。スライドはこちらからどうぞ。

DSC_0013_edited

「パフォーマンスってのは凄く複雑なモノなんだぜ。」

「あらゆる手段を組み合わせて駆使することによって、初めて改善できるんだぜ。」

「なぜなかなかパフォーマンスを出すのがむずかしいのか。」

「開発効率とパフォーマンスはトレードオフ。開発効率を優先すると、どうしてもパフォーマンスがおざなりになる。」

DSC_0015

けれどもパフォーマンスに関する多くの課題は、実は自動化可能だぜ。

{mod, ngx}_pagespeed

-> パフォーマンス向上のための様々なフィルターを搭載したツール。

※ Webページレンダリングの比較動画を紹介。 改善前は表示するまで5秒かかっているのに対し、mod_pagespeedを使うと約2秒で表示完了できた。


DSC_0016

{mod, ngx}_pagespeedは2008年にプロジェクトがスタート。2012年11月にVer.1.0リリース。現在はすでに20万以上のサービスによて利用実勢あり。

how does it work?

ページスピートのオープンソースライブラリ「PSOL」を使っている。なので特別なサーバーを用意することなく手軽に導入することができる。

Apache 2.2, 2.4x をサポート。

2種類のフィルタが実装されている。

  • サイトに影響のない安全フィルタ
  • サイトに影響の出る可能性のある、より強力なアグレッシブフィルタ

大切なことは、開発者自身は特に何もすることが無いということ!!シンプルにこいつを導入するだけでオールOK!

nginx + PageSpeed: gx_pagespeed -> Githubにて公開中。※テスト版(Alpha?)

DSC_0018

アパッチバーションはプロダクションready版ということで実際に使用可能だよ。

Example filters

ページ内にある余分な white space を削ってくれる。ただし必要な部分はきちんと残してくれる。賢い!

DSC_0020

ページ内にたくさんのCSSがあるとする。これを一つのファイルに結合してしまう。ファイル名は結合されてた元ファイルの名前をドットで結合し、最後に.pagespeed.cc.HASH.cssをつけた名称で出力される。ファイル名が変更されると自動で更新してくれるよ。

DSC_0021

画像ファイルの場合

Webページのサイズのうち、約6割を画像ファイルが占めている実情。不必要に大きなサイズの画像をダウンロードし、ブラウザでリサイズしているのではないか。ならばサーバー側で最適なサイズに変換してからクライアントにダウンロードさせる。リサイズされた画像は新規に生成され、htmlにて指定されたファイルパスも自動的に書きなおしてくれるよ。

DSC_0023

更に画像ファイルのフォーマットも用途に合わせて最適なモノを自動で選んでくれるんだぜ!!


let's talk about spdy

SPDY is HTTP 2.0... sort of...

SPDYはGoogleが開発したもので、HTTP2.0の重要な要素に位置しているぜ。

DSC_0025

http2.0について

ワーキングドラフト3月までに出てくる予定。

ドラフトのゴール

  • FIXさせること
  • http1.xに基づいてつくり上げること
  • 拡張性をしっかり持たせること

1.xとの互換性は保証して行きたい。

1.1の欠陥をベースにはじまったプロジェクト。これまで開発者が試行錯誤してきた様々なベストプラクティスは、すべてHTTP1.1の欠陥を補うためと言っても過言ではない。

悪いのはHTTP1.1(!?)

  • Concatenating files
  • Spriting images
  • Domain sharding
  • Resource inlining

So, what's a developer to do?

http2.0が出来上がるまでのあいだ、開発者はApache用のオープンソースモジュールであるmod_spdyをぜひとも使ってくれ。

ページそのものは何も変更することなく、こいつを有効化するだけでOKだ。

chromeとFFにてサポートしているよ

A few (other) useful tips and tricks.

URLにパラメータをくっつけることで効果の結果を見ることができる

フィルタは全部で40以上あるぜ

おすすめフィルタ

  • コアフィルタ

アパッチはすべてのページに同じconfigurationを適用することができる。ページごと、ディレクトリごとに個別の設定もできる

DSC_0028

メーリングリスト -> mod-pagespeed-discuss

アナウンス -> mod-pagesoeed-announce

みんなからの意見、どしどし待ってるぜ!

第 2 部:Wait, Chrome DevTools can do THAT?

皆さんが使われているブラウザは、(あなたがまだ気付かれていないだけで)最高の計測用の開発プラットフォームの 1 つです。もちろん、ソースコードを調べ、DOM を解析し、CSS をいじって、さらにいくつかの JavaScript の式を評価することができますが、できることはまだまだあります!本講演では、ウェブアプリケーションのパフォーマンスに関する問題を発見し、デバッグするのを手助けするヒントやトリック、隠れた機能をご紹介します。

第2部のスライドはこちらです。

DSC_0030

私はChrome開発ツールの中に生きていますwww

みんな開発ツール使ってくれるかい?ショートカット一覧があるので、是非活用してください。

DSC_0033

開発ツールの設定もできる。キャッシュを無効化できるのが凄くいいぜ。開発ツールを開いている時のみ有効化するから便利

DSC_0034

Network Timeline タブ

ネットワークタブの機能を紹介。サイズとタイムカラムの説明

DSC_0036

サイズカラムはネットワーク上のサイズを示している。圧縮前と圧縮後(※gzip)の両方の数字を示している

タイムカラムも同様で、リソースを得るためのトータルタイムを表示している。下段はレイテンシーを表示。ソート機能もあるので、最も時間がかかっているものを特定することが容易。

DSC_0037 DSC_0038

Initiator

リソースに対して、何(JSとか)がスケジューリングしているかを示しているカラム。

DSC_0039

Timeline

DSC_0040

透明なタイムラインはリクエストを送っても返ってこないものをしめす。色が付いているのは返ってきたもの。

ここまでの情報で、ネットワークパフォーマンスに関する情報の約9割は解析できるはずさ!

Chromeのドキュメントパーサー。リソールがスケジューリングされる。

スクリプトはなるべくドキュメント内に埋め込むのが吉

Web sokcket frames

リソースタブ -> Frames

テキストデータがどのように送られてきて表示されるのかを可視化することができる

DSC_0041

HER - HTTP Archive format

ウォーターフォール全体(※すべてのメタデータ含む)をファイルとして保存することができる。

以前はいちいちスクリーンショットに取っていたけど、これさえあればすべての情報をとっておくことができる。

DSC_0042DSC_0043

すでにrubyで使える

gem install har
har trace.har

レンダリングについて

Webページのレンダリング。

Timelineタブ内にframes項目を最近追加した。フレームごとにレンダリングにかかった時間を表示する。

DSC_0046

※アニメーションサンプルを公開中。JSの処理に余計な負荷があるとアニメーションのフレームに悪影響が出ているのがわかる

DSC_0047

60FPSの重要性について

CSSでシャドウなどのエフェクトを加えると、60FPSでヌルヌル動いていたのが30以下にまで落ち込んだ。JSで負荷をかけると更に落ち込む。もはやアニメションでなくなっている

過度のCSS エフェクトはFPSを落とす原因。

メモリリークについて

プロファイルビューを見よう。スナップショットをとることができる。2つとることで一つ目と2つ目との間のインタラクションに何があったかを比較することができる

DSC_0048

※スライドにDEMOリンクあるから見てみてください。

Auditsについて

ページを上から解析していき、読み込まれたCSSのうち、現在のページがどれだけ実際に使っているかを見ることができる

pageSpeedはChromeのエクステンションとして使うことができる


独自のAuditsプラグインを作ることもできる

カスタムパネル(※右側にあるアコーディオン状のあれ)を追加することもできる

DSC_0050

開発ツールのカラーテーマもカスタマイズできるよ ※CSSで作る

DSC_0051

リモートデバッギング ※Android

スマホで見ているWebページをPCのChromeでデバッグできる

DSC_0053

web socketを返してchrome開発ツールで実行できる ※ruby

PonyDebugger - iOSで走っているアプリのデバッグをchromeでできるツール

chrome benckmarking extenstion

テストしたいURLを入力して実行するだけでパフォーマンステストをすることができるサービス

DSC_0055

Chrome itself - chrome開発者の為のツール

自分のコードがどのようにレンダリングされたかすべて見ることができる低レイヤーでのチェックツール

ストリーミング・アーカイブ

[SWF]https://www.youtube.com/watch?v=iIVLKtDc98o&feature=player_embedded,640,390[/SWF]