Twitterがページ表示時間を5分の1に高速化。どのようなテクニックを使ったのか？

Twitterがフロントエンドのアーキテクチャを見直し、Webページの読み込み速度を改善したことをブログで明らかにしています。

新しいアーキテクチャでは、これまでWebブラウザ上でJavaScriptの処理によって行ってきたWebページのレンダリングを見直し、サーバ側でレンダリング済みのHTMLページを送信し表示することにしています。これによってWebページの読み込みから最初のツイートの表示までの時間が大幅に短縮されることになりました。

When we shipped #NewTwitter in September 2010, we built it around a web application architecture that pushed all of the UI rendering and logic to JavaScript running on our users’ browsers

2010年9月に現在のWebページを開発した際のアーキテクチャでは、すべてのUIレンダリングとロジックをJavaScript化してユーザーのブラウザ上で行っていました。

今回の改変により、レンダリング処理をサーバ側に戻すことでページが最初に表示されるまでの時間が5分の1になったと。

This has allowed us to drop our initial page load times to 1/5th of what they were previously and reduce differences in performance across browsers.

ブログではもう少し具体的なテクニックが解説されているので、詳しく見てみましょう。

Hashbangの廃止と非同期モジュール

No more #!

ページのURLに含まれているHashbangスタイルのURL（#!）を廃止。これまではHTMLをロードし、JavaScriptをロードし、HashbangスタイルのURLを認識してレンダリングが行われる、というステップでページが表示されてたが、今後は通常のURLでHTMLがロードされすぐに表示されるため、最初のページ表示が非常に高速になっている。

Reducing time to first tweet

性能上の課題がどこにあるかを分析したところ、最初のツイートが表示されるまでの時間に最大の課題があることを発見。結局のところ、ブラウザ上でJavaScriptを実行するのに時間がかかっているのが原因である。

そのためページのレンダリングをすべてJavaScript側から外してサーバ側に移し、ページの表示が終わってからJavaScriptを遅延実行するようにし、すぐにページが表示されるようにした。

Loading only what we need

ページの表示を高速化したら、次はJavaScriptを可能な限り小さく、かつ高速に実行できるように、必要なJavaScriptだけをロードするようにした。

そのためにJavaScriptをCommonJSのモジュールとし、AMD（Asynchronous Module Definition）対応にした（注：AMDとは、非同期でロード、実行可能な形式）。

先祖返りの面とモダンな面の組み合わせ

今回のアーキテクチャの変更は、モバイルデバイスなど非力なプロセッサと少ないメモリでも快適にTwitterを楽しんでもらうために、クライアント側のデバイスとWebブラウザに依存してJavaScriptで高性能な画面を実現する方法をやめて、できるだけサーバ側で処理済みのHTMLを送信して表示するというシンプルな方法にした、という判断のように見えます。

また、昨年からJavaVMへと移行したことでサーバ側の処理能力を拡大させたこととも無関係ではないように思います。

• Twitterが、Ruby on RailsからJavaVMへ移行する理由

これはある意味でHTMLとCGIで何でもやっていた昔に先祖返りしたような面がありますが、一方でインタラクティブな操作を担うJavaScriptの部分では、遅延実行や非同期ロードといった比較的モダンなテクニックが使われています。サーバとクライアントのどちらにどのような処理を任せるかは時代によって変わってきました。今回の変化もそのチューニングの良い例のように思います。

新しいアーキテクチャはまず、Tweetのパーマリンクページから採用され、今後数週間で全体へとロールアウトしていくとのことです。