こんにちは、羽山です。
今回はウェブシステムにおけるフロントエンドのパフォーマンスの話です。

皆様はウェブのパフォーマンスって気にしてますか?
おそらく大抵の方はSQLのチューニングやロジックの改良で、起点となるHTMLの生成速度を改善した経験はあるのではないでしょうか?
しかし、いくらプログラムをチューニングしても、思ったよりもページ表示の体感速度は改善しなかったりという経験はありませんか?

昨今のウェブサイトは大量のCSS/Javascriptファイルで構成されているページが大半です。例えばHTMLを100~300msくらいで生成して転送できても、ブラウザ側でページ表示が完全に完了するのは4~5秒かかるということも珍しくありません。

「なんか遅いけど沢山いろいろ読み込んでるから仕方ないな・・・」って諦めないでください。ブラウザがどうやってHTMLを解釈して、CSS/Javascriptを読み込むのかを理解すればチューニングのポイントが見えてくるはずです。


例えば以下のシンプルなHTMLがあります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="css/style.css?d=5000" rel="stylesheet">
<script type="text/javascript">
setTimeout(function() {document.body.innerHTML = "bar"}, 3000);
</script>
<title>Improve Web Performance</title>
</head>
<body>
foo
</body>
</html>

外部CSSの読み込みとインラインのJavascriptがあり、本文はfooのみですが転送速度に細工をしています。
HTMLはWebサーバから数msで転送されますが、CSSは転送に5秒かかるようにしています。(d=5000の指定で制御)
また、インラインのJavascriptコードは実行されてから3秒後に本文をbarに変更します。
style.cssは以下の内容で、body全体のフォントを赤色にするだけのものです。
/* style.css */
body { color: red; }

さて、リンクをクリックしてこのページを開いたとします。
fooまたはbarが画面に表示されるのはリンクをクリックしてから約何秒後になるでしょうか?また色は黒色でしょうか?それとも赤色でしょうか?
続きを読む