サイト速度改善のコツ

なにも考えずに、ずーっと下にあるの直前に移動させてください。


それでページをF5でリロード。
けっこう表示速度変わりません？
あからさまにスピードが速くなったサイトがあると思います。

「プログレッシブ・レンダリング」という言葉があります。
ブラウザによるレンダリングを逐次行わせて、
ユーザーの体感速度を高めようという手法・考え方です。
早い話、何秒も真っ白なページとかをなんとか避けようということです。
Googleもプログレッシブ･レンダリングの有益性について触れています。
以下、上記リンク先からの引用です。

Does progressive rendering help users?
Definitely! Progressive rendering is when a browser can display content as it’s available incrementally rather than waiting for all the content to display at once. This provides users faster visual feedback and helps them feel more in control. Bing experimented with progressive rendering by sending users their visual header (like the logo and searchbox) quickly, then the results/ads once they were available. Bing found a 0.7% increase in satisfaction with progressive rendering. They commented that this improvement compared with full feature rollout.


ブラウザが行うレンダリングとは、
サーバーから送られたソースを解釈して表示する作業のことです。
そしてソースというのは一行目から順番に、どんな表示をすればいいのか解釈されていきます。
このことをサイト制作者はいつでも意識しておく必要があるんです。

ブラウザはレンダリングの最中、実に忙しいです。
htmlソースを上から読んでいき、「別ファイルを参照してくれ」という指示が書かれている場合、
指示通りに別ファイルを読みにいかなければなりません。
以下のような命令が書かれている場合ですね。

<script type="text/javascript" src="/js/SpryCollapsiblePanel.js"></script>

サーバーからのファイル送信が原則1ファイルずつなように、
ブラウザの解釈作業も同時に行うことは出来ない仕様になっています。
これはモダンブラウザでも出来ません。
（未来のブラウザでは同時解釈がきっと可能になっていると思います。）

なので、javascriptファイルを読みにいっている間は、
htmlの解釈作業はその行で中断。レンダリングは中途半端な状態でストップしてしまうことになります。

そこで、サイト速度改善のためには、
htmlを先行して解釈させてしまいレンダリングを大部分行ってもらいます。
javascriptを</body>の直前に配置するのは、
「とりあえずhtmlさん、お先にどうぞ」という譲り合いの精神なわけですね。

GoogleAnalyticsのコードも</body>の直前に置きますよね。
じゃんじゃん、bodyの終了タグの直前に置いちゃいましょう。
サイトの表示が速くなったと感じるはずです。


＜注意＞
headから移動できないjavascriptもあります。
たとえばdocument.writeが含まれている場合です。
また、変数のスコープを考慮しなければいけないケースもあります。

でもですね、ほとんどの場合は移動してもなんの問題もありません。
まあ、とりあえず移動させちゃって、
動かなくなったら、そのスクリプトだけheadの中に戻せばいいんです。

迷わず行けよ。行けばわかるさ。
アントニオ猪木の精神ですね。
もしくは、Go for Block（当たって砕けろ）です。

直せばいいんです。それが出来るのがwebサイトのいいところなんで。

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

サイト高速化の教科書です。閲覧ユーザーの幸せのために、全てのサイト制作者が読むべきだと思います。

続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス

前作、ハイパフォーマンスwebサイトの続編。2010年4月出版。最先端のwebサイト高速化テクニックが満載です。前作と合わせて読むとわかりやすいです。