HTML, JavaScript, CSSなどの読み込みとパフォーマンスへの影響を確認するためのコンテンツやツール群です。 Node.jsで付属のserver.jsを起動することで、ローカル環境でネットワークの転送遅延をシミュレートしたHTMLのレンダリング状況の確認などを行えます。
Software Design誌面の特集記事と連動して実際に誌面で利用したソースコードを動かせる環境です。
ブラウザの制約条件から考えるフロントエンドのリソース設計イベントと連動して実際に利用したソースコードを動かせる環境です。
ブラウザがどのような種類のリソースを Preload Scanner で読み込めるかを確認する簡易ツールです。
Node.jsのv4以降が動作する環境で実行してください。追加ライブラリは不要でNode.js単体で動作します。
$ node server.js
ポートとホストを指定する場合は以下のようにします。
$ node server.js 8080 localhost
起動に成功すると以下のようなメッセージが表示されるので指定されたURLへアクセスします。
Starting on http://localhost:8080
huge.htmlに対して、「遅延なし」「TTFB(Time to First Byte)の遅延30秒」「30秒で徐々に転送」の3パターンでアクセスしてみます。
ファイルを遅延なしで転送する場合は以下のようにアクセスします。
ルート, css, jsディレクトリの3カ所をウェブのルートとみなしてファイルを探します。
http://localhost:8080/huge.html
最初の1バイトが転送されるまでの時間(TTFB)を遅延する場合は、ファイル名に「_<sec>s」を付与してブラウザからアクセスします。
http://localhost:8080/huge_30s.html
遅延時間に対して徐々に転送する場合は、ファイル名に「_<sec>s_g」を付与してブラウザからアクセスします。
http://localhost:8080/huge_30s_g.html
ただし徐々に転送してもクライアント環境によってはうまく動作しない場合があります。
例えばウイルス対策ソフトが動作していると転送されたHTMLの間に入ってバッファリングされるため、TTFBの遅延とほぼ同じ動きになります。
この機能は仮想環境上で実行するなど、なるべくプレーンな環境で試しください。