#perfmatters: パフォーマンス ニンジャ向けのツールのテクニック
パフォーマンス エキスパートになるには、開発ツールを使いこなすことが重要です。Colt は、パフォーマンスの 3 つの柱であるネットワーク、コンピューティング、レンダリングについて説明しました。各分野の主な問題と、それらを見つけて排除するために利用できるツールについて説明しました。
- デスクトップで使い慣れた DevTools を使用して、Android 版 Chrome をプロファイリングできるようになりました。
- パフォーマンス向上のための反復ループは、データの収集、分析情報の取得、対策の実施です。
- ページのクリティカル レンダリング パスにあるアセットを優先します。
- 塗装は避けてください。非常に費用がかかります。
- アプリの重要なタイミングでメモリが頻繁に変更され、コードが実行されないようにします。
#perfmatters: ネットワーク パフォーマンスの最適化
通常、ネットワークとレイテンシはサイトの合計ページ読み込み時間の 70% を占めます。これは大きな割合ですが、改善することでユーザーに大きなメリットをもたらすことができます。この講演では、Ilya が Chrome の最近の変更点（読み込み時間を短縮する変更）と、ネットワーク負荷を最小限に抑えるために環境で行うことができる変更について説明しました。
- Chrome M27 では、リソース スケジューラが新しく改善されています。
- Chrome M28 では、SPDY サイトの速度がさらに向上しました。
- Chrome のシンプル キャッシュが刷新されました。
- SPDY / HTTP/2.0 では、転送速度が大幅に向上します。nginx、Apache、Jetty など、成熟した SPDY モジュールが利用可能です。
- QUIC は UDP 上に構築された新しい試験運用版プロトコルです。まだ初期段階ですが、うまく機能すればユーザーにとってメリットがあります。
#perfmatters: 60 fps のレイアウトとレンダリング
プロジェクトで 60 fps を達成することは、ユーザー エンゲージメントに直接関係し、成功に不可欠です。このセッションでは、Nat と Tom が Chrome のレンダリング パイプライン、フレーム落ちの一般的な原因、その回避方法について説明しました。
- 1 フレームの長さは 16 ミリ秒です。これには、JavaScript、スタイル計算、ペイント、合成が含まれます。
- 塗装は非常に費用がかかります。ペイント ストームとは、高価な塗装作業を不必要に繰り返すことです。
- レイヤは、ペイントされた要素のキャッシュに使用されます。
- 入力ハンドラ（タップとマウスホイールのリスナー）は応答性を低下させる可能性があるため、可能であれば使用しないでください。最小限に抑えられない。
#perfmatters: インスタント モバイルウェブアプリ
クリティカル レンダリング パスとは、ブラウザがページのペイントを開始する前に必要なもの（JavaScript、HTML、CSS、画像）を指します。特に、モバイル ネットワーク上のスマートフォンなど、ネットワークに制約のあるデバイスを使用しているユーザーに対しては、クリティカル レンダリング パスでのアセットの配信を優先することが不可欠です。Bryan は、Google のチームが PageSpeed Insights ウェブサイトのアセットを特定して優先順位付けを行い、読み込み時間を 20 秒から 1 秒強に短縮したプロセスについて説明しました。
- レンダリングを妨げる JavaScript と CSS を排除します。
- 表示されるコンテンツを優先します。
- スクリプトを非同期で読み込む。
- 最初のビューをサーバーサイドで HTML としてレンダリングし、JavaScript で拡張します。
- レンダリングをブロックする CSS を最小限に抑えます。最初のビューポートの表示に必要なスタイルのみを配信し、残りは配信します。
- レンダリング ブロック CSS にインライン化された大規模なデータ URI は、レンダリング パフォーマンスに悪影響を及ぼします。画像 URL が非ブロックであるリソースをブロックします。