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

#ネットワーク

山田直樹

2013.01.31

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Chrome Tech Talk Night #5

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

第 1 部：Making the Web Fast with PageSpeed

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

{mod, ngx}_pagespeed

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

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

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

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

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

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

{mod, ngx}_pagespeed

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

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

{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?)

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

Example filters

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

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

画像ファイルの場合

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

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

let's talk about spdy

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

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

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以上あるぜ

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

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

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