Google+

概要

Google+ は完全にレスポンシブになります。

レスポンシブ

Google+ はゾンビネコからヴィンテージ電卓まで、共通の関心を持つ人々が集う場所です。最近まで、Google+ のウェブサイトには 2 種類のバージョンがありました。1 つはパソコン用、もう 1 つは古いブラウザ用に設計されたモバイルウェブ用です。

チャレンジ

2 つのサイトの維持管理には、特有の課題が伴いました。サイトのバージョンが別であるため、各機能を 2 回実装する必要がありました。その結果、大量のコードが重複し、パソコン用とモバイルウェブ用の 2 つのエクスペリエンスを最適化する作業がさらに増えました。タップ操作をサポートするデスクトップや画面の大型の高性能なモバイルデバイスによって、デバイス間の線引きがますます曖昧になるにつれ、デスクトップとモバイルでデザインが異なることがますます意味をなさなくなっていきました。

機能を追加するにつれて、従来のパソコンサイトも低速になり、肥大化してしまいました。今年初めに Google のホームページは約 5 MB の重さがあり、約 250 件の HTTP リクエストが生成されていました。パフォーマンスがうまくいかなかっただけです。サイトの画像は重くて最適化されていないため、ページをさらに遅らせました。その結果、低速で不安定なネットワークではストリームにほとんどアクセスできず、このようなユーザーのエクスペリエンスは良くも悪くも期待を裏切るものでした。さらに、モバイルウェブで従来のブラウザをサポートするという要件があったため、サイト全体で JavaScript に頼ることができず、高度なインタラクティブ機能を実装することもできませんでした。モバイルウェブブラウザの進歩には期待できませんでした。

解決策

まず、レスポンシブデザインに焦点を当てました。これは、モバイル、タブレット、デスクトップなどで機能する 1 つの実装です。機能、ページ、JavaScript ライブラリ、CSS クラスをすべて徹底的に調べましたユーザーがそれ以上をリクエストしない限り、サイトを機能させるために絶対に必要なデータのみをダウンロードするようなシステムを構築したいと考えていました。そこで課題となっていたのが、低速のスマートフォンでモバイル接続を使用して正常に機能し、高速なブラウザや大画面でも優れた没入体験を提供できるウェブサイトを構築することでした。

このような制約があるため、今後のコード変更の一つひとつを精査する必要がありました。これを実現するために、最初のページ読み込み時に 60K を超える HTML、60K の JavaScript、60K の CSS、アニメーションが常に 60 fps で、平均レイテンシが 0.6 秒以下になるように、6^5 ルールを設定しました。

これを実現するために、モジュール性が組み込まれた遅延読み込みを最初から組み込む JavaScript と CSS フレームワークを選択しました。そのため、JavaScript と CSS は、それを必要とする機能を実際に使用するときにのみ、ユーザーがダウンロードするようにしています。これは、Google のビルドおよびモジュールシステムを組み合わせたテンプレートに基づくアプローチによって行われ、デベロッパーの労力をほとんど必要とせずに動作を実現します。

この新しいフレームワークでは、ウェブ版 Google+ の再実装のプロトタイピングを開始しました。Google は「悪い」ことを禁止し、開発に厳格なルールを設け始めました。重要なルールのひとつに、すべてのページをサーバー側とクライアント側の両方でレンダリングする必要がありました。サーバー側レンダリングを使用すると、HTML が読み込まれるとすぐにユーザーは読み始めることができます。また、ページのコンテンツを更新するために JavaScript を実行する必要はありません。ページが読み込まれ、ユーザーがリンクをクリックしたときに、すべてを再度レンダリングするために完全なラウンドトリップを実行することは望ましくありません。ここで、クライアント側のレンダリングが重要になります。データとテンプレートを取得して、新しいページをクライアントでレンダリングするだけです。これには多くのトレードオフが伴うため、サーバーとクライアントの両方ですべてを 2 回実装する必要のない、サーバーサイドとクライアントサイドのレンダリングを容易にするフレームワークを使用しました。

その他のルールには、ブラウザが再レイアウトされ、パフォーマンスに悪影響を及ぼす高さと幅のアニメーションの禁止が含まれていました。DOM の操作とアニメーションについては、ブラウザのレンダリングのリフレッシュレートと同期してタスクが実行されるようにスケジュールを設定しました。また、コストの高いスタイル計算を繰り返し行う必要がないように、すべての測定タスクをグループ化しています。また、すべてが意図したとおりに動作するように、Chrome のプロファイラツールに大きく依存していました。さらに、ページサイズの急激な増加を防ぐために、コード変更が JS フットプリントに及ぼす影響を計算するツールも作成しました。

これにはある程度時間がかかりましたが、開発中に問題を特定して排除する機能がなかったら、はるかに困難だったでしょう。

2015 年 2 月に、このレスポンシブ実装のモバイルウェブ版をリリースしました。これにより、新しい設計と新しいプロセスを詳しく検証することができました。このリリースで得られたデータを使用して、何が機能し、何が機能しなかったかを検証しました。設計を繰り返し行い、より多くのデバイスをサポートするために拡張を開始しました。2015 年 11 月に、この新しい実装をすべてのデバイスでリリースしました。

結果

Google+ では、パフォーマンスを犠牲にすることなく、充実した UI を備えた複雑なウェブアプリを構築できました。サイトは現在、かつてないほど高速かつスリムになりました。

	変更前	変更後
ホームページの合計サイズ、gzip で圧縮（画像付き）	22,600 KB	327 KB
リクエスト数	251	45
HTML（gzip で圧縮されていない）	1,100 KB	362 KB
JavaScript と CSS（gzip 圧縮）	2,768 KB	111KB
ページ完了時の平均読み込み時間（レイテンシ）	12 秒最初のバイトまで 0.7 秒	3 秒最初のバイトまで 0.1 秒