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

#perfmatters: パフォーマンスに習熟するためのツール手法

開発ツールの使い方を知ることは、パフォーマンスのエキスパートになる鍵となります。Colt は、パフォーマンスの 3 つの柱であるネットワーク、コンピューティング、レンダリングについて詳しく説明し、各領域の主な問題と、その問題を見つけて根絶するために利用できるツールを紹介しました。

スライド

  • パソコンで使い慣れた DevTools を使用して、Android 版 Chrome のプロファイリングを行えるようになりました。
  • パフォーマンス処理のイテレーション ループは、データの収集、分析情報の取得、アクションの実行です。
  • ページのクリティカル レンダリング パスにあるアセットを優先します。
  • ペイントを避ける非常に高額です
  • メモリチャーンを回避し、アプリのクリティカルな時間帯にコードを実行しましょう。

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

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

スライド

  • 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、スタイル計算、ペイント、合成が含まれます。
  • 塗装は非常に費用がかかる。ペイント ストームとは、高額な塗装作業を不必要に繰り返すことです。
  • レイヤは、ペイントされた要素をキャッシュに保存するために使用されます。
  • 入力ハンドラ（タップ リスナーとマウスホイール リスナー）が応答性を低下させることがあります。できる限り避けてください必要最小限に抑えられない要素

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

クリティカル レンダリング パスとは、ブラウザがページの描画を開始する前に必要とするすべてのもの（JavaScript、HTML、CSS、画像）を指します。クリティカル レンダリング パスでのアセットの配信を優先することが必須となります。特に、モバイル ネットワーク上のスマートフォンなど、ネットワークが制限されたデバイスを使用しているユーザーにとっては必須です。Google のチームが PageSpeed Insights ウェブサイト用のアセットを特定し、優先順位を付けるプロセスを経て、20 秒の読み込み時間を 1 秒強に短縮した方法について解説しました。

スライド

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