Chrome Dev Summit - パフォーマンスの概要

#perfmatters: パフォーマンスに熟練するためのツール技術

パフォーマンスのエキスパートになるには、開発ツールの使い方を理解しておくことが重要です。Colt は、ネットワーク、コンピューティング、レンダリングという 3 つのパフォーマンスの柱を順を追って説明し、各領域の主要な問題とその問題の発見と根絶に使用できるツールを紹介しました。

スライド

  • パソコンから使い慣れた DevTools を使用して、Android で Chrome のプロファイリングを行えるようになりました。
  • パフォーマンス作業の反復ループは、データの収集、インサイトの獲得、アクションの実行です。
  • ページのクリティカル レンダリング パス上にあるアセットを優先します。
  • 非常に高額であるため、塗装を避ける。
  • アプリの重要な場面で、メモリチャーンとコードの実行を回避します。

#perfmatters: ネットワーク パフォーマンスの最適化

ネットワークとレイテンシは通常、サイトの合計ページの読み込み時間の 70% を占めます。これは大きな割合ですが、改善がユーザーに大きなメリットをもたらすことも意味します。この講演では、読み込み時間を短縮する Chrome の最近の変更と、ネットワーク負荷を最低限に抑えるために環境に加えることができる変更について、Ilya が説明しました。

スライド

  • Chrome M27 では、リソース スケジューラが新しく改善されました。
  • Chrome M28 では SPDY サイトがさらに高速化されました。
  • Chrome のシンプルなキャッシュを全面的に見直しました。
  • SPDY / HTTP/2.0 は転送速度を大幅に向上させます。nginx、Apache、Jetty 向けに成熟した SPDY モジュールが提供されています(これら 3 つのみ)。
  • QUIC は UDP 上に構築された新しい試験運用版のプロトコルです。利用はまだ始まったばかりですが、うまくいけばユーザーが勝つでしょう。

#perfmatters: 60 fps のレイアウトとレンダリング

プロジェクトで 60 fps を達成することは、ユーザー エンゲージメントに直接関係するものであり、成功に不可欠な要素です。この講演では、Nat と Tom が Chrome のレンダリング パイプライン、フレーム落ちの一般的な原因と回避方法について説明しています。

スライド

  • フレームの長さは 16 ミリ秒です。これには、JavaScript、スタイル計算、ペイント、合成が含まれます。
  • 塗装はextremely費用がかかります。Paint Storm では、負荷の高い塗装作業が不必要に繰り返されます。
  • レイヤは、ペイントされた要素をキャッシュに保存するために使用します。
  • 入力ハンドラ(タップやマウスホイール リスナー)は応答性を損なう可能性があるため、可能であれば避けてください。必要最小限に抑えられない場合。

#perfmatters: インスタント モバイル ウェブアプリ

クリティカル レンダリング パスとは、ブラウザがページを描画する前に必要となるもの(JavaScript、HTML、CSS、画像)を指します。クリティカル レンダリング パス上にあるアセットの配信を優先することは、特に、モバイル ネットワーク上のスマートフォンなど、ネットワークに制約のあるデバイスのユーザーにとっては不可欠です。Bryan 氏は、Google のチームが PageSpeed Insights ウェブサイト用のアセットを特定して優先順位を付けるプロセスを経て、読み込み時間を 20 秒から 1 秒程度に短縮したと話してくれました。

スライド

  • レンダリングをブロックする JavaScript や CSS がなくなります。
  • 視覚に訴えるコンテンツを優先しましょう。
  • スクリプトを非同期で読み込みます。
  • 初期ビューをサーバー側で HTML としてレンダリングし、JavaScript で拡張します。
  • レンダリングをブロックする CSS を最小限に抑えます。最初のビューポートの表示に必要なスタイルのみを提供し、残りのスタイルは配信します。
  • レンダリング ブロック CSS でインライン化された大きなデータ URI は、画像 URL をブロックしないリソースをブロックするため、レンダリングのパフォーマンスに悪影響を及ぼします。