高速なWebページはレンダリングが最初、次にJavaScript

より高速に動作するWebページを開発する方法として、Steve Souders氏が自身のブログにおいてRender first. JS second.という記事を公開している。高速に動作するWebページを作成するには、先にレンダリングを済ませて、そのあとでJavaScriptを実行するようにすることだと説明する内容になっている。Webページ開発におけるひとつの指針として参考になる。

Steve Souders氏はJavaScriptの遅延読み込みテクニックを広く紹介することになった人物としても有名。遅延読み込みのためのテクニックはほかにもあり、ユーザが大規模でかつ高速性が求められるサイトではすでに採用されていることが多いテクニックとなっている。こうしたテクニックを使っても、レンダリングが完了してからJavaScriptを実行するようにするのはなかなか難しい。

Render first. JS second.では最終的にレンダリングを最初に実施し、次にJavaScriptを実行するようにするには、ブラウザとWeb開発者が次のように変わる必要があると説明している。

• すべてのブラウザがscript要素のasyncとdefer属性の機能を実装する。
• Webデベロッパはscript要素のasyncとdefer属性を活用して非同期のJavaScript読み込みによるページの開発を実施する。レンダリングが完了したあとにJavaScriptを実行するようにする。

またサーバサイドJavaScript実行が、単一のコードベースのままサーバサイドとクライアントサイドでJavaScriptプログラミングを実現できるようにしてくれるとして、その可能性にも言及している。なお、遅延読み込みのテクニックを使い、レンダリングあとにJavaScriptが実行されるようにした場合、結果的に全体として読み込みにかかる時間は長くなる。しかし体感としては先にレンダリングされた方がユーザは高速に動作していると感じると説明がある。

script要素のasyncとdefer属性は現在ブラウザでの対応が進められている機能のひとつ。今後登場することになる新しいブラウザはこの機能をサポートすることになるとみられており、同機能を使った実装が今後は増えることになるとみられる。