【Webサイト】サイトの高速化（JavaScript ファイルを末尾に。ローディング画面の追加）

　
自分のサイトを早くするよー。

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

この本を読んでるよ。

改修前の状態

ルール６：JSファイルは下に置く

このルールに素直に従えば
逐次ローディングが実行されてユーザー満足度は増す。
けど！
私のサイトは、頭にアニメがくるから逐次ローディングはむしろ困る。

今まではJSを頭に置くことで
（JSの読み込みでローディングが停止されるのを逆手にとって）、
アニメスタートまで要素が描画されることを防いでいた。

でも、本質じゃないなーと思ったので
JSを下において、代わりにローディング中画面を作ることに。

ちなみに、
正規の画面になる前に一瞬だけ画面が表示されてしまうことを
FOUC現象、といいます。

自分のサイトでは、背景は水色なんだけれど、
アニメーションのスタート時に白色に切り替えるから、
アニメーション実行前にレンダリングされると
一瞬背景が水色に点滅するような印象になってしまう。
これは良くない。

ローディング画面

といっても話は簡単で、以下の要素を追加するだけ。

<div id="loadingWrap">...loading</div>

#loadingWrap {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  background: #ffffff;
  padding-top: 20%;
  padding-left: 45%;
}

documentロードが終わったタイミングで消せばいい。

$(".notanime").hide();

　
自分の場合は、FOUC現象を絶対に避けたいので、
消す前に背景色を白にする関数とかを呼び出しています。
非同期実行だけど、そんなに重い処理ではないので大丈夫かなと。

$(".notanime").hide();
$("body").css("background-color", "#ffffff");
$("#loadingWrap").remove();

結果は･･･？

■改修前

■改修後

start render の値が明らかに早くなってる。

自分のサイトみたいに
「リソースが全部落ちてきてから表示したい」というのは
逐次描画が出来ないから困る。
それに、Web計測が難しい。。

でも、アニメに関係ないjsや画像は
明示的に遅らせてローディングするともっと早くなりそう。

　
あと、DNSルックアップでも意外と時間を取っている。
このあたりも改善できそう。